Reference Source
public class | source

CameraPathAnimation

Extends:

Component → 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.

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);
});

Constructor Summary

Public Constructor
public

constructor(owner: Component, cfg: *)

Member Summary

Public Members
public set

Sets the CameraPath animated by this CameraPathAnimation.

public get

Gets the CameraPath animated by this CameraPathAnimation.

public set

rate(value: Number)

Sets the rate at which the CameraPathAnimation animates the Camera along the CameraPath.

public get

rate: * | number: *

Gets the rate at which the CameraPathAnimation animates the Camera along the CameraPath.

public

state: *

Method Summary

Public Methods
public
public

flyToFrame(frameIdx: Number, ok: Function)

Flies the Camera directly to the given frame on the CameraPathAnimation's CameraPath.

public

play()

Begins animating the Camera along CameraPathAnimation's CameraPath from the beginning.

public

playToFrame(frameIdx: Number)

Animates the Camera along CameraPathAnimation's CameraPath to the given frame.

public

Begins animating the Camera along CameraPathAnimation's CameraPath from the given time.

public

scrubToFrame(frameIdx: Number)

Scrubs the Camera to the given frame on the CameraPathAnimation's CameraPath.

public

Scrubs the Camera to the given time on the CameraPathAnimation's CameraPath.

public

stop()

Stops playing this CameraPathAnimation.

Inherited Summary

From class Component
public get

The Component that owns the lifecycle of this Component, if any.

public

True as soon as this Component has been destroyed

public

ID of this Component, unique within the Scene.

public

meta: *

Arbitrary, user-defined metadata on this component.

public

The parent Scene that contains this Component.

public

The viewer that contains this Scene.

public

clear()

Destroys all Components that are owned by this.

public

Destroys this component.

public

error(message: String)

Logs an error for this component to the JavaScript console.

public

fire(event: String, value: Object, forget: Boolean)

Fires an event on this component.

public

Returns true if there are any subscribers to the given event on this component.

public

isType(type: *): *: Boolean

Tests if this component is of the given type, or is a subclass of the given type.

public

log(message: String)

Logs a console debugging message for this component.

public

off(subId: String)

Cancels an event subscription that was previously made with Component#on or Component#once.

public

on(event: String, callback: Function, scope: Object): String

Subscribes to an event on this component.

public

once(event: String, callback: Function, scope: Object)

Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is subIdd.

public

scheduleTask(task: *)

Schedule a task to perform on the next browser interval

public

warn(message: String)

Logs a warning for this component to the JavaScript console.

Public Constructors

public constructor(owner: Component, cfg: *) source

Override:

Component#constructor

Params:

NameTypeAttributeDescription
owner Component
  • optional

Owner component. When destroyed, the owner will destroy this CameraPathAnimation as well.

cfg *
  • optional

Configuration

cfg.id String
  • optional

Optional ID, unique among all components in the parent Scene, generated automatically when omitted.

cfg.eyeCurve CameraPath
  • optional

A CameraPath that defines the path of a Camera.

Public Members

public set cameraPath(value: CameraPath) source

Sets the CameraPath animated by this CameraPathAnimation.

public get cameraPath: CameraPath: * source

Gets the CameraPath animated by this CameraPathAnimation.

Return:

CameraPath

The CameraPath.

public set rate(value: Number) source

Sets the rate at which the CameraPathAnimation animates the Camera along the CameraPath.

public get rate: * | number: * source

Gets the rate at which the CameraPathAnimation animates the Camera along the CameraPath.

Return:

* | number

The current playing rate.

public state: * source

Public Methods

public destroy() source

Destroys this component.

Override:

Component#destroy

public flyToFrame(frameIdx: Number, ok: Function) source

Flies the Camera directly to the given frame on the CameraPathAnimation's CameraPath.

Params:

NameTypeAttributeDescription
frameIdx Number

Index of the frame to play to.

ok Function
  • optional

Callback to fire when playing is complete.

public play() source

Begins animating the Camera along CameraPathAnimation's CameraPath from the beginning.

public playToFrame(frameIdx: Number) source

Animates the Camera along CameraPathAnimation's CameraPath to the given frame.

Params:

NameTypeAttributeDescription
frameIdx Number

Index of the frame to play to.

public playToT(t: Number) source

Begins animating the Camera along CameraPathAnimation's CameraPath from the given time.

Params:

NameTypeAttributeDescription
t Number

Time instant.

public scrubToFrame(frameIdx: Number) source

Scrubs the Camera to the given frame on the CameraPathAnimation's CameraPath.

Params:

NameTypeAttributeDescription
frameIdx Number

Index of the frame to scrub to.

public scrubToT(t: Number) source

Scrubs the Camera to the given time on the CameraPathAnimation's CameraPath.

Params:

NameTypeAttributeDescription
t Number

Time instant.

public stop() source

Stops playing this CameraPathAnimation.