Skip to main content

Binding

You can establish property bindings for an Object3D in two distinct manners:

  • Automatic Recalculation: property values are automatically updated at the conclusion of each animate cycle
  • Manual Calculation: property values must be manually computed and updated as needed

How it works​

To create a binding, you should use the bindProperty method.
When the binding is created, its initial value is calculated, and at the end of each animation cycle, it will be recalculated.

const box = new Mesh(new BoxGeometry(), new MeshLambertMaterial());
box.bindProperty('visible', () => box.parent?.enabled); // Visible only if parent is enabled

ℹ️ Note
The bindProperty method has a third parameter that is useful when using the smart rendering mode.

⚠️ Warning
Exercise caution when using the parent property within a get callback, especially when the object may not have a parent yet.

Manual detection​

In some cases, you may want more control over when the bound properties are recalculated.
To achieve this, you can use the setManualDetectionMode.
When you set manual detection mode, it prevents the automatic recalculation of bound properties at the end of each animation cycle. You can then manually trigger the update of these properties by calling the detectChanges method when needed. 

box.setManualDetectionMode(); // Enable manual detection mode
box.detectChanges(); // Calculate binding property values manually

Live Examples​

⚡ Stackblitz - Binding
⚡ Stackblitz - Binding Collisions