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 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 Scenes

Fog This class contains the parameters that define linear fog, i.e., that grows linearly denser with the distance. Constructor Fog( color : Integer, near : Float, far : Float ) The color parameter is...

3 minutes read.

ThreeJS Interpolant

CubicInterpolant Code Example const interpolant = new THREE.CubicInterpolant(new Float32Array( 2 ),new Float32Array( 2 ),1,new Float32Array( 1 ));interpolant.evaluate( 0.5 ); Constructor CubicInterpolant( parameterPositions, sampleValues, sampleSize, resultBuffer ) parameterPositions -- array of positions sampleValues -- array of samples sampleSize...

2 minutes read.

ThreeJS Managers

DefaultLoadingManager When no custom manager is specified, most loaders use a global instance of the LoadingManager. This will suffice for most purposes, but there may be times when you want separate loading...

4 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 Material

Abstract base class for materials. Materials describe the appearance of objects. They are defined in a (mostly) renderer-independent way, so you don't have to rewrite materials if you decide to use...

6 minutes read.

ThreeJS Keyframe Track

A KeyframeTrack is a timed series of keyframes that are made up of lists of times and related values and are used to animate an object's unique property. The "Animation System"...

4 minutes read.

ThreeJS Cameras

ArrayCamera ArrayCamera can be used to render a scene using a preset group of cameras quickly. This is an important feature of VR scene rendering performance. An array of sub cameras is...

6 minutes read.

ThreeJS Keyframe Tracks and Animation

A KeyframeTrack is a timed series of keyframes that are made up of lists of times and related values and are used to animate an object's unique property. BooleanKeyframeTrack A Track of...

3 minutes read.

ThreeJS AnimationClip

An AnimationClip is a group of keyframe tracks that may be reused to depict an animation. The "Animation System" page in the "Next Steps" part of the handbook provides an overview...

2 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 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 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.

ThreeJS AnimationMixer

The AnimationMixer is a player that allows you to play animations on a specific object in the scene. When many items in a scene are animated individually, each object may...

2 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 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 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 Uniform

Uniforms are global GLSL variables. They are passed to shader programs. Code Example When declaring a uniform of a ShaderMaterial, it is declared by value or by object. uniforms: { time: { value: 1.0...

2 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 Compatibiliy Check and Running Locally

Even though this is becoming less of an issue, some devices or browsers may still be incompatible with WebGL. The method below enables you to check if it is supported...

3 minutes read.