Interface OBJ_CameraControl

Camera control definition object that extends and OBJ_FigurePrimitive

A camera control is a transparent rectangle that uses touch and drag gestures to rotate the position of the camera in a 3D scene around a vertical axis.

The vertical axis will always remain vertical. Left/right movements will rotate the scene around the vertical axis (in the azimuth of the vertical axis), while up/down movements will change the elevation relative to the vertical axis.

The transparent rectangle will be positioned relative to the 2D HTML canvas the figure is drawn in on the screen. The left, bottom, width and height properties are numbers from 0 to 1 which represent percentage of the screen width and height.

Thus for the rectangle to cover the entire screen, values of left: 0, bottom: 0, width: 1 and height: 1 would be used (these are the default values as well).

By default, the figure's Scene camera position is modified. If an element's custom scene is to be controlled, use the scene property to link to it.

How fast the camera is rotated in the aziumuth and elevation is controlled by the sensitivity, xSensitivity and ySensitivity properties. A higher sensitivity value will result in more rotation for the same user movement. If only azimuthal or elevation rotation is desired set ySensitivity or xSensitivity to 0 respectively.

left number — screen left position to place the control rectangle. 0 is the left edge, while 1 is the right edge (0).
bottom number — screen bottom position to place the control rectangle. 0 is the bottom edge, while 1 is the top edge (0).
width number — width of control rectangle. 1 is the full width of the drawing canvas (1).
height number — height of control rectangle. 1 is the full height of the drawing canvas (1).
axis TypeParsablePoint — Axis to keep vertical as camera is rotated. The axis vector and scene.camera.up vector should be in the same plane ([0, 1, 0])
controlScene string | Scene — Use this to control a scene that is not the default Figure scene.
sensitivity number — sensitivity of camera position relative to user movement where larger numbers result in more rotation for the same movement (5)
xSensitivity number — sensitivity to a horizontal user movement. Setting this to 0 will mean the scene doesn't not rotate aziumthally (1)
ySensitivity number — sensitivity to a vertical user movement. Setting this to 0 will mean the elevation does not change (1)
back boolean — if true then all 2D and 3D objects that can be touched will be touched before the camera control, regardless of where it is on the drawing stack. This should be used everytime 3D objects need priority over the camera control (true)

Example

// Add a camera control that will cover the whole screen

figure.add([
  {
    make: 'cylinder',
    radius: 0.01,
    color: [1, 0, 0, 1],
    line: [[-1, 0, 0], [1, 0, 0]],
  },
  {
    make: 'cylinder',
    radius: 0.01,
    color: [0, 1, 0, 1],
    line: [[0, -1, 0], [0, 1, 0]],
  },
  {
    make: 'cylinder',
    radius: 0.01,
    color: [0, 0, 1, 1],
    line: [[0, 0, -1], [0, 0, 1]],
  },
  {
    make: 'grid',
    bounds: [-0.8, -0.8, 1.6, 1.6],
    xStep: 0.05,
    yStep: 0.05,
    line: { width: 0.002 },
    color: [0.7, 0.7, 0.7, 1],
    transform: ['r', Math.PI / 2, 1, 0, 0],
  },
]);

// Add camera control
figure.add({
  make: 'cameraControl',
});

Example

// Add a thin bar at the bottom of the figure that rotates the scene in the
// azimuth only

figure.add([
  {
    make: 'cylinder',
    radius: 0.01,
    color: [1, 0, 0, 1],
    line: [[-1, 0, 0], [1, 0, 0]],
  },
  {
    make: 'cylinder',
    radius: 0.01,
    color: [0, 1, 0, 1],
    line: [[0, -1, 0], [0, 1, 0]],
  },
  {
    make: 'cylinder',
    radius: 0.01,
    color: [0, 0, 1, 1],
    line: [[0, 0, -1], [0, 0, 1]],
  },
  {
    make: 'grid',
    bounds: [-0.8, -0.8, 1.6, 1.6],
    xStep: 0.05,
    yStep: 0.05,
    line: { width: 0.002 },
    color: [0.7, 0.7, 0.7, 1],
    transform: ['r', Math.PI / 2, 1, 0, 0],
  },
]);

// Add a moveable cube
figure.add({
  make: 'cube',
  side: 0.3,
  color: [1, 0, 0, 1],
  center: [0.3, 0, 0],
  move: {
    plane: [[0, 0, 0], [0, 1, 0]],
  },
});

// Add camera control bar at the bottom of the screen that only allows
// rotation in the azimuth. As the camera control bar does not overlap the
// cube, then both the cube can moved, and the scene rotated with the bar.
figure.add({
  make: 'cameraControl',
  color: [0, 0, 0, 0.2],
  ySensitivity: 0,
  height: 0.1,
});

@interface

Interface OBJ_CameraControl

Example

Example

Settings