ParallaxHelper
new ParallaxHelper(camera : THREE.Camera)ParallaxHelper - Helper class for parallax scrolling effects
Creates parallax scrolling effects by moving background layers at different speeds relative to camera movement.
Usage
Layers with lower factors move slower (distant backgrounds), layers with higher factors move faster (foreground elements).
- Factor 0.0 = no movement (fixed to screen)
- Factor 0.5 = moves at half camera speed (mid-ground)
- Factor 1.0 = moves with camera (no parallax, same as default)
Constructor Parameters
cameraTHREE.CameraCamera to track for parallax
Example
import { ParallaxHelper } from '@three-blocks/pro';
// Create parallax helper
const parallax = new ParallaxHelper(camera);
// Add background layers with different speeds
parallax.addLayer(skyMesh, 0.1); // Slow - distant sky
parallax.addLayer(mountainsMesh, 0.3); // Medium - mountains
parallax.addLayer(treesMesh, 0.6); // Faster - trees
// Set reference point (usually camera start position)
parallax.setReference(camera.position.x, camera.position.y);
// In animation loop
parallax.update();
Properties
Methods
addLayer#
addLayer(object : THREE.Object3D, factor : number, axis : string) : thisAdd a layer to the parallax effect.
Parameters
objectTHREE.Object3DObject to apply parallax to
factornumberParallax factor (0 = fixed, 1 = moves with camera)
axisoptionalstringAxis to apply parallax: 'x', 'y', or 'xy'
Default is
Default is
'xy'.Returns
this — For chainingremoveLayer#
removeLayer(object : THREE.Object3D) : thisRemove a layer from the parallax effect.
Parameters
objectTHREE.Object3DObject to remove
Returns
this — For chainingsetReference#
setReference(x : number, y : number) : thisSet the reference position for parallax calculation. Parallax offset is calculated relative to this position. Call this at the start of the level or when resetting.
Parameters
xnumberReference X position (usually camera start X)
ynumberReference Y position (usually camera start Y)
Returns
this — For chainingupdate#
update() : thisUpdate all parallax layers based on camera position. Call this in your animation loop after camera.update().
Returns
this — For chaininggetLayers#
getLayers() : Array<{object: THREE.Object3D, factor: number, axis: string}>Get all registered layers.
Returns
Array<{object: THREE.Object3D, factor: number, axis: string}> — Layer arrayclear#
clear() : thisClear all parallax layers.
Returns
this — For chainingdispose#
dispose()Clean up resources.