Skip to content

Camera

Jump to bottom
xeolabs edited this page Feb 3, 2019 · 11 revisions

See also:

Each xeokit Scene has a Camera that can be dynamically animated and switched between different projection types.

xeokit also provides a CameraControl to interact with the Camera using mouse and touch input, which supports various navigation modes, including first-person navigation.

Using a CameraFlightAnimation we can fly or jump the camera to fit target models and objects in view.

Using a CameraPathAnimation we can interpolate the Camera along paths, to create architectural walk-throughs.

Contents

Positioning the Camera

Find the Camera on the Viewer:

import {Viewer} from "./../src/viewer/Viewer.js";
import {GLTFLoaderPlugin} from
    "./../src/viewer/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js";

// Create a Viewer
const viewer = new Viewer({
    canvasId: "myCanvas"
});

const camera = viewer.camera;

The Camera's position is indicated by three properties:

  • eye - position of the user's eye
  • look - the point the user is looking at
  • up - a unit-length vector indicating the direction of the user's "up"

Getting the Camera's position:

const eye = camera.eye;
const look = camera.look;
const up = camera.up;

Setting the Camera's position:

camera.eye = [0.0, 0.0, -100.0];
camera.look = [0.0, 0.0, 0.0];
camera.up = [0.0, 1.0, 0.0];

View Transform Matrix

Setting the Camera's position updates the Camera's viewing transform matrix, which xeokit uses to transform coordinates from World to View space. Get the view matrix like so:

const viewMatrix = camera.viewMatrix;

Subscribe to updates to the viewing transform matrix like so:

camera.on("viewMatrid", function(viewMatrix) {
    //....
});

Panning the Camera

Panning the Camera causes it to move along the local axis aligned with eye, look and up.

camera.pan([-1.0, 0.0, 0.0]); // Pan left
camera.pan([-1.0, 0.0, 0.0]); // Pan right

camera.pan([0.0,  1.0, 0.0]); // Pan up
camera.pan([0.0, -1.0, 0.0]); // Pan down

camera.pan([0.0,  0.0,  1.0]); // Pan backwards
camera.pan([0.0,  0.0, -1.0]); // Pan forwards

Orbiting the Camera

A "yaw" orbit rotation rotates the Camera's eye around its up axis, while look remains unchanged:

camera.orbitYaw(20.0);

A "pitch" orbit rotation rotates the Camera's eye and up about the local horizontal axis orthogonal to up and (eye->look), while look remains unchanged:

camera.orbitPitch(10.0);

First-Person Rotation

First-person rotation rotates the Camera's look and up about eye, while eye remains unchanged:

camera.yaw(5.0);
camera.pitch(-10.0);

Perspective Projection

TODO

Orthographic Projection

TODO

Custom Projection

TODO

Clone this wiki locally