View3D - Documentation

Usage (signatures)

board.create('view3d', [lower, dim, cube]);

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.

Parameters

Name	Type	Description
`lower`	Array	Array of the form `[x, y]`, position of the lower ledt corner of view3D in the board.
`dim`	Array	Array of the form `[w, h]`. Size of view3D.
`cube`	Array	3D-size of view3D.

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}
    });

var bound = [-5, 5];
var view = board.create('view3d',
    [[-6, -3], [8, 8],
    [bound, bound, bound]],
    {
        projection: 'central',
        az: {
            slider: {
                visible: true,
                point1: {
                    pos: [5, -4]
                },
                point2: {
                    pos: [5, 4]
                },
                label: {anchorX: 'middle'}
            }
        },
        el: {
            slider: {
                visible: true,
                point1: {
                    pos: [6, -5]
                },
                point2: {
                    pos: [6, 3]
                },
                label: {anchorX: 'middle'}
            }
        },
        bank: {
            slider: {
                visible: true,
                point1: {
                    pos: [7, -6]
                },
                point2: {
                    pos: [7, 2]
                },
                label: {anchorX: 'middle'}
            }
        }
    });

Attributes

Own

axesPosition

Description: 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.
Type: String
Default Value: 'center'
Source: options3d.js, line 18

az

Description

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

Type

Object

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
     },
}

Example

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}
         }
     });

Source

options3d.js, line 1754

bank

Description

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

Type

Object

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
     },
}

Example

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

Source

options3d.js, line 1977

depthOrder

Description

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]

Type

Object

Default Value

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

Source

options3d.js, line 1646

el

Description

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

Type

Object

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
     },
}

Example

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

Source

options3d.js, line 1865

projection

Description

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

Type

String

Default Value

'parallel'

Examples

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'
     });

Source

options3d.js, line 1671

trackball

Description

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')

Type

Object

Default Value

{
  enabled: false,
  outside: true,
  button: -1,
  key: 'none'
}

Source

options3d.js, line 2106

values

Description: 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]]
Type: Array
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]]
Source: options3d.js, line 2145

verticalDrag

Description

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

Type

Object

Default Value

{enabled: true, key: 'shift'}

Source

options3d.js, line 1735

xAxis

Description

Attributes of the centered 3D x-axis. Suppress label with withLabel: false.

Type

Line3D

See

View3D#axesPosition

Source

options3d.js, line 31

xAxisBorder

Description

Attributes of the 3D x-axis at the border.

Type

Line3D

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'
      }
  }
}

See

View3D#axesPosition

Source

options3d.js, line 85

xPlaneFront

Description: Attributes of the 3D plane orthogonal to the x-axis at the "front" of the cube.
Type: Plane3D
Source: options3d.js, line 329

xPlaneFrontYAxis

Description: Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube.
Type: Plane3D
Source: options3d.js, line 472

xPlaneFrontZAxis

Description: Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube.
Type: Plane3D
Source: options3d.js, line 484

xPlaneRear

Description: Attributes of the 3D plane orthogonal to the x-axis at the "rear" of the cube.
Type: Plane3D
Source: options3d.js, line 221

xPlaneRearYAxis

Description: Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube.
Type: Plane3D
Source: options3d.js, line 448

xPlaneRearZAxis

Description: Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube.
Type: Plane3D
Source: options3d.js, line 460

yAxis

Description

Attributes of the centered 3D y-axis. Suppress label with withLabel: false.

Type

Line3D

See

View3D#axesPosition

Source

options3d.js, line 49

yAxisBorder

Description

Attributes of the 3D y-axis at the border.

Type

Line3D

Default Value

{
  name: 'x',
  withLabel: false,
  label: {
      position: '50% right',
      offset: [0, -30],
      fontsize: 15
  },
  strokeWidth: 1,
  lastArrow: false,
  ticks3d: {
      label: {
          anchorX: 'middle',
      }
  }
}

See

View3D#axesPosition

Source

options3d.js, line 131

yPlaneFront

Description: Attributes of the 3D plane orthogonal to the y-axis at the "front" of the cube.
Type: Plane3D
Source: options3d.js, line 368

yPlaneFrontXAxis

Description: Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube.
Type: Plane3D
Source: options3d.js, line 520

yPlaneFrontZAxis

Description: Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube.
Type: Plane3D
Source: options3d.js, line 532

yPlaneRear

Description: Attributes of the 3D plane orthogonal to the y-axis at the "rear" of the cube.
Type: Plane3D
Source: options3d.js, line 257

yPlaneRearXAxis

Description: Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube.
Type: Plane3D
Source: options3d.js, line 496

yPlaneRearZAxis

Description: Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube.
Type: Plane3D
Source: options3d.js, line 508

zAxis

Description

Attributes of the centered 3D z-axis. Suppress label with withLabel: false.

Type

Line3D

See

View3D#axesPosition

Source

options3d.js, line 67

zAxisBorder

Description

Attributes of the 3D z-axis at the border.

Type

Line3D

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'
      }
  }
}

See

View3D#axesPosition

Source

options3d.js, line 174

zPlaneFront

Description: Attributes of the 3D plane orthogonal to the z-axis at the "front" of the cube.
Type: Plane3D
Source: options3d.js, line 407

zPlaneFrontXAxis

Description: Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube.
Type: Plane3D
Source: options3d.js, line 569

zPlaneFrontYAxis

Description: Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube.
Type: Plane3D
Source: options3d.js, line 581

zPlaneRear

Description: Attributes of the 3D plane orthogonal to the z-axis at the "rear" of the cube.
Type: Plane3D
Source: options3d.js, line 293

zPlaneRearXAxis

Description: Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube.
Type: Plane3D
Source: options3d.js, line 545

zPlaneRearYAxis

Description: Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube.
Type: Plane3D
Source: options3d.js, line 557