# 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.

Class Index | File Index

Elements

- Angle
- Arc
- Arrow
- Arrowparallel
- Axes3D
- Axis
- Axis3D
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circle3D
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Curve
- Curve3D
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- Face3D
- ForeignObject
- Functiongraph
- Functiongraph3D
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- ImplicitCurve
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- IntersectionCircle3D
- IntersectionLine3D
- Label
- Legend
- Line
- Line3D
- MajorArc
- MajorSector
- Measurement
- Mesh3D
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- MirrorElement
- MirrorPoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelogram
- Parallelpoint
- ParametricSurface3D
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Plane3D
- Point
- Point3D
- PolarLine
- PolePoint
- Polygon
- Polygon3D
- PolygonalChain
- Polyhedron3D
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopefield
- Slopetriangle
- Smartlabel
- Sphere3D
- Spline
- Stepfunction
- Tangent
- TangentTo
- Tapemeasure
- Text
- Text3D
- Ticks
- Ticks3D
- Tracecurve
- Transformation
- Transformation3D
- Turtle
- Vectorfield
- Vectorfield3D
- View3D

Classes

- _global_
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.Board.infobox
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Circle3D
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Curve3D
- JXG.Dump
- JXG.EventEmitter
- JXG.Expect
- JXG.Face3D
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeometryElement3D
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Line3D
- JXG.Math
- JXG.Math.BoxQuadtree
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.ImplicitPlot
- JXG.Math.IntervalArithmetic
- JXG.Math.Metapost
- JXG.Math.Nlp
- JXG.Math.Numerics
- JXG.Math.Plot
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.ProbFuncs
- JXG.Math.Quadtree
- JXG.Math.Statistics
- JXG.NoRenderer
- JXG.Options
- JXG.Plane3D
- JXG.Point
- JXG.Point3D
- JXG.Polygon
- JXG.Polygon3D
- JXG.PrefixParser
- JXG.Sphere3D
- JXG.Surface3D
- JXG.SVGRenderer
- JXG.Text
- JXG.Text3D
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.View3D
- JXG.VMLRenderer
- JXG.XML

# Class JXG.View3D

JXG.GeometryElement
↳ JXG.View3D

Creates a new 3D view. Do not use this constructor to create a 3D view. Use JXG.Board#create with type View3D instead.
Defined in: view3d.js.
Extends JXG.GeometryElement.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.View3D(parents, parents, attributes) 3D view inside a JXGraph board.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, aria, baseElement, board, childElements, cssClass, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, element3D, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlightCssClass, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isLabel, isReal, lastDragTime, layer, lineCap, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, nonnegativeOnly, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, type, visible, visProp, visPropCalc, withLabel

Field Summary
Field Attributes | Field Name and Description
--- | ---
| angles The Tait-Bryan angles specifying the view box orientation
| az_slide Slider to adapt azimuth angle
| bank_slide Slider to adjust bank angle
| bbox3D Bounding box (cube) [[x1, x2], [y1,y2], [z1,z2]] of the 3D view
| boxToCam The 4×4 matrix that maps box coordinates to camera coordinates.
| defaultAxes Default axes of the 3D view, contains the axes of the view or null.
<private> | depthOrdered An array containing all the elements in the view that are sorted due to their depth order.
| el_slide Slider to adapt elevation angle
<private> | elementsByName An associative array / dictionary to store the objects of the board by name.
| focalDist The distance from the camera to the screen.
<private> | llftCorner
<private> | matrix3D
| matrix3DRot
<private> | objects An associative array containing all geometric objects belonging to the view.
| projectionType Type of projection.
| r The distance from the camera to the origin.
| shift The translation that moves the center of the view box to the origin.
<private> | size Width and height [w, h] of the 3D view if elevation and azimuth are set to 0.
| trackballEnabled Whether trackball navigation is currently enabled.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, aria, baseElement, board, childElements, cssClass, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, element3D, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlightCssClass, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isLabel, isReal, lastDragTime, layer, lineCap, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, nonnegativeOnly, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, type, visible, visProp, visPropCalc, withLabel

Method Summary
Method Attributes | Method Name and Description
--- | ---
<private> | _azEventHandler(evt) Controls the navigation in az direction using either the keyboard or a pointer.
<private> | _bankEventHandler(evt) Controls the navigation in bank direction using either the keyboard or a pointer.
<private> | _elEventHandler(evt) Controls the navigation in el direction using either the keyboard or a pointer.
<private> | _getW0(mat, v2d, d) We know that v2d * w0 = mat * (1, x, y, d)^T where v2d = (1, b, c, h)^T with unknowns w0, h, x, y.
<private> | _projectToSphere(r, x, y) Project 2D point (x,y) to the virtual trackpad sphere, see Bell's virtual trackpad, and return z-component of the number.
<private> | _trackballHandler(evt) Controls the navigation using either virtual trackball.
<private> | _updateCentralProjection()
| animateAzimuth()
| compareDepth(a, b) Compares 3D elements according to their z-Index.
| create(elementType, parents, attributes) Creates a new 3D element of type elementType.
<private> | getMesh(func, interval_u, interval_v) Generate mesh for a surface / plane.
| intersectionLineCube(p, dir, r) Intersect a ray with the bounding cube of the 3D view.
| intersectionPlanePlane(plane1, plane2, d)
| isInCube(p, polyhedron) Test if coordinates are inside of the bounding cube.
<private> | isVerticalDrag() Check if vertical dragging is enabled and which action is needed.
| nextView() Changes view to the next view stored in the attribute `values`.
<private> | pointerDownHandler(evt) Event handler for pointer down event.
<private> | pointerUpHandler(evt) Event handler for pointer up event.
| previousView() Changes view to the previous view stored in the attribute `values`.
| project2DTo3DPlane(point2d, normal, foot) Project a 2D coordinate to the plane defined by point "foot" and the normal vector `normal`.
| project2DTo3DVertical(point2d, base_c3d) Project a 2D coordinate to a new 3D position by keeping the 3D x, y coordinates and changing only the z coordinate.
| project3DTo2D(x, y, z) Project 3D coordinates to 2D board coordinates The 3D coordinates are provides as three numbers x, y, z or one array of length 3.
| project3DToCube(c3d) Limit 3D coordinates to the bounding cube.
| projectScreenToSegment(pScr, end0, end1) Project a point on the screen to the nearest point, in screen distance, on a line segment in 3d space.
| select(str, onlyByIdOrName) Select a single or multiple elements at once.
| setCurrentView(n) Changes view to the determined view stored in the attribute `values`.
| setView(az, el, r) Sets camera view to the given values.
| stopAzimuth()
<private> | updateProjectionTrackball(Pref) Determine 4x4 rotation matrix with Bell's virtual trackball.
| worldToFocal(pWorld, homog) Map world coordinates to focal coordinates.

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

Class Detail
JXG.View3D(parents, parents, attributes)
3D view inside a JXGraph board.

Parameters:
{Array} parents
  Array consisting of lower left corner [x, y] of the view inside the board, [width, height] of the view and box size [[x1, x2], [y1,y2], [z1,z2]]. 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.
parents
attributes

Field Detail
angles
The Tait-Bryan angles specifying the view box orientation

az_slide
Slider to adapt azimuth angle

bank_slide
Slider to adjust bank angle

{array} bbox3D
Bounding box (cube) [[x1, x2], [y1,y2], [z1,z2]] of the 3D view

boxToCam
The 4×4 matrix that maps box coordinates to camera coordinates. These coordinate systems fit into the View3D coordinate atlas as follows.

- World coordinates. The coordinates used to specify object positions in a JSXGraph scene.
- Box coordinates. The world coordinates translated to put the center of the view box at the origin.
- Camera coordinates. The coordinate system where the `x`, `y` plane is the screen, the origin is the center of the screen, and the `z` axis points out of the screen, toward the viewer.
- Focal coordinates. The camera coordinates translated to put the origin at the focal point, which is set back from the screen by the focal distance.

The `boxToCam` transformation is exposed to help 3D elements manage their 2D representations in central projection mode. To map world coordinates to focal coordinates, use the JXG.View3D#worldToFocal method.

defaultAxes
Default axes of the 3D view, contains the axes of the view or null.

Default Value:
  null

<private> depthOrdered
An array containing all the elements in the view that are sorted due to their depth order.

el_slide
Slider to adapt elevation angle

<private> {Object} elementsByName
An associative array / dictionary to store the objects of the board by name. The name of the object is the key and value is a reference to the object.

{Number} focalDist
The distance from the camera to the screen. Computed automatically from the `fov` property.

<private> {array} llftCorner

<private> matrix3D

{The view box orientation matrix} matrix3DRot

<private> {Object} objects
An associative array containing all geometric objects belonging to the view. Key is the id of the object and value is a reference to the object.

{String} projectionType
Type of projection.

{Number} r
The distance from the camera to the origin. In other words, the radius of the sphere where the camera sits.

shift
The translation that moves the center of the view box to the origin.

<private> {array} size
Width and height [w, h] of the 3D view if elevation and azimuth are set to 0.

{String} trackballEnabled
Whether trackball navigation is currently enabled.
Method Detail
<private> _azEventHandler(evt)
Controls the navigation in az direction using either the keyboard or a pointer.

Parameters:
{event} evt
  either the keydown or the pointer event

Returns:
  view

<private> _bankEventHandler(evt)
Controls the navigation in bank direction using either the keyboard or a pointer.

Parameters:
{event} evt
  either the keydown or the pointer event

Returns:
  view

<private> _elEventHandler(evt)
Controls the navigation in el direction using either the keyboard or a pointer.

Parameters:
{event} evt
  either the keydown or the pointer event

Returns:
  view

<private> _getW0(mat, v2d, d)
We know that v2d * w0 = mat * (1, x, y, d)^T where v2d = (1, b, c, h)^T with unknowns w0, h, x, y. Setting R = mat^(-1) gives 1/ w0 * (1, x, y, d)^T = R * v2d. The first and the last row of this equation allows to determine 1/w0 and h.

Parameters:
{Array} mat
{Array} v2d
{Number} d

Returns:
  Array

<private> _projectToSphere(r, x, y)
Project 2D point (x,y) to the virtual trackpad sphere, see Bell's virtual trackpad, and return z-component of the number.

Parameters:
{Number} r
{Number} x
{Number} y

Returns:
  Number

<private> _trackballHandler(evt)
Controls the navigation using either virtual trackball.

Parameters:
{event} evt
  either the keydown or the pointer event

Returns:
  view

<private> {Array} _updateCentralProjection()

Returns:
  {Array}

animateAzimuth()

compareDepth(a, b)
Compares 3D elements according to their z-Index.

Parameters:
{JXG.GeometryElement3D} a
{JXG.GeometryElement3D} b

Returns:
  Number

{Object} create(elementType, parents, attributes)
Creates a new 3D element of type elementType.

Parameters:
{String} elementType
  Type of the element to be constructed given as a string e.g. 'point3d' or 'surface3d'.
{Array} parents
  Array of parent elements needed to construct the element e.g. coordinates for a 3D point or two 3D points to construct a line. This highly depends on the elementType that is constructed. See the corresponding JXG.create* methods for a list of possible parameters.
{Object} attributes Optional
  An object containing the attributes to be set. This also depends on the elementType. Common attributes are name, visible, strokeColor.

Returns:
  {Object} Reference to the created element. This is usually a GeometryElement3D, but can be an array containing two or more elements.

<private> getMesh(func, interval_u, interval_v)
Generate mesh for a surface / plane. Returns array [dataX, dataY] for a JSXGraph curve's updateDataArray function.

Parameters:
{Array|Function} func
{Array} interval_u
{Array} interval_v

Returns:
  Array

Examples:

     var el = view.create('curve', [[], []]);
     el.updateDataArray = function () {
         var steps_u = this.evalVisProp('stepsu'),
              steps_v = this.evalVisProp('stepsv'),
              r_u = Type.evaluate(this.range_u),
              r_v = Type.evaluate(this.range_v),
              func, ret;

         if (this.F !== null) {
             func = this.F;
         } else {
             func = [this.X, this.Y, this.Z];
         }
         ret = this.view.getMesh(func,
             r_u.concat([steps_u]),
             r_v.concat([steps_v]));

         this.dataX = ret[0];
         this.dataY = ret[1];
     };

intersectionLineCube(p, dir, r)
Intersect a ray with the bounding cube of the 3D view.

Parameters:
{Array} p
  3D coordinates [w,x,y,z]
{Array} dir
  3D direction vector of the line (array of length 3 or 4)
{Number} r
  direction of the ray (positive if r > 0, negative if r < 0).

Returns:
  Affine ratio of the intersection of the line with the cube.

{Array} intersectionPlanePlane(plane1, plane2, d)

Parameters:
{JXG.Plane3D} plane1
{JXG.Plane3D} plane2
{Number} d
  Right hand side of Hesse normal for plane2 (it can be adjusted)

Returns:
  {Array} of length 2 containing the coordinates of the defining points of of the intersection segment, or false if there is no intersection

isInCube(p, polyhedron)
Test if coordinates are inside of the bounding cube.

Parameters:
{array} p
  3D coordinates [[w],x,y,z] of a point.
polyhedron

Returns:
  Boolean

<private> isVerticalDrag()
Check if vertical dragging is enabled and which action is needed. Default is shiftKey.

Returns:
  Boolean

{Object} nextView()
Changes view to the next view stored in the attribute `values`.

Returns:
  {Object} Reference to the view.

See:
  View3D#values

<private> pointerDownHandler(evt)
Event handler for pointer down event. Triggers handling of all 3D navigation.

Parameters:
{event} evt

Returns:
  view

<private> pointerUpHandler(evt)
Event handler for pointer up event. Triggers handling of all 3D navigation.

Parameters:
{event} evt

Returns:
  view

{Object} previousView()
Changes view to the previous view stored in the attribute `values`.

Returns:
  {Object} Reference to the view.

See:
  View3D#values

{Array} project2DTo3DPlane(point2d, normal, foot)
Project a 2D coordinate to the plane defined by point "foot" and the normal vector `normal`.

Parameters:
{JXG.Point} point2d
{Array} normal
  Normal of plane
{Array} foot
  Foot point of plane

Returns:
  {Array} of length 4 containing the projected point in homogeneous coordinates.

{Array} project2DTo3DVertical(point2d, base_c3d)
Project a 2D coordinate to a new 3D position by keeping the 3D x, y coordinates and changing only the z coordinate. All horizontal moves of the 2D point are ignored.

Parameters:
{JXG.Point} point2d
{Array} base_c3d

Returns:
  {Array} of length 4 containing the projected point in homogeneous coordinates.

{Array} project3DTo2D(x, y, z)
Project 3D coordinates to 2D board coordinates The 3D coordinates are provides as three numbers x, y, z or one array of length 3.

Parameters:
{Number|Array} x
{Number[]} y
{Number[]} z

Returns:
  {Array} Array of length 3 containing the projection on to the board in homogeneous user coordinates.

project3DToCube(c3d)
Limit 3D coordinates to the bounding cube.

Parameters:
{Array} c3d
  3D coordinates [x,y,z]

Returns:
  Array [Array, Boolean] containing [coords, corrected]. coords contains the updated 3D coordinates, correct is true if the coords have been changed.

projectScreenToSegment(pScr, end0, end1)
Project a point on the screen to the nearest point, in screen distance, on a line segment in 3d space. The inputs must be in ordinary coordinates, but the output is in homogeneous coordinates.

Parameters:
{Array} pScr
  The screen coordinates of the point to project.
{Array} end0
  The world space coordinates of one end of the line segment.
{Array} end1
  The world space coordinates of the other end of the line segment.

Returns:
  Homogeneous coordinates of the projection

{JXG.GeometryElement3D|JXG.Composition} select(str, onlyByIdOrName)
Select a single or multiple elements at once.

Parameters:
{String|Object|function} str
  The name, id or a reference to a JSXGraph 3D element in the 3D view. An object will be used as a filter to return multiple elements at once filtered by the properties of the object.
{Boolean} onlyByIdOrName
  If true (default:false) elements are only filtered by their id, name or groupId. The advanced filters consisting of objects or functions are ignored.

Returns:
  {JXG.GeometryElement3D|JXG.Composition}

Examples:

    // select the element with name A
    view.select('A');

    // select all elements with strokecolor set to 'red' (but not '#ff0000')
    view.select({
      strokeColor: 'red'
    });

    // select all points on or below the x/y plane and make them black.
    view.select({
      elType: 'point3d',
      Z: function (v) {
        return v <= 0;
      }
    }).setAttribute({color: 'black'});

    // select all elements
    view.select(function (el) {
      return true;
    });

{Object} setCurrentView(n)
Changes view to the determined view stored in the attribute `values`.

Parameters:
{Number} n
  Index of view in attribute `values`.

Returns:
  {Object} Reference to the view.

See:
  View3D#values

{Object} setView(az, el, r)
Sets camera view to the given values.

Parameters:
{Number} az
  Value of azimuth.
{Number} el
  Value of elevation.
{Number} r Optional
  Value of radius.

Returns:
  {Object} Reference to the view.

stopAzimuth()

<private> {Array} updateProjectionTrackball(Pref)
Determine 4x4 rotation matrix with Bell's virtual trackball.

Parameters:
Pref

Returns:
  {Array} 4x4 rotation matrix

worldToFocal(pWorld, homog)
Map world coordinates to focal coordinates. These coordinate systems are explained in the JXG.View3D#boxToCam matrix documentation.

Parameters:
{Array} pWorld
  A world space point, in homogeneous coordinates.
{Boolean} homog Optional, Default: true
  Whether to return homogeneous coordinates. If false, projects down to ordinary coordinates.

Documentation generated by JsDoc Toolkit 2.4.0 on Fri Apr 04 2025 09:22:41 GMT+0200 (Mitteleuropäische Sommerzeit)