three-story-controls.scrollcontrols.md

Home > three-story-controls > ScrollControls

ScrollControls class

Control scheme to scrub through the CameraRig's AnimationClip based on the scroll of a DOM Element

Signature:

export declare class ScrollControls implements BaseControls 

Implements: BaseControls

Remarks

Control scheme to scrub through the CameraRig's AnimationClip based on the scroll of a DOM Element. These controls expect to observe an element that is a few viewports long, and use the scroll distance to scrub through a camera animation. By default, the 'start' of the animation is when the element starts to be in view (ie the top of the element aligns with the bottom of the viewport), and the 'end' is when the element goes out of view (when the bottom of the elements aligns with the top of the viewport). These trigger points can be customised with the cameraStart and cameraEnd properties. Additional scroll-dependant procedures can also be defined through scrollActions.

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

DEMO

Example

const scene = new Scene()
const gltfLoader = new GLTFLoader()
const camera = new PerspectiveCamera()
const cameraRig = new CameraRig(camera, scene)
const controls = new ScrollControls(cameraRig, {
 scrollElement: document.querySelector('.scroller'),
 cameraStart: '12%',
 cameraEnd: '90%',
 scrollActions: [
   { start: '0%' , end: '10%', callback: e => fadeInElement(e) },
   { start: '85%' , end: '100%', callback: e => fadeOutElement(e) }
 ]
})

function fadeInElement(progress) { // entry fade transition }
function fadeOutElement(progress) { // exit fade transition }

gltfLoader.load(cameraPath, (gltf) => {
 cameraRig.setAnimationClip(gltf.animations[0])
 cameraRig.setAnimationTime(0)
 controls.enable()
})

// render loop
function animate() {
 controls.update()
}

Constructors

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

Properties

Property	Modifiers	Type	Description
cameraRig		CameraRig

Methods

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