JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements
Classes

Element View3D

JXG.GeometryElement
   ↳ JXG.View3D
         ↳ View3D

This element creates a 3D view.

Defined in: view3d.js.
Extends JXG.View3D.

Element Summary
Constructor Attributes Constructor Name and Description
 
A View3D element provides the container and the methods to create and display 3D elements.
Attributes Summary
Field Attributes Field Name and Description
 
Position of the main axes in a View3D element.
 
az
Specify the user handling of the azimuth.
 
Specify the user handling of the bank angle.
 
When this option is enabled, points closer to the screen are drawn over points further from the screen within each layer.
 
el
Specify the user handling of the elevation.
 
Choose the projection type to be used: `parallel` or `central`.
 
Enable user handling by a virtual trackball.
 
Fixed values for the view, which can be changed using keyboard keys `picture-up` and `picture-down`.
 
Allow vertical dragging of objects, i.e.
 
Attributes of the centered 3D x-axis.
 
Attributes of the 3D x-axis at the border.
 
Attributes of the 3D plane orthogonal to the x-axis at the "front" of the cube.
 
Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube.
 
Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube.
 
Attributes of the 3D plane orthogonal to the x-axis at the "rear" of the cube.
 
Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube.
 
Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube.
 
Attributes of the centered 3D y-axis.
 
Attributes of the 3D y-axis at the border.
 
Attributes of the 3D plane orthogonal to the y-axis at the "front" of the cube.
 
Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube.
 
Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube.
 
Attributes of the 3D plane orthogonal to the y-axis at the "rear" of the cube.
 
Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube.
 
Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube.
 
Attributes of the centered 3D z-axis.
 
Attributes of the 3D z-axis at the border.
 
Attributes of the 3D plane orthogonal to the z-axis at the "front" of the cube.
 
Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube.
 
Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube.
 
Attributes of the 3D plane orthogonal to the z-axis at the "rear" of the cube.
 
Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube.
 
Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube.
Methods borrowed from class JXG.View3D:
_azEventHandler, _bankEventHandler, _elEventHandler, _getW0, _projectToSphere, _trackballHandler, _updateCentralProjection, animateAzimuth, compareDepth, create, getMesh, intersectionLineCube, intersectionPlanePlane, isInCube, isVerticalDrag, nextView, pointerDownHandler, pointerUpHandler, previousView, project2DTo3DPlane, project2DTo3DVertical, project3DTo2D, project3DToCube, projectScreenToSegment, select, setCurrentView, setView, stopAzimuth, updateProjectionTrackball, worldToFocal
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hasPoint, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, update, updateRenderer, updateVisibility, useLocale
Events borrowed from class JXG.GeometryElement:
attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
View3D
A View3D element provides the container and the methods to create and display 3D elements. It is contained in a JSXGraph board.

It is advisable to disable panning of the board by setting the board attribute "pan":

  pan: {anabled: fasle}
Otherwise users will not be able to rotate the scene with their fingers on a touch device.
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "view3d".

Possible parent array combinations are:
{Array} lower
{Array} dim
{Array} cube

Here, lower is an array of the form [x, y] and dim is an array of the form [w, h]. The arrays [x, y] and [w, h] define the 2D frame into which the 3D cube is (roughly) projected. If the view's azimuth=0 and elevation=0, the 3D view will cover a rectangle with lower left corner [x,y] and side lengths [w, h] of the board. The array 'cube' is of the form [[x1, x2], [y1, y2], [z1, z2]] which determines the coordinate ranges of the 3D cube.


Throws:
{Exception}
If the element cannot be constructed with the given parent objects an exception is thrown.
Examples:
    var bound = [-4, 6];
    var view = board.create('view3d',
        [[-4, -3], [8, 8],
        [bound, bound, bound]],
        {
            projection: 'parallel',
            trackball: {enabled:true},
        });

    var curve = view.create('curve3d', [
        (t) => (2 + Math.cos(3 * t)) * Math.cos(2 * t),
        (t) => (2 + Math.cos(3 * t)) * Math.sin(2 * t),
        (t) => Math.sin(3 * t),
        [-Math.PI, Math.PI]
    ], { strokeWidth: 4 });


				
				
    var bound = [-4, 6];
    var view = board.create('view3d',
        [[-4, -3], [8, 8],
        [bound, bound, bound]],
        {
            projection: 'central',
            trackball: {enabled:true},

            xPlaneRear: { visible: false },
            yPlaneRear: { visible: false }

        });

    var curve = view.create('curve3d', [
        (t) => (2 + Math.cos(3 * t)) * Math.cos(2 * t),
        (t) => (2 + Math.cos(3 * t)) * Math.sin(2 * t),
        (t) => Math.sin(3 * t),
        [-Math.PI, Math.PI]
    ], { strokeWidth: 4 });


				
				
    var bound = [-4, 6];
    var view = board.create('view3d',
        [[-4, -3], [8, 8],
        [bound, bound, bound]],
        {
            projection: 'central',
            trackball: {enabled:true},

            // Main axes
            axesPosition: 'border',

            // Axes at the border
            xAxisBorder: { ticks3d: { ticksDistance: 2} },
            yAxisBorder: { ticks3d: { ticksDistance: 2} },
            zAxisBorder: { ticks3d: { ticksDistance: 2} },

            // No axes on planes
            xPlaneRearYAxis: {visible: false},
            xPlaneRearZAxis: {visible: false},
            yPlaneRearXAxis: {visible: false},
            yPlaneRearZAxis: {visible: false},
            zPlaneRearXAxis: {visible: false},
            zPlaneRearYAxis: {visible: false}
        });

    var curve = view.create('curve3d', [
        (t) => (2 + Math.cos(3 * t)) * Math.cos(2 * t),
        (t) => (2 + Math.cos(3 * t)) * Math.sin(2 * t),
        (t) => Math.sin(3 * t),
        [-Math.PI, Math.PI]
    ], { strokeWidth: 4 });


				
				
    var bound = [-4, 6];
    var view = board.create('view3d',
        [[-4, -3], [8, 8],
        [bound, bound, bound]],
        {
            projection: 'central',
            trackball: {enabled:true},

            axesPosition: 'none'
        });

    var curve = view.create('curve3d', [
        (t) => (2 + Math.cos(3 * t)) * Math.cos(2 * t),
        (t) => (2 + Math.cos(3 * t)) * Math.sin(2 * t),
        (t) => Math.sin(3 * t),
        [-Math.PI, Math.PI]
    ], { strokeWidth: 4 });


				
				
    var bound = [-4, 6];
    var view = board.create('view3d',
        [[-4, -3], [8, 8],
        [bound, bound, bound]],
        {
            projection: 'central',
            trackball: {enabled:true},

            // Main axes
            axesPosition: 'border',

            // Axes at the border
            xAxisBorder: { ticks3d: { ticksDistance: 2} },
            yAxisBorder: { ticks3d: { ticksDistance: 2} },
            zAxisBorder: { ticks3d: { ticksDistance: 2} },

            xPlaneRear: {
                fillColor: '#fff',
                mesh3d: {visible: false}
            },
            yPlaneRear: {
                fillColor: '#fff',
                mesh3d: {visible: false}
            },
            zPlaneRear: {
                fillColor: '#fff',
                mesh3d: {visible: false}
            },
            xPlaneFront: {
                visible: true,
                fillColor: '#fff',
                mesh3d: {visible: false}
            },
            yPlaneFront: {
                visible: true,
                fillColor: '#fff',
                mesh3d: {visible: false}
            },
            zPlaneFront: {
                visible: true,
                fillColor: '#fff',
                mesh3d: {visible: false}
            },

            // No axes on planes
            xPlaneRearYAxis: {visible: false},
            xPlaneRearZAxis: {visible: false},
            yPlaneRearXAxis: {visible: false},
            yPlaneRearZAxis: {visible: false},
            zPlaneRearXAxis: {visible: false},
            zPlaneRearYAxis: {visible: false},
            xPlaneFrontYAxis: {visible: false},
            xPlaneFrontZAxis: {visible: false},
            yPlaneFrontXAxis: {visible: false},
            yPlaneFrontZAxis: {visible: false},
            zPlaneFrontXAxis: {visible: false},
            zPlaneFrontYAxis: {visible: false}

        });

    var curve = view.create('curve3d', [
        (t) => (2 + Math.cos(3 * t)) * Math.cos(2 * t),
        (t) => (2 + Math.cos(3 * t)) * Math.sin(2 * t),
        (t) => Math.sin(3 * t),
        [-Math.PI, Math.PI]
    ], { strokeWidth: 4 });


				
				
 var bound = [-5, 5];
 var view = board.create('view3d',
     [[-6, -3],
      [8, 8],
      [bound, bound, bound]],
     {
         // Main axes
         axesPosition: 'center',
         xAxis: { strokeColor: 'blue', strokeWidth: 3},

         // Planes
         xPlaneRear: { fillColor: 'yellow',  mesh3d: {visible: false}},
         yPlaneFront: { visible: true, fillColor: 'blue'},

         // Axes on planes
         xPlaneRearYAxis: {strokeColor: 'red'},
         xPlaneRearZAxis: {strokeColor: 'red'},

         yPlaneFrontXAxis: {strokeColor: 'blue'},
         yPlaneFrontZAxis: {strokeColor: 'blue'},

         zPlaneFrontXAxis: {visible: false},
         zPlaneFrontYAxis: {visible: false}
     });


				
                
Attribute Detail
{String} axesPosition
Position of the main axes in a View3D element. Possible values are 'center', 'border' or 'none'.
Defined in: options3d.js.
Default Value:
'center'

{Object} az
Specify the user handling of the azimuth.
Defined in: options3d.js.
    var bound = [-4, 6];
    var view = board.create('view3d',
        [[-4, -3], [8, 8],
        [bound, bound, bound]],
        {
            projection: 'parallel',
            az: {
                slider: {visible: true}
            }
        });


					
					

						
						
						
						
							
Default Value:
{
     pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'},
     keyboard: {enabled: true, step: 10, key: 'ctrl'},
     continuous: true,
     slider: {
         visible: true,
         style: 6,
         point1: {frozen: true},
         point2: {frozen: true},
         min: 0,
         max: 2 * Math.PI,
         start: 1.0
     },
}

{Object} bank
Specify the user handling of the bank angle.
Defined in: options3d.js.
    var bound = [-4, 6];
    var view = board.create('view3d',
        [[-4, -3], [8, 8],
        [bound, bound, bound]],
        {
            projection: 'parallel',
            bank: {
                slider: {visible: true}
            }
        });


					
					

						
						
						
						
							
Default Value:
{
     pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'},
     keyboard: {enabled: true, step: 10, key: 'ctrl'},
     continuous: true,
     slider: {
         visible: true,
         style: 6,
         point1: {frozen: true},
         point2: {frozen: true},
         min: 0,
         max: 2 * Math.PI,
         start: 0.3
     },
}
							

depthOrderPoints
When this option is enabled, points closer to the screen are drawn over points further from the screen within each layer.
Defined in: options3d.js.
Default Value:
false

{Object} el
Specify the user handling of the elevation.
Defined in: options3d.js.
    var bound = [-4, 6];
    var view = board.create('view3d',
        [[-4, -3], [8, 8],
        [bound, bound, bound]],
        {
            projection: 'parallel',
            el: {
                slider: {visible: true}
            }
        });


					
					

						
						
						
						
							
Default Value:
{
     pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'},
     keyboard: {enabled: true, step: 10, key: 'ctrl'},
     continuous: true,
     slider: {
         visible: true,
         style: 6,
         point1: {frozen: true},
         point2: {frozen: true},
         min: 0,
         max: 2 * Math.PI,
         start: 0.3
     },
}
							

{String} projection
Choose the projection type to be used: `parallel` or `central`.
Defined in: options3d.js.
Default Value:
'parallel'

{Object} trackball
Enable user handling by a virtual trackball. Sub-attributes:
Defined in: options3d.js.
Default Value:
{
  enabled: false,
  outside: true,
  button: -1,
  key: 'none'
}

{Array} values
Fixed values for the view, which can be changed using keyboard keys `picture-up` and `picture-down`. Array of the form: [[el0, az0, r0], [el1, az1, r1, ...[eln, azn, rn]]
Defined in: options3d.js.
Default Value:
{[[0, 1.57], [0.78, 0.62], [0, 0], [5.49, 0.62], [4.71, 0], [3.93, 0.62], [3.14, 0], [2.36, 0.62], [1.57, 1.57]]}

{Object} verticalDrag
Allow vertical dragging of objects, i.e. in direction of the z-axis. Subobjects are
  • enabled: true
  • key: 'shift'

Possible values for attribute key: 'shift' or 'ctrl'.
Defined in: options3d.js.

Default Value:
{enabled: true, key: 'shift'}

{Line3D} xAxis
Attributes of the centered 3D x-axis.
Defined in: options3d.js.
See:
View3D#axesPosition

{Line3D} xAxisBorder
Attributes of the 3D x-axis at the border.
Defined in: options3d.js.
See:
View3D#axesPosition
Default Value:
{
  name: 'x',
  withLabel: false,
  label: {
      position: '50% left',
      offset: [30, 0],
      fontsize: 15
  },
  strokeWidth: 1,
  lastArrow: false,
  ticks3d: {
      label: {
          anchorX: 'middle',
          anchorY: 'middle'
      }
  }
}

{Plane3D} xPlaneFront
Attributes of the 3D plane orthogonal to the x-axis at the "front" of the cube.
Defined in: options3d.js.

{Plane3D} xPlaneFrontYAxis
Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube.
Defined in: options3d.js.

{Plane3D} xPlaneFrontZAxis
Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube.
Defined in: options3d.js.

{Plane3D} xPlaneRear
Attributes of the 3D plane orthogonal to the x-axis at the "rear" of the cube.
Defined in: options3d.js.

{Plane3D} xPlaneRearYAxis
Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube.
Defined in: options3d.js.

{Plane3D} xPlaneRearZAxis
Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube.
Defined in: options3d.js.

{Line3D} yAxis
Attributes of the centered 3D y-axis.
Defined in: options3d.js.
See:
View3D#axesPosition

{Line3D} yAxisBorder
Attributes of the 3D y-axis at the border.
Defined in: options3d.js.
See:
View3D#axesPosition
Default Value:
{
  name: 'x',
  withLabel: false,
  label: {
      position: '50% right',
      offset: [0, -30],
      fontsize: 15
  },
  strokeWidth: 1,
  lastArrow: false,
  ticks3d: {
      label: {
          anchorX: 'middle',
      }
  }
}

{Plane3D} yPlaneFront
Attributes of the 3D plane orthogonal to the y-axis at the "front" of the cube.
Defined in: options3d.js.

{Plane3D} yPlaneFrontXAxis
Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube.
Defined in: options3d.js.

{Plane3D} yPlaneFrontZAxis
Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube.
Defined in: options3d.js.

{Plane3D} yPlaneRear
Attributes of the 3D plane orthogonal to the y-axis at the "rear" of the cube.
Defined in: options3d.js.

{Plane3D} yPlaneRearXAxis
Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube.
Defined in: options3d.js.

{Plane3D} yPlaneRearZAxis
Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube.
Defined in: options3d.js.

{Line3D} zAxis
Attributes of the centered 3D z-axis.
Defined in: options3d.js.
See:
View3D#axesPosition

{Line3D} zAxisBorder
Attributes of the 3D z-axis at the border.
Defined in: options3d.js.
See:
View3D#axesPosition
Default Value:
{
  name: 'z',
  withLabel: false,
  label: {
      position: '50% right',
      offset: [30, 0],
      fontsize: 15
  },
  strokeWidth: 1,
  lastArrow: false,
  ticks3d: {
      label: {
          anchorX: 'middle',
          anchorY: 'middle'
      }
  }
}

{Plane3D} zPlaneFront
Attributes of the 3D plane orthogonal to the z-axis at the "front" of the cube.
Defined in: options3d.js.

{Plane3D} zPlaneFrontXAxis
Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube.
Defined in: options3d.js.

{Plane3D} zPlaneFrontYAxis
Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube.
Defined in: options3d.js.

{Plane3D} zPlaneRear
Attributes of the 3D plane orthogonal to the z-axis at the "rear" of the cube.
Defined in: options3d.js.

{Plane3D} zPlaneRearXAxis
Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube.
Defined in: options3d.js.

{Plane3D} zPlaneRearYAxis
Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube.
Defined in: options3d.js.

Attributes borrowed from other Elements
Attributes borrowed from class JXG.GeometryElement:
dash, dashScale, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, viewport, visible, withLabel

Fields borrowed from other Elements
Fields borrowed from class JXG.View3D:
angles, az_slide, bank_slide, bbox3D, boxToCam, defaultAxes, el_slide, elementsByName, focalDist, llftCorner, matrix3D, matrix3DRot, objects, points, projectionType, r, shift, size, trackballEnabled
Fields borrowed from class JXG.GeometryElement:
_org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc

Methods borrowed from other Elements
Methods borrowed from class JXG.View3D:
_azEventHandler, _bankEventHandler, _elEventHandler, _getW0, _projectToSphere, _trackballHandler, _updateCentralProjection, animateAzimuth, compareDepth, create, getMesh, intersectionLineCube, intersectionPlanePlane, isInCube, isVerticalDrag, nextView, pointerDownHandler, pointerUpHandler, previousView, project2DTo3DPlane, project2DTo3DVertical, project3DTo2D, project3DToCube, projectScreenToSegment, select, setCurrentView, setView, stopAzimuth, updateProjectionTrackball, worldToFocal
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hasPoint, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, update, updateRenderer, updateVisibility, useLocale

Events borrowed from other Elements
Events borrowed from class JXG.GeometryElement:
attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Documentation generated by JsDoc Toolkit 2.4.0 on Wed Oct 02 2024 09:14:38 GMT+0200 (Mitteleuropäische Sommerzeit)