Transformation3D

Element

Define projective 3D transformations like translation, rotation, reflection. A transformation consists of a \(4\times 4\) matrix, i.e. it is a projective transformation.

Internally, a transformation is applied to an element by multiplying the \(4\times 4\) matrix from the left to the homogeneous coordinates of the element. JSXGraph represents homogeneous coordinates in the order \((w, x, y, z)\). If the coordinate is a finite point, \(w=1\). The matrix has the form \[ \begin{pmatrix} a & b & c & d\\ e & f & g & h\\ i & j & k & l\\ m & n & o & p \end{pmatrix} \cdot \begin{pmatrix} w\\ x\\ y\\ z \end{pmatrix} \] where in general \(a=1\). If \(b = c = d = 0\), the transformation is called affine. In this case, finite points will stay finite. This is not the case for general projective coordinates.

Possible transformation types are

'translate'
'scale'
'rotate'
'rotateX'
'rotateY'
'rotateZ'
'affine'
'affinematrix'
'generic'
'matrix'

Valid parameters for these types are:

"translate": [x, y, z] Translation vector (three numbers or functions). The transformation matrix for x = a, y = b, and z = c has the form: \[ \begin{pmatrix} 1 & 0 & 0 & 0\\ a & 1 & 0 & 0\\ b & 0 & 1 & 0\\ c & 0 & 0 & 1 \end{pmatrix} \cdot \begin{pmatrix} w\\ x\\ y\\ z \end{pmatrix} \]
"scale": [scale_x, scale_y, scale_z] Scale vector (three numbers or functions). The transformation matrix for scale_x = a, scale_y = b, scale_z = c has the form: \[ \begin{pmatrix} 1 & 0 & 0 & 0\\ 0 & a & 0 & 0\\ 0 & 0 & b & 0\\ 0 & 0 & 0 & c \end{pmatrix} \cdot \begin{pmatrix} w\\ x\\ y\\ z \end{pmatrix} \]
"rotate": [a, n, [p=[0,0,0]]] angle (in radians), normal, [point]. Rotate with angle a around the normal vector n through the point p.
"rotateX": [a, [p=[0,0,0]]] angle (in radians), [point]. Rotate with angle a around the normal vector (1, 0, 0) through the point p.
"rotateY": [a, [p=[0,0,0]]] angle (in radians), [point]. Rotate with angle a around the normal vector (0, 1, 0) through the point p.
"rotateZ": [a, [p=[0,0,0]]] angle (in radians), [point]. Rotate with angle a around the normal vector (0, 0, 1) through the point p.
"affine": [a,b,...,i] generic affine transformation (9 parameters, numbers or functions). The full transformation matrix has the form \[ \begin{pmatrix} 1 & 0 & 0 & 0\\ 0 & a & b & c\\ 0 & d & e & f\\ 0 & g & h & i \end{pmatrix} \cdot \begin{pmatrix} w\\ x\\ y\\ z \end{pmatrix} \]
"affinematrix": [M] generic affine 3x3 transformation matrix (containing numbers or functions). The full transformation matrix has the form \[ \begin{pmatrix} 1 & 0 & 0 & 0\\ 0 & & & \\ 0 & & M & \\ 0 & & & \end{pmatrix} \cdot \begin{pmatrix} w\\ x\\ y\\ z \end{pmatrix} \]
"generic": [a,b,...,p] generic transformation (16 parameters, numbers or functions). The full transformation matrix has the form \[ \begin{pmatrix} a & b & c & d\\ e & f & g & h\\ i & j & k & l\\ m & n & o & p \end{pmatrix} \cdot \begin{pmatrix} w\\ x\\ y\\ z \end{pmatrix} \]
"matrix": [M] generic 4x4 transformation matrix (containing numbers or functions).

Usage (signatures)

board.create('transformation3d', [parameters]);

The parameters depend on the transformation type, supplied as attribute type.

Parameters

Name	Type	Description
`parameters`	number \| function \| JXG.GeometryElement3D

Example

var bound = [-5, 5];
var view = board.create('view3d',
    [
        [-5, -5], [8, 8],
        [bound, bound, bound]
    ], {
        projection: "central",
        depthOrder: { enabled: true },
        axesPosition: 'border' // 'center', 'none'
    }
);

var slider = board.create('slider', [[-4, 6], [0, 6], [0, 0, 5]]);

var p1 = view.create('point3d', [1, 2, 2], { name: 'drag me', size: 5 });

// Translate from p1 by fixed amount
var t1 = view.create('transform3d', [2, 3, 2], { type: 'translate' });
// Translate from p1 by dynamic amount
var t2 = view.create('transform3d', [() => slider.Value() + 3, 0, 0], { type: 'translate' });

view.create('point3d', [p1, t1], { name: 'translate fixed', size: 5 });
view.create('point3d', [p1, t2], { name: 'translate by func', size: 5 });

Methods