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 BufferAttribute

This class stores data for an attribute associated with a BufferGeometry (such as vertex positions, face indices, normals, colours, UVs, and any custom attributes), allowing for more efficient data passing...

4 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 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 Geometries-1

BoxGeometry BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'. On creation, the cuboid is centered on the origin, with each edge parallel to...

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

AnimationActions are used to schedule the playback of animations saved in AnimationClips. Note that the majority of AnimationAction's methods can be chained together. The "Animation System" page in the "Next Steps" part...

6 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 Renderers

WebGLMultipleRenderTargets A special render target that enables a fragment shader to write to several textures. This approach is useful for advanced rendering techniques like post-processing or deferred rendering. Heads up: WebGLMultipleRenderTargets...

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

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 Math

Box2 Represents an axis-aligned bounding box (AABB) in 2D space. Constructor Box2( min : Vector2, max : Vector2 ) min - (optional) Vector2 representing the lower (x, y) boundary of the box. Default is...

48 minutes read.

ThreeJS Loading 3D Models

There are hundreds of file formats for 3D models, each with its own purpose, set of features, and level of complexity. Although three.js has a lot of loaders, choosing the...

2 minutes read.

ThreeJS Creating VR Content

This article gives a quick introduction of the main components of a three.js-based web-based VR application. Workflow      First, you have to include VRButton.js into your project. import { VRButton } from...

1 minute 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 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 Animation Systems

You may animate many aspects of your models with the three.js animation system, including the bones of a skinned and rigged model, morph targets, multiple material properties (colours, opacity, booleans),...

3 minutes read.

ThreeJS BufferGeometry

A mesh, line, or point geometry representation. Included within buffers are vertex positions, face indices, normals, colours, UVs, and custom attributes, lowering the cost of passing all of this data...

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