CameraPathAnimation

Animates the Scene's's Camera along a CameraPath.

Usage

In the example below, we'll load a model using a GLTFLoaderPlugin, then animate a Camera through the frames in a CameraPath.

• [Run this example]

import {Viewer, GLTFLoaderPlugin, CameraPath, CameraPathAnimation} from "xeokit-sdk.es.js";

// Create a Viewer and arrange camera

const viewer = new Viewer({
    canvasId: "myCanvas",
    transparent: true
});

viewer.camera.eye = [124.86756896972656, -93.50288391113281, 173.2632598876953];
viewer.camera.look = [102.14186096191406, -90.24193572998047, 173.4224395751953];
viewer.camera.up = [0.23516440391540527, 0.9719591736793518, -0.0016466031083837152];

// Load model

const gltfLoader = new GLTFLoaderPlugin(viewer);

const model = gltfLoader.load({
    id: "myModel",
    src: "./models/gltf/modern_office/scene.gltf",
    edges: true,
    edgeThreshold: 20,
    xrayed: false
});

// Create a CameraPath

var cameraPath = new CameraPath(viewer.scene, {
    frames: [
        {
            t:    0,
            eye:  [124.86, -93.50, 173.26],
            look: [102.14, -90.24, 173.42],
            up:   [0.23, 0.97, -0.00]
        },
        {
            t:    1,
            eye:  [79.75, -85.98, 226.57],
            look: [99.24, -84.11, 238.56],
            up:   [-0.14, 0.98, -0.09]
        },
        // Rest of the frames omitted for brevity
    ]
});

// Create a CameraPathAnimation to play our CameraPath

var cameraPathAnimation = new CameraPathAnimation(viewer.scene, {
    cameraPath: cameraPath,
    playingRate: 0.2 // Playing 0.2 time units per second
});

// Once model loaded, start playing after a couple of seconds delay

model.on("loaded", function () {
    setTimeout(function () {
        cameraPathAnimation.play(0); // Play from the beginning of the CameraPath
    }, 2000);
});