const props = { data, viewSettings, sceneSettings, sceneOptions }

// data is an array with elements of type "points", "lines", "polygon", or "ellipse"

const sceneSettings = {
    cubeRange = 800,
    cubeZoffset = 1 // between -1 and 1
    dataZoffset = 0 // between -1 and 1
    paperXrange = 600,
    paperYrange = 600,
}

const viewSettings = {
    canvasToViewRatio // 
    defaultCamOrientation = "z-forward-x-left"
    defaultCamDistance,  // distance of camera from scene cube  (0, 0, 0)
    camTx,
    camTy,
    camTz,
    camZoom, //
    cubeRx,
    cubeRy,
    cubeRz,
}

/*

      z
     /
x---*   "z-forward-x-left"
    |
    y

    z   "z-up-y-left"   
    |
 x--*
     \
      y
  z
  |      "z-up-x-forward"
  *-- y
 /
x

  y
  |      "z-forward-x-right"
  *-- x
 /
z

*/

const sceneOptions = {
    paper,
    axisEdges,
    xyPlane,
    cubeOutline,
    crossSections,
}

const paper = {
    color: "#FFFFFF",
    opacity: 0.8,
}

const xyPlane = {
    show: true,
    color: "#FFFFFF",
    opacity: 0.8
}

const axisEdges = {
    show: true
    opacity: 1.0,
    intersectionPointColor: "#FFFFFF"
    intersectionPointSize: 5
    edgeSize: 5
    xEdgeColor: "#FF0000" // red
    yEdgeColor: "#0000FF" // blue
    zEdgeColor: "#00FF00" // green
}
const cubeOutline = {
    show: true,
    color: "#FFFF00",
    opacity: 1.0,
    size: 5,
}

const crossSection = {
    show: true,
    color: "#FFFFFF",
    opacity: 1.0,
    size: 5
}

const cubeCenter = {
  show: true,
  color: "#FFFFFF",
  opacity: 1.0,
  size: 5
}

const worldCenter = {
  show: true,
  color: "#FFFFFF",
  opacity: 1.0,
  size: 5
}

const worldAxes = {}
const cubeAxes = {}
/*
These are the lines that make up the cross
section

      |
 |    |
 | *--*--*
 |/ _/_ /
 /  /  /
*--*--*
*/