ParallaxHelper

@three-blocks/proParallax2DBackgroundWebGPUWebGL
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.Camera
Camera 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

.camera : THREE.Camera

Reference to the camera.

Methods

addLayer#

addLayer(object : THREE.Object3D, factor : number, axis : string) : this

Add a layer to the parallax effect.

Parameters
objectTHREE.Object3D
Object to apply parallax to
factornumber
Parallax factor (0 = fixed, 1 = moves with camera)
axisoptionalstring
Axis to apply parallax: 'x', 'y', or 'xy'
Default is 'xy'.
Returns
this — For chaining

removeLayer#

removeLayer(object : THREE.Object3D) : this

Remove a layer from the parallax effect.

Parameters
objectTHREE.Object3D
Object to remove
Returns
this — For chaining

setReference#

setReference(x : number, y : number) : this

Set 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
xnumber
Reference X position (usually camera start X)
ynumber
Reference Y position (usually camera start Y)
Returns
this — For chaining

update#

update() : this

Update all parallax layers based on camera position. Call this in your animation loop after camera.update().

Returns
this — For chaining

getLayers#

getLayers() : Array<{object: THREE.Object3D, factor: number, axis: string}>

Get all registered layers.

Returns
Array<{object: THREE.Object3D, factor: number, axis: string}> — Layer array

clear#

clear() : this

Clear all parallax layers.

Returns
this — For chaining