Element View3D

JXG.GeometryElement
↳ JXG.View3D
↳ View3D

A View3D element provides the container and the methods to create and display 3D elements.

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

Element Summary
Constructor Attributes	Constructor Name and Description
	View3D A View3D element provides the container and the methods to create and display 3D elements.

Attributes Summary
Field Attributes	Field Name and Description
	axesPosition Position of the main axes in a View3D element.
	az Specify the user handling of the azimuth.
	bank Specify the user handling of the bank angle.
	depthOrder When this attribute is enabled, elements closer to the screen are drawn over elements further from the screen within the 3D layer.
	el Specify the user handling of the elevation.
	projection Choose the projection type to be used: `parallel` or `central`.
	trackball Enable user handling by a virtual trackball that allows to move the 3D scene with 3 degrees of freedom.
	values Fixed values for the view, which can be changed using keyboard keys `picture-up` and `picture-down`.
	verticalDrag Allow vertical dragging of objects, i.e.
	xAxis Attributes of the centered 3D x-axis.
	xAxisBorder Attributes of the 3D x-axis at the border.
	xPlaneFront Attributes of the 3D plane orthogonal to the x-axis at the "front" of the cube.
	xPlaneFrontYAxis Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube.
	xPlaneFrontZAxis Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube.
	xPlaneRear Attributes of the 3D plane orthogonal to the x-axis at the "rear" of the cube.
	xPlaneRearYAxis Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube.
	xPlaneRearZAxis Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube.
	yAxis Attributes of the centered 3D y-axis.
	yAxisBorder Attributes of the 3D y-axis at the border.
	yPlaneFront Attributes of the 3D plane orthogonal to the y-axis at the "front" of the cube.
	yPlaneFrontXAxis Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube.
	yPlaneFrontZAxis Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube.
	yPlaneRear Attributes of the 3D plane orthogonal to the y-axis at the "rear" of the cube.
	yPlaneRearXAxis Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube.
	yPlaneRearZAxis Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube.
	zAxis Attributes of the centered 3D z-axis.
	zAxisBorder Attributes of the 3D z-axis at the border.
	zPlaneFront Attributes of the 3D plane orthogonal to the z-axis at the "front" of the cube.
	zPlaneFrontXAxis Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube.
	zPlaneFrontYAxis Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube.
	zPlaneRear Attributes of the 3D plane orthogonal to the z-axis at the "rear" of the cube.
	zPlaneRearXAxis Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube.
	zPlaneRearYAxis 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, eval, evalVisProp, 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: {enabled: false}

Otherwise users will not be able to rotate the scene with their fingers on a touch device.

The start position of the camera can be adjusted by the attributes View3D#az, View3D#el, and View3D#bank.

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:

Attribute Detail

{String} axesPosition

Position of the main axes in a View3D element. Possible values are 'center', 'border' or 'none'. This attribute is immutable, i.e. can not be changed during the lifetime of the construction.
Defined in: options3d.js.

Default Value:: 'center'

{Object} az

Specify the user handling of the azimuth.

pointer sub-attributes:
- enabled: Boolean that specifies whether pointer navigation is allowed by azimuth.
- speed: Number indicating how many passes the range of the az_slider makes when the cursor crosses the entire board once in the horizontal direction.
- outside: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board.
- button: Which button of the pointer should be used? ('-1' (=no button), '0' or '2')
- key: Should an additional key be pressed? ('none', 'shift' or 'ctrl')
keyboard sub-attributes:
- enabled: Boolean that specifies whether the keyboard (left/right arrow keys) can be used to navigate the board.
- step: Size of the step per keystroke.
- key: Should an additional key be pressed? ('none', 'shift' or 'ctrl')
continuous: Boolean that specifies whether the az_slider starts again from the beginning when its end is reached.
slider attributes of the az_slider (Slider) with additional
- min: Minimum value.
- max: Maximum value.
- start: Start value.
'min' and 'max' are used only if trackball is not enabled. Additionally, the attributes 'slider.point1.pos' and 'slider.point2.pos' control the position of the slider. Possible values are 'auto' or an array [x, y] of length 2 for the position in user coordinates (or a function returning such an array).

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, start: 0.75 * Math.PI}
            }
        });

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: {
             pos: 'auto',
             frozen: false
         },
         point2: {
             pos: 'auto',
             frozen: false
         },
         min: 0,
         max: 2 * Math.PI,
         start: 1.0
     },
}

{Object} bank

Specify the user handling of the bank angle.

pointer sub-attributes:
- enabled: Boolean that specifies whether pointer navigation is allowed by elevation.
- speed: Number indicating how many passes the range of the el_slider makes when the cursor crosses the entire board once in the horizontal direction.
- outside: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board.
- button: Which button of the pointer should be used? ('-1' (=no button), '0' or '2')
- key: Should an additional key be pressed? ('none', 'shift' or 'ctrl')
keyboard sub-attributes:
- enabled: Boolean that specifies whether the keyboard ('<', '>' keys) can be used to navigate the board.
- step: Size of the step per keystroke.
- key: Should an additional key be pressed? ('none', 'shift' or 'ctrl')
continuous: Boolean that specifies whether the el_slider starts again from the beginning when its end is reached.
slider attributes of the el_slider (Slider) with additional
- min: Minimum value.
- max: Maximum value.
- start: Start value.
'min' and 'max' are used only if trackball is not enabled. Additionally, the attributes 'slider.point1.pos' and 'slider.point2.pos' control the position of the slider. Possible values are 'auto' or an array [x, y] of length 2 for the position in user coordinates (or a function returning such an array).

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: {
             pos: 'auto',
             frozen: false
         },
         point2: {
             pos: 'auto',
             frozen: false
         },
         min: 0,
         max: 2 * Math.PI,
         start: 0.3
     },
}

{Object} depthOrder

When this attribute is enabled, elements closer to the screen are drawn over elements further from the screen within the 3D layer. This affects all elements which are in one of the layer specified in the sub-attribute 'layers'.

For each layer this depth ordering is done independently. Sub-attributes:

enabled: false/true
layers: [12, 13]

Defined in: options3d.js.

Default Value:

{
  enabled: false,
  layers: [12, 13]
}

{Object} el

Specify the user handling of the elevation.

pointer sub-attributes:
- enabled: Boolean that specifies whether pointer navigation is allowed by elevation.
- speed: Number indicating how many passes the range of the el_slider makes when the cursor crosses the entire board once in the horizontal direction.
- outside: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board.
- button: Which button of the pointer should be used? ('-1' (=no button), '0' or '2')
- key: Should an additional key be pressed? ('none', 'shift' or 'ctrl')
keyboard sub-attributes:
- enabled: Boolean that specifies whether the keyboard (up/down arrow keys) can be used to navigate the board.
- step: Size of the step per keystroke.
- key: Should an additional key be pressed? ('none', 'shift' or 'ctrl')
continuous: Boolean that specifies whether the el_slider starts again from the beginning when its end is reached.
slider attributes of the el_slider (Slider) with additional
- min: Minimum value.
- max: Maximum value.
- start: Start value.
'min' and 'max' are used only if trackball is not enabled. Additionally, the attributes 'slider.point1.pos' and 'slider.point2.pos' control the position of the slider. Possible values are 'auto' or an array [x, y] of length 2 for the position in user coordinates (or a function returning such an array).

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: {
             pos: 'auto',
             frozen: false
         },
         point2: {
             pos: 'auto',
             frozen: false
         },
         min: 0,
         max: 2 * Math.PI,
         start: 0.3
     },
}

{String} projection

Choose the projection type to be used: `parallel` or `central`.

`parallel` is parallel projection, also called orthographic projection
`central` is central projection, also called perspective projection

Defined in: options3d.js.

        var bound = [-5, 5];
        var view = board.create('view3d',
            [[-6, -3], [8, 8],
            [bound, bound, bound]],
            {
                projection: 'parallel'
            });

        var bound = [-5, 5];
        var view = board.create('view3d',
            [[-6, -3], [8, 8],
            [bound, bound, bound]],
            {
                projection: 'central'
            });

Default Value:: 'parallel'

{Object} trackball

Enable user handling by a virtual trackball that allows to move the 3D scene with 3 degrees of freedom. If not enabled, direct user dragging (i.e. in the JSXGraph board, not manipulating the sliders) will only have two degrees of freedom. This means, the z-axis will always be projected to a vertical 2D line.

Sub-attributes:

enabled: Boolean that specifies whether pointer navigation is allowed by elevation.
outside: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board.
button: Which button of the pointer should be used? ('-1' (=no button), '0' or '2')
key: Should an additional key be pressed? ('none', 'shift' or 'ctrl')

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: aria, cssClass, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightCssClass, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel Fields borrowed from other Elements Fields borrowed from class JXG.View3D: angles, az_slide, bank_slide, bbox3D, boxToCam, defaultAxes, depthOrdered, el_slide, elementsByName, focalDist, llftCorner, matrix3D, matrix3DRot, objects, 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, eval, evalVisProp, 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

JSXGraph 1.11.1 Reference

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.

Element View3D