three-story-controls.pathpointscontrols.md

Home > three-story-controls > PathPointsControls

PathPointsControls class

Control scheme to transition the camera between specific points (frames) along a path specified through an AnimationClip.

Signature:

export declare class PathPointsControls extends EventDispatcher implements BaseControls 

Extends: EventDispatcher

Implements: BaseControls

Remarks

Control scheme to transition the camera between specific points (frames) along a path specified through an AnimationClip. A mouse wheel or swipe or keyboard arrow event triggers the camera to smoothly transition from one given frame number to the next.

Note: CSS property touch-action: none will probably be needed on listener element.

See PathPointsControlsProps for all properties that can be passed to the constructor.

See PathPointMarker for POI properties.

See UpdatePOIsEvent and ExitPOIsEvent for emitted event signatures.

DEMO

Example

const pois = [ { frame: 0 }, { frame: 54 } ....]
const scene = new Scene()
const gltfLoader = new GLTFLoader()
let camera, cameraRig, controls

gltfLoader.load(cameraPath, (gltf) => {
 camera = gltf.cameras[0]
 cameraRig = new CameraRig(camera, scene)
 cameraRig.setAnimationClip(gltf.animations[0])
 cameraRig.setAnimationTime(0)
 controls = new PathPointsControls(cameraRig, pois)
 controls.enable()
 controls.addEventListener('ExitPOIs', (e) => {
   // e.exitFrom will be either 'start' or 'end'
 })
 controls.addEventListener('update', (e) => {
   // e.currentIndex will be the index of the starting poi
   // e.upcomingIndex will be the index of the upcoming poi
   // e.progress will be a number 0-1 indicating progress of the transition
 })
})

Constructors

Constructor	Modifiers	Description
(constructor)(cameraRig, pois, props)		Constructs a new instance of the PathPointsControls class

Properties

Property	Modifiers	Type	Description
cameraRig		CameraRig

Methods

Method	Modifiers	Description
disable()
enable()
getCurrentIndex()
isEnabled()
update()