# 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

# Element Plane3D

JXG.GeometryElement
↳ JXG.GeometryElement3D
↳ Plane3D

A 3D plane is defined either by a point and two linearly independent vectors, or by three points.
Defined in: linspace3d.js.
Extends JXG.GeometryElement3D.

Element Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| Plane3D A 3D plane is defined either by a point and two linearly independent vectors, or by three points.

Attributes Summary
Field Attributes | Field Name and Description
--- | ---
| mesh3d Optional 3D mesh of a finite plane.
| point Attributes of the defining point in case the plane is defined by [point, direction1, direction2, [range1, [range2]]].
| point1 Attributes of the first point in case the plane is defined by [point, point, point].
| point2 Attributes of the second point in case the plane is defined by [point, point, point].
| point3 Attributes of the third point in case the plane is defined by [point, point, point].
| threePoints If the second parameter and the third parameter are given as arrays or functions and threePoints:true then the second and third parameter are interpreted as point coordinates and not as directions, i.e.

Field Summary
Field Attributes | Field Name and Description
--- | ---
<private> | d Right hand side of the Hesse normal form.
| direction1 Two linearly independent vectors - together with a point - define the plane.
| direction2 Two linearly independent vectors - together with a point - define the plane.
<private> | normal Normal vector of the plane.
<static> | Plane3D.point 3D point which - together with two direction vectors - defines the plane.
| range_u Range [r1, r2] of direction1.
| range_v Range [r1, r2] of direction2.
<private> | vec1 Spanning vector 1 of the 3D plane.
<private> | vec2 Spanning vector 2 of the 3D plane.

Method Summary
Method Attributes | Method Name and Description
--- | ---
| F(u, v) Get coordinate array [x, y, z] of a point on the plane for parameters (u, v).
<private> | updateCoords() Update the arrays JXG.Plane3D#vec1 and JXG.Plane3D#vec1 containing the homogeneous coords of the spanning vectors.
<private> | updateNormal() Update the Hesse normal form of the plane, i.e.
| X(u, v) Get x-coordinate of a point on the plane for parameters (u, v).
| Y(u, v) Get y-coordinate of a point on the plane for parameters (u, v).
| Z(u, v) Get z-coordinate of a point on the plane for parameters (u, v).

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
Plane3D
A 3D plane is defined either by a point and two linearly independent vectors, or by three points. In the first case, the parameters are a 3D point (or a coordinate array) and two vectors (arrays). In the second case, the parameters consist of three 3D points (given as points or coordinate arrays). In order to distinguish the two cases, in the latter case (three points), the additional attribute Plane3D#threePoints has to be supplied if both, the second point and the third point, are given as arrays or functions. Otherwise, it would not be clear if the input arrays have to be interpreted as points or directions.

All coordinate arrays can be supplied as functions returning a coordinate array.

This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "plane3d".
Possible parent array combinations are:
{JXG.Point3D|array|function} point
{JXG.Line3D|array|function} direction1
{JXG.Line3D|array|function} direction2
{array|function} [range1]
{array|function} [range2]
  The plane is defined by point, direction1, direction2, range1, and range2.
  - point: Point3D or array of length 3
  - direction1: line3d element or array of length 3 or function returning an array of numbers or function returning an array
  - direction2: line3d element or array of length 3 or function returning an array of numbers or function returning an array
  - range1: array of length 2, elements can also be functions. Use [-Infinity, Infinity] for infinite lines.
  - range2: array of length 2, elements can also be functions. Use [-Infinity, Infinity] for infinite lines.
{JXG.Point3D|array|function} point1
{JXG.Point3D|array|function} point2
{JXG.Point3D|array|function} point3
  The plane is defined by three points.

Throws:
{Exception}
  If the element cannot be constructed with the given parent objects an exception is thrown.

Examples:

        var view = board.create(
            'view3d',
            [[-6, -3], [8, 8],
            [[-3, 3], [-3, 3], [-3, 3]]],
            {
                depthOrder: {
                    enabled: true
                },
                projection: 'central',
                xPlaneRear: {fillOpacity: 0.2},
                yPlaneRear: {fillOpacity: 0.2},
                zPlaneRear: {fillOpacity: 0.2}
            }
        );

        var A = view.create('point3d', [-2, 0, 1], {size: 2});

        // Infinite Plane by point and two directions
        var plane = view.create('plane3d', [A, [1, 0, 0], [0, 1, 0], [-Infinity, Infinity], [-Infinity, Infinity]]);

        var view = board.create(
            'view3d',
            [[-6, -3], [8, 8],
            [[-3, 3], [-3, 3], [-3, 3]]],
            {
                depthOrder: {
                    enabled: true
                },
                projection: 'central',
                xPlaneRear: {fillOpacity: 0.2},
                yPlaneRear: {fillOpacity: 0.2},
                zPlaneRear: {fillOpacity: 0.2}
            }
        );

        var A = view.create('point3d', [-2, 0, 1], {size: 2});

        // Finite Plane by point and two directions
        var plane1 = view.create('plane3d', [A, [1, 0, 0], [0, 1, 0], [-2, 2], [-2, 2]]);
        var plane2 = view.create('plane3d', [[0, 0, -1], [1, 0, 0], [0, 1, 0], [-2, 2], [-2, 2]], {
            mesh3d: { visible: true },
            point: {visible: true, name: "B", fixed: false}
        });

                var view = board.create(
                    'view3d',
                    [[-6, -3], [8, 8],
                    [[-3, 3], [-3, 3], [-3, 3]]],
                    {
                        depthOrder: {
                            enabled: true
                        },
                        projection: 'central',
                        xPlaneRear: { visible: false, fillOpacity: 0.2 },
                        yPlaneRear: { visible: false, fillOpacity: 0.2 },
                        zPlaneRear: { fillOpacity: 0.2 }
                    }
                );

                var A = view.create('point3d', [-2, 0, 1], { size: 2 });

                var line1 = view.create('line3d', [A, [0, 0, 1], [-Infinity, Infinity]], { strokeColor: 'blue' });
                var line2 = view.create('line3d', [A, [1, 1, 0], [-Infinity, Infinity]], { strokeColor: 'blue' });

                // Plane by point and two lines
                var plane2 = view.create('plane3d', [A, line1, line2], {
                    fillColor: 'blue'
                });

        var view = board.create(
            'view3d',
            [[-6, -3], [8, 8],
            [[-3, 3], [-3, 3], [-3, 3]]],
            {
                depthOrder: {
                    enabled: true
                },
                projection: 'central',
                xPlaneRear: {fillOpacity: 0.2},
                yPlaneRear: {fillOpacity: 0.2},
                zPlaneRear: {fillOpacity: 0.2}
            }
        );

        var A = view.create('point3d', [0, 0, 1], {size: 2});
        var B = view.create('point3d', [2, 2, 1], {size: 2});
        var C = view.create('point3d', [-2, 0, 1], {size: 2});

        // Plane by three points
        var plane = view.create('plane3d', [A, B, C], {
            fillColor: 'blue'
        });

        var view = board.create(
            'view3d',
            [[-6, -3], [8, 8],
            [[-3, 3], [-3, 3], [-3, 3]]],
            {
                depthOrder: {
                    enabled: true
                },
                projection: 'central',
                xPlaneRear: {fillOpacity: 0.2},
                yPlaneRear: {fillOpacity: 0.2},
                zPlaneRear: {fillOpacity: 0.2}
            }
        );

        var A = view.create('point3d', [-2, 0, 1], {size: 2});

        // Infinite Plane by two directions,
        // range1 = range2 = [-Infinity, Infinity]
        var plane1 = view.create('plane3d', [A, [1, 0, 0], [0, 1, 0]], {
            fillColor: 'blue',
        });

        // Infinite Plane by three points,
        var plane2 = view.create('plane3d', [A, [1, 0, 0], [0, 1, 0]], {
            threePoints: true,
            fillColor: 'red',
            point2: {visible: true},
            point3: {visible: true}
        });

Attribute Detail
{Mesh3D} mesh3d
Optional 3D mesh of a finite plane. It is not available if the plane is infinite (at initialization time) in any direction.
Defined in: options3d.js.

Default Value:
  see Mesh3D

{Point3D} point
Attributes of the defining point in case the plane is defined by [point, direction1, direction2, [range1, [range2]]].
Defined in: options3d.js.

Default Value:

      visible: false, name: "", fixed: true

{Point3D} point1
Attributes of the first point in case the plane is defined by [point, point, point].
Defined in: options3d.js.

Default Value:

      visible: false, name: ""

{Point3D} point2
Attributes of the second point in case the plane is defined by [point, point, point].
Defined in: options3d.js.

Default Value:

      visible: false, name: ""

{Point3D} point3
Attributes of the third point in case the plane is defined by [point, point, point].
Defined in: options3d.js.

Default Value:

      visible: false, name: ""

{Boolean} threePoints
If the second parameter and the third parameter are given as arrays or functions and threePoints:true then the second and third parameter are interpreted as point coordinates and not as directions, i.e. the plane is defined by three points.
Defined in: options3d.js.

Default Value:
  false

Field Detail
<private> {Array} d
Right hand side of the Hesse normal form.

See:
  Plane3D.updateNormal

{Array|Function} direction1
Two linearly independent vectors - together with a point - define the plane. Each of these direction vectors is an array of numbers or functions (either of length 3 or 4) or function returning array of length 3 or 4. Homogeneous coordinates of directions have the form [0, x, y, z].

See:
  Plane3D.point
  Plane3D#direction2

{Array|Function} direction2
Two linearly independent vectors - together with a point - define the plane. Each of these direction vectors is an array of numbers or functions (either of length 3 or 4) or function returning array of length 3 or 4. Homogeneous coordinates of directions have the form [0, x, y, z].

See:
  Plane3D.point
  Plane3D#direction1

<private> {Array} normal
Normal vector of the plane. Left hand side of the Hesse normal form.

See:
  Plane3D.updateNormal

<static> {JXG.Point3D} Plane3D.point
3D point which - together with two direction vectors - defines the plane.

See:
  Plane3D#direction1
  Plane3D#direction2

range_u
Range [r1, r2] of direction1. The 3D line goes from (point + r1 * direction1) to (point + r2 * direction1)

Default Value:
  [-Infinity, Infinity]

range_v
Range [r1, r2] of direction2. The 3D line goes from (point + r1 * direction2) to (point + r2 * direction2)

Default Value:
  [-Infinity, Infinity]

<private> {Array} vec1
Spanning vector 1 of the 3D plane. Contains the evaluated coordinates from direction1 and range1. and is of length 4, the first entry being 0, i.e. homogenous coordinates.

See:
  Plane3D#updateCoords

<private> {Array} vec2
Spanning vector 2 of the 3D plane. Contains the evaluated coordinates from Plane3D#direction2 and Plane3D#range2 and is of length 4, the first entry being 0, i.e. homogenous coordinates.

See:
  Plane3D#updateCoords

Method Detail
F(u, v)
Get coordinate array [x, y, z] of a point on the plane for parameters (u, v).

Parameters:
{Number} u
{Number} v

Returns:
  Array of length 3.

<private> {Object} updateCoords()
Update the arrays JXG.Plane3D#vec1 and JXG.Plane3D#vec1 containing the homogeneous coords of the spanning vectors.

Returns:
  {Object} Reference to Plane3D object

<private> {Object} updateNormal()
Update the Hesse normal form of the plane, i.e. update normal vector and right hand side. Updates also vec1 and vec2.

Returns:
  {Object} Reference to the Plane3D object

Examples:

       plane.updateNormal();

X(u, v)
Get x-coordinate of a point on the plane for parameters (u, v).

Parameters:
{Number} u
{Number} v

Returns:
  Number

Y(u, v)
Get y-coordinate of a point on the plane for parameters (u, v).

Parameters:
{Number} u
{Number} v

Returns:
  Number

Z(u, v)
Get z-coordinate of a point on the plane for parameters (u, v).

Parameters:
{Number} u
{Number} v

Returns:
  Number

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.GeometryElement3D:
  element2D, is3D, view
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.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

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