Logo

ThreeJS Property Binding and Mixer

PropertyBinding

Internally, this holds a reference to real property in the scene graph.

Constructor

PropertyBinding( rootNode : Object3D, path, parsedPath )

-- rootNode: -- path -- parsedPath (optional)

Properties

The properties are as follows:

  • .path : Number
  • .parsedPath : Number
  • .node : Number
  • .rootNode : Number
  • .BindingType : Object
  • .Versioning : Object
  • .GetterByBindingType : Array
  • .SetterByBindingTypeAndVersioning : Array

Methods

.getValue ( targetArray : Array, offset : Number ) : undefined

.setValue ( sourceArray : Array, offset : Number ) : undefined

.bind ( ): undefined

Create getter / setter pair for a property in the scene graph. Used internally by getValue and setValue.

.unbind ( ): undefined

Unbind getter / setter pair for a property in the scene graph.

.Composite ( targetGroup, path, optionalParsedPath ) : Constructor

Create a new Composite PropertyBinding.

.create ( root, path, parsedPath ) : Constructor

Create a new Composite PropertyBinding (if root is an AnimationObjectGroup) or PropertyBinding.

.parseTrackName ( trackName ) : Constructor

Matches strings in the following forms:

-- nodeName.property

-- nodeName.property[accessor]

-- nodeName.material.property[accessor]

-- uuid.property[accessor]

-- uuid.objectName[objectIndex].propertyName[propertyIndex]

-- parentName/nodeName.property

-- parentName/parentName/nodeName.property[index]

-- .bone[Armature.DEF_cog].position

-- scene:helium_balloon_model:helium_balloon_model.position

.findNode ( root, nodeName ) : Constructor

Find a node in a node tree or Skeleton.

PropertyMixer

Internally used buffered scene graph attribute that enables for weighted accumulation.

Constructor

PropertyMixer( binding : PropertyBinding, typeName : String, valueSize : Number )

-- binding

-- typeName

-- valueSize

Properties

The properties of the package are as follows:

.binding : PropertyBinding

.buffer : TypedArray

Buffer with size valueSize * 4.

This has the layout: [ incoming | accu0 | accu1 | orig ]

The data is then sent to 'incoming' by interpolators who use.buffer as their.result. For the cumulative result, 'accu0' and 'accu1' are utilised frame-interleaved and compared to find changes. 'orig' saves the property's initial state.

.cumulativeWeight : Number

Default is 0.

.valueSize : Number

.referenceCount : Number

Default is 0.

.useCount : Number

Default is 0.

Methods

.accumulate ( accuIndex : Number, weight : Number ) : undefined

Accumulate data in buffer[accuIndex] 'incoming' region into 'accu[i]'.

If weight is 0 this does nothing.

.apply ( accuIndex : Number ) : undefined

Apply the state of buffer 'accu[i]' to the binding when accus differ.

.saveOriginalState ( ) : undefined

Remember the state of the bound property and copy it to both accus.

.restoreOriginalState ( ) : undefined

Apply the state previously taken via 'saveOriginalState' to the binding.

Related Topics

ThreeJS Lines and Texts

Drawing Lines Let's say you want to draw a line or a circle, not a wireframe Mesh. First, we need to set up the renderer, scene, and camera. Here is the...

3 minutes read.

ThreeJS Helper 1

ArrowHelper A 3D arrow object for visualizing directions. Code Example const dir = new THREE.Vector3( 1, 2, 0 ); //normalize the direction vector (convert to vector of length 1) dir.normalize(); const origin = new THREE.Vector3( 0,...

5 minutes read.

ThreeJS Layers

A Layers object assigns an Object3D to one or more of the 32 layers numbered 0 to 31 - the layers are internally stored as a bit mask, and all...

1 minute read.

ThreeJS Helpers 2

PolarGridHelper The PolarGridHelper is an object to define polar grids. Grids are two-dimensional arrays of lines. Code Example const radius = 10; const radials = 16; const circles = 8; const divisions = 64; const helper =...

4 minutes read.

ThreeJS Loader 1

AnimationLoader Class for loading AnimationClips in JSON format. This uses the FileLoader internally for loading files. Code Example // instantiate a loader const loader = new THREE.AnimationLoader(); // load a resource loader.load( // resource URL 'animations/animation.js', // onLoad callback function...

8 minutes read.

ThreeJS Materials 3

RawShaderMaterial This class works just like ShaderMaterial, except that definitions of built-in uniforms and attributes are not automatically prepended to the GLSL shader code. Code Example const material = new THREE.RawShaderMaterial( {    ...

9 minutes read.

ThreeJs Tutorial

What is Three.JS? Three.js is a cross-browser JavaScript library and application programming interface that uses WebGL to create and display animated 3D computer graphics in a web browser. The source code...

6 minutes read.

ThreeJS Matrix Transformations

Three.js encodes 3D transformations using matrices for translations (position), rotations, and scaling. Every Object3D instance has a matrix that records the location, rotation, and scale of the object. This page...

2 minutes read.

ThreeJS Shadows

LightShadow Serves as a base class for the other shadow classes. Constructor LightShadow( camera : Camera ) camera - the light's view of the world. Create a new LightShadow. This is not intended to be...

7 minutes read.

ThreeJS Using post-processing

Many three.js applications render their 3D objects directly to the screen. Sometimes, however, you want to apply one or more graphical effects like Depth-Of-Field, Bloom, Film Grain or various types...

2 minutes read.

ThreeJS Objects

Bone A bone that is part of a Skeleton. The skeleton in turn is used by the SkinnedMesh. Bones are almost identical to a blank Object3D. Code Example const root = new THREE.Bone(); const...

12 minutes read.

ThreeJS InterleavedBuffer

The term "interleaved" refers to the packing of multiple attributes, possibly of different types (e.g., position, normal, uv, colour) into a single array buffer. Constructor InterleavedBuffer( array : TypedArray, stride : Integer...

3 minutes read.

ThreeJS Testing with npm

This article explains how to install three.js in a node.js environment so that automated tests may be run. Tests can be done manually or with the help of automated CI...

4 minutes read.

ThreeJS Disposing an Object

The disposal of unwanted library entities is a crucial component of improving performance and avoiding memory leaks in your programme. When you create a three.js type instance, you set aside...

4 minutes read.

ThreeJS Updating Things

If an item has been added to the scene with the specified code, it will immediately update its matrices. const object = new THREE.Object3D(); scene.add( object ); or, if they are the child...

4 minutes read.

ThreeJS Lights

Light Abstract base class for lights - all other light types inherit the properties and methods described here. Constructor Light( color : Integer, intensity : Float ) color - (optional) hexadecimal color of the...

10 minutes read.

ThreeJS Curve

An abstract base class for creating a Curve object with interpolation methods. CurvePath is an array of Curves. Constructor Curve() This constructor creates a new Curve. Properties .arcLengthDivisions : Integer This value determines the amount of...

13 minutes read.

ThreeJS Audio

It is used to create a non-positional (global ) audio object. Code Example: // create an AudioListener and add it to the camera const listener = new THREE.AudioListener(); camera.add( listener ); // create a global...

6 minutes read.

ThreeJS Material - Mesh

MeshBasicMaterial A material for drawing geometries in a simple shaded (flat or wireframe) way. This material is not affected by lights. Constructor MeshBasicMaterial( parameters : Object ) parameters - (optional) an object with one or...

24 minutes read.

ThreeJS Property Binding and Mixer

PropertyBinding Internally, this holds a reference to real property in the scene graph. Constructor PropertyBinding( rootNode : Object3D, path, parsedPath ) -- rootNode: -- path -- parsedPath (optional) Properties The properties are as follows: .path : Number.parsedPath...

2 minutes read.