Class: TrackballRotator

TrackballRotator(canvas, callback, viewDistance, viewpointDirection, viewUp)

An object of type TrackballRotator can be used to implement a trackball-like mouse rotation of a WebGL scene about the origin.

Only the first parameter to the constructor is required. When an object is created, mouse event handlers are set up on the canvas to respond to rotation.
It will also work with a touchscreen.

Constructor

new TrackballRotator(canvas, callback, viewDistance, viewpointDirection, viewUp)

Constructor of TrackballRotator.

Parameters:
Name Type Description
canvas HTMLCanvasElement the HTML canvas element used for WebGL drawing. The user will rotate the scene by dragging the mouse on this canvas. This parameter is required.
callback function if present must be a function, which is called whenever the rotation changes. It is typically the function that draws the scene.
viewDistance Number if present must be a positive number. Gives the distance of the viewer from the origin. If not present, the length is zero, which can be OK for orthographic projection, but never for perspective projection.
viewpointDirection Array.<Number> if present must be an array of three numbers, not all zero. The view is from the direction of this vector towards the origin (0,0,0). If not present, the value [0,0,10] is used. This is just the initial value for viewpointDirection; it will be modified by rotation.
viewUp Array.<Number> if present must be an array of three numbers. Gives a vector that will be seen as pointing upwards in the view. If not present, the value is [0,1,0]. Cannot be a multiple of viewpointDirection. This is just the initial value for viewUp; it will be modified by rotation.
Source:

Methods

getRotationCenter() → {Array.<Number>}

Returns the current rotation center.
Source:
Returns:
center or [0,0,0], if undefined.
Type
Array.<Number>

getViewDistance() → {Number}

Returns the viewDistance.
Source:
Returns:
view distance.
Type
Number

getViewMatrix() → {Array.<Number>}

Returns the view transformation matrix as a regular JavaScript array of 16 elements, in column-major order,
suitable for use with gl.uniformMatrix4fv or, for further transformation, with the glMatrix library mat4 class.
Source:
Returns:
view matrix.
Type
Array.<Number>

setRotationCenter(rotationCenter)

Sets the center of rotation.

The parameter must be an array of (at least) three numbers. The view is rotated about this point.

Usually, you want the rotation center to be the point that appears at the middle of the canvas, but that is not a requirement.

The initial value is effectively equal to [0,0,0].
Parameters:
Name Type Description
rotationCenter Array.<Number> center of rotation.
Source:

setView(viewDistance, viewpointDirection, viewUp)

Set up the view, where the parameters are optional, and are used in the same way,
as the corresponding parameters in the constructor.
Parameters:
Name Type Description
viewDistance Number distance of the viewer from the origin.
viewpointDirection Array.<Number> direction of view is from this point towards the origin (0,0,0).
viewUp Array.<Number> view up vector.
Source:

setViewDistance(viewDistance)

Sets the distance of the viewer from the origin without changing the direction of view.
The parameter must be a positive number.
Parameters:
Name Type Description
viewDistance Number view distance.
Source:

setViewMatrix(matrix)

Sets the view matrix.
Parameters:
Name Type Description
matrix Float32Array view matrix.
Source: