提交 3cf7676e 编写于 作者: N nicholas

commit first en-zh version

上级 651c3cd8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>Polyfills</h1>
<p class="desc">Three.js includes polyfills for the following functions and constants.</p>
<h3>[page:Number.EPSILON Number.EPSILON]</h3>
<p>
The difference between one and the smallest value greater than one that can be represented as a Number.
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON MDN reference].
</p>
<h3>[page:Math.sign Math.sign]( [page:Number x] )</h3>
<p>
If the argument is a positive number, negative number, positive zero or negative zero,
the function will return 1, -1, 0 or -0 respectively. Otherwise, NaN is returned.
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign MDN reference].
</p>
<h3>[page:Function.prototype.name Function.prototype.name]( [page:Number x] )</h3>
<p>
Returns the name of a function, or (before ES6 implementations) an empty string for anonymous functions.
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name MDN reference].
</p>
<h3>[page:Object.assign Object.assign]( [page:Object target], [page:Object ...sources] )</h3>
<p>
The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object.
It will return the target object.
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign MDN reference].
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/polyfills.js src/polyfills.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Geometry] &rarr;
<h1>[name]</h1>
<p class="desc">todo</p>
<h2>Example</h2>
<code>todo</code>
<h2>Constructor</h2>
<h3>[name]([param:Number todo])</h3>
<p></p>
<h2>Properties</h2>
<h3>[property:Number todo]</h3>
<p>
todo
</p>
<h2>Methods</h2>
<h3>[method:null todo]()</h3>
<p>todo</p>
<p>todo</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
AnimationActions schedule the performance of the animations which are stored in
[page:AnimationClip AnimationClips].<br /><br />
Note: Most of AnimationAction's methods can be chained.<br /><br />
For an overview of the different elements of the three.js animation system see the
"Animation System" article in the "Next Steps" section of the manual.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:AnimationMixer mixer], [param:AnimationClip clip], [param:Object3D localRoot] )</h3>
<p>
[page:AnimationMixer mixer] - the *AnimationMixer* that is controlled by this action.<br />
[page:AnimationClip clip] - the *AnimationClip* that holds the animation data for this action.<br />
[page:Object3D localRoot] - the root object on which this action is performed.<br /><br />
Note: Instead of calling this constructor directly you should instantiate an AnimationAction with
[page:AnimationMixer.clipAction] since this method provides caching for better performance.
</p>
<h2>Properties</h2>
<h3>[property:Boolean clampWhenFinished]</h3>
<p>
If *clampWhenFinished* is set to true the animation will automatically be [page:.paused paused]
on its last frame.<br /><br />
If *clampWhenFinished* is set to false, [page:.enabled enabled] will automatically be switched
to false when the last loop of the action has finished, so that this action has no further
impact.<br /><br />
Default is false.<br /><br />
Note: *clampWhenFinished* has no impact if the action is interrupted (it has only an effect if
its last loop has really finished).
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Setting *enabled* to *false* disables this action, so that it has no impact. Default is *true*.<br /><br />
When the action is re-enabled, the animation continues from its current [page:.time time]
(setting *enabled* to *false* doesn't reset the action).<br /><br />
Note: Setting *enabled* to *true* doesn’t automatically restart the animation. Setting *enabled*
to *true* will only restart the animation immediately if the following condition is fulfilled:
[page:.paused paused] is *false*, this action has not been deactivated in the meantime (by
executing a [page:.stop stop] or [page:.reset reset] command), and neither [page:.weight weight]
nor [page:.timeScale timeScale] is 0.
</p>
<h3>[property:Number loop]</h3>
<p>
The looping mode (can be changed with [page:.setLoop setLoop]). Default is
[page:Animation THREE.LoopRepeat] (with an infinite number of [page:.repetitions repetitions])<br /><br />
Must be one of these constants:<br /><br />
[page:Animation THREE.LoopOnce] - playing the clip once,<br />
[page:Animation THREE.LoopRepeat] - playing the clip with the choosen number of *repetitions*,
each time jumping from the end of the clip directly to its beginning,<br />
[page:Animation THREE.LoopPingPong] - playing the clip with the choosen number of *repetitions*,
alternately playing forward and backward.
</p>
<h3>[property:Boolean paused]</h3>
<p>
Setting *paused* to *true* pauses the execution of the action by setting the effective time scale
to 0. Default is *false*.<br /><br />
</p>
<h3>[property:Number repetitions]</h3>
<p>
The number of repetitions of the performed [page:AnimationClip] over the course of this action.
Can be set via [page:.setLoop setLoop]. Default is *Infinity*.<br /><br />
Setting this number has no effect, if the [page:.loop loop mode] is set to
[page:Animation THREE.LoopOnce].
</p>
<h3>[property:Number time]</h3>
<p>
The local time of this action (in seconds, starting with 0).<br /><br />
The value gets clamped or wrapped to 0...clip.duration (according to the loop state). It can be
scaled relativly to the global mixer time by changing [page:.timeScale timeScale] (using
[page:.setEffectiveTimeScale setEffectiveTimeScale] or [page:.setDuration setDuration]).<br />
</p>
<h3>[property:Number timeScale]</h3>
<p>
Scaling factor for the [page:.time time]. A value of 0 causes the animation to pause. Negative
values cause the animation to play backwards. Default is 1.<br /><br />
Properties/methods concerning *timeScale* (respectively *time*) are:
[page:.getEffectiveTimeScale getEffectiveTimeScale],
[page:.halt halt],
[page:.paused paused],
[page:.setDuration setDuration],
[page:.setEffectiveTimeScale setEffectiveTimeScale],
[page:.stopWarping stopWarping],
[page:.syncWith syncWith],
[page:.warp warp].
</p>
<h3>[property:Number weight]</h3>
<p>
The degree of influence of this action (in the interval [0, 1]). Values between 0 (no impact)
and 1 (full impact) can be used to blend between several actions. Default is 1. <br /><br />
Properties/methods concerning *weight* are:
[page:.crossFadeFrom crossFadeFrom],
[page:.crossFadeTo crossFadeTo],
[page:.enabled enabled],
[page:.fadeIn fadeIn],
[page:.fadeOut fadeOut],
[page:.getEffectiveWeight getEffectiveWeight],
[page:.setEffectiveWeight setEffectiveWeight],
[page:.stopFading stopFading].
</p>
<h3>[property:Boolean zeroSlopeAtEnd]</h3>
<p>
Enables smooth interpolation without separate clips for start, loop and end. Default is *true*.
</p>
<h3>[property:Boolean zeroSlopeAtStart]</h3>
<p>
Enables smooth interpolation without separate clips for start, loop and end. Default is *true*.
</p>
<h2>Methods</h2>
<h3>[method:AnimationAction crossFadeFrom]( [param:AnimationAction fadeOutAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
<p>
Causes this action to [page:.fadeIn fade in], fading out another action simultaneously, within
the passed time interval. This method can be chained.<br /><br />
If warpBoolean is true, additional [page:.warp warping] (gradually changes of the time scales)
will be applied.<br /><br />
Note: Like with *fadeIn*/*fadeOut*, the fading starts/ends with a weight of 1.
</p>
<h3>[method:AnimationAction crossFadeTo]( [param:AnimationAction fadeInAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
<p>
Causes this action to [page:.fadeOut fade out], fading in another action simultaneously, within
the passed time interval. This method can be chained.<br /><br />
If warpBoolean is true, additional [page:.warp warping] (gradually changes of the time scales)
will be applied.<br /><br />
Note: Like with *fadeIn*/*fadeOut*, the fading starts/ends with a weight of 1.
</p>
<h3>[method:AnimationAction fadeIn]( [param:Number durationInSeconds] )</h3>
<p>
Increases the [page:.weight weight] of this action gradually from 0 to 1, within the passed time
interval. This method can be chained.
</p>
<h3>[method:AnimationAction fadeOut]( [param:Number durationInSeconds] )</h3>
<p>
Decreases the [page:.weight weight] of this action gradually from 1 to 0, within the passed time
interval. This method can be chained.
</p>
<h3>[method:Number getEffectiveTimeScale]()</h3>
<p>
Returns the effective time scale (considering the current states of warping and
[page:.paused paused]).
</p>
<h3>[method:number getEffectiveWeight]()</h3>
<p>
Returns the effective weight (considering the current states of fading and
[page:.enabled enabled]).
</p>
<h3>[method:AnimationClip getClip]()</h3>
<p>
Returns the clip which holds the animation data for this action.
</p>
<h3>[method:AnimationMixer getMixer]()</h3>
<p>
Returns the mixer which is responsible for playing this action.
</p>
<h3>[method:Object3D getRoot]()</h3>
<p>
Returns the root object on which this action is performed.
</p>
<h3>[method:AnimationAction halt]( [param:Number durationInSeconds] )</h3>
<p>
Decelerates this animation's speed to 0 by decreasing [page:.timeScale timeScale] gradually
(starting from its current value), within the passed time interval. This method can be chained.
</p>
<h3>[method:Boolean isRunning]()</h3>
<p>
Returns true if the action’s [page:.time time] is currently running.<br /><br />
In addition to being activated in the mixer (see [page:.isScheduled isScheduled]) the following conditions must be fulfilled:
[page:.paused paused] is equal to false, [page:.enabled enabled] is equal to true,
[page:.timeScale timeScale] is different from 0, and there is no scheduling for a delayed start
([page:.startAt startAt]).<br /><br />
Note: *isRunning* being true doesn’t necessarily mean that the animation can actually be seen.
This is only the case, if [page:.weight weight] is additionally set to a non-zero value.
</p>
<h3>[method:Boolean isScheduled]()</h3>
<p>
Returns true, if this action is activated in the mixer.<br /><br />
Note: This doesn’t necessarily mean that the animation is actually running (compare the additional
conditions for [page:.isRunning isRunning]).
</p>
<h3>[method:AnimationAction play]()</h3>
<p>
Tells the mixer to activate the action. This method can be chained.<br /><br />
Note: Activating this action doesn’t necessarily mean that the animation starts immediately:
If the action had already finished before (by reaching the end of its last loop), or if a time
for a delayed start has been set (via [page:.startAt startAt]), a [page:.reset reset] must be
executed first. Some other settings ([page:.paused paused]=true, [page:.enabled enabled]=false,
[page:.weight weight]=0, [page:.timeScale timeScale]=0) can prevent the animation from playing,
too.
</p>
<h3>[method:AnimationAction reset]()</h3>
<p>
Resets the action. This method can be chained.<br /><br />
This method sets [page:.paused paused] to false, [page:.enabled enabled] to true,
[page:.time time] to 0, interrupts any scheduled fading and warping, and removes the internal
loop count and scheduling for delayed starting.<br /><br />
Note: .*reset* is always called by [page:.stop stop], but .*reset* doesn’t call .*stop* itself.
This means: If you want both, resetting and stopping, don’t call .*reset*; call .*stop* instead.
</p>
<h3>[method:AnimationAction setDuration]( [param:Number durationInSeconds] )</h3>
<p>
Sets the duration for a single loop of this action (by adjusting [page:.timeScale timeScale]
and stopping any scheduled warping). This method can be chained.
</p>
<h3>[method:AnimationAction setEffectiveTimeScale]( [param:Number timeScale] )</h3>
<p>
Sets the [page:.timeScale timeScale] and stops any scheduled warping. This method can be chained.<br /><br />
If [page:.paused paused] is false, the effective time scale (an internal property) will also be set
to this value; otherwise the effective time scale (directly affecting the animation at
this moment) will be set to 0.<br /><br />
Note: .*paused* will not be switched to *true* automatically, if .*timeScale* is set to 0 by
this method.
</p>
<h3>[method:AnimationAction setEffectiveWeight]( [param:Number weight] )</h3>
<p>
Sets the [page:.weight weight] and stops any scheduled fading. This method can be chained.<br /><br />
If [page:.enabled enabled] is true, the effective weight (an internal property) will also be set
to this value; otherwise the effective weight (directly affecting the animation at this moment)
will be set to 0.<br /><br />
Note: .*enabled* will not be switched to *false* automatically, if .*weight* is set to 0 by
this method.
</p>
<h3>[method:AnimationAction setLoop]( [param:Number loopMode], [param:Number repetitions] )</h3>
<p>
Sets the [page:.loop loop mode] and the number of [page:.repetitions repetitions]. This method
can be chained.
</p>
<h3>[method:AnimationAction startAt]( [param:Number startTimeInSeconds] )</h3>
<p>
Defines the time for a delayed start (usually passed as [page:AnimationMixer.time] +
deltaTimeInSeconds). This method can be chained.<br /><br />
Note: The animation will only start at the given time, if .*startAt* is chained with
[page:.play play], or if the action has already been activated in the mixer (by a previous
call of .*play*, without stopping or resetting it in the meantime).
</p>
<h3>[method:AnimationAction stop]()</h3>
<p>
Tells the mixer to deactivate this action. This method can be chained.<br /><br />
The action will be immediately stopped and completely [page:.reset reset].<br /><br />
Note: You can stop all active actions on the same mixer in one go via
[page:AnimationMixer.stopAllAction mixer.stopAllAction].
</p>
<h3>[method:AnimationAction stopFading]()</h3>
<p>
Stops any scheduled [page:.fadeIn fading] which is applied to this action. This method can be
chained.
</p>
<h3>[method:AnimationAction stopWarping]()</h3>
<p>
Stops any scheduled [page:.warp warping] which is applied to this action. This method can be
chained.
</p>
<h3>[method:AnimationAction syncWith]( [param:AnimationAction otherAction] )</h3>
<p>
Synchronizes this action with the passed other action. This method can be chained.<br /><br />
Synchronizing is done by setting this action’s [page:.time time] and [page:.timeScale timeScale] values
to the corresponding values of the other action (stopping any scheduled warping).<br /><br />
Note: Future changes of the other action's *time* and *timeScale* will not be detected.
</p>
<h3>[method:AnimationAction warp]( [param:Number startTimeScale], [param:Number endTimeScale], [param:Number durationInSeconds] )</h3>
<p>
Changes the playback speed, within the passed time interval, by modifying
[page:.timeScale timeScale] gradually from *startTimeScale* to *endTimeScale*. This method can
be chained.
</p>
<h2>Events</h2>
<p class="desc">
There are two events indicating when a single loop of the action respectively the entire action has finished. You can react to them with:
</p>
<code>
mixer.addEventListener( 'loop', function( e ) { …} ); // properties of e: type, action and loopDelta
mixer.addEventListener( 'finished', function( e ) { …} ); // properties of e: type, action and direction
</code>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
An AnimationClip is a reusable set of keyframe tracks which represent an animation.<br /><br />
For an overview of the different elements of the three.js animation system see the
"Animation System" article in the "Next Steps" section of the manual.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:String name], [param:Number duration], [param:Array tracks] )</h3>
<p>
[page:String name] - a name for this clip.<br />
[page:Number duration] - the duration of this clip (in seconds). If a negative value is passed,
the duration will be calculated from the passed *tracks* array.<br />
[page:Array tracks] - an array of [page:KeyframeTrack KeyframeTracks].<br /><br />
Note: Instead of instantiating an AnimationClip directly with the constructor, you can use one
of its static methods to create AnimationClips: from JSON ([page:.parse parse]), from morph
target sequences ([page:.CreateFromMorphTargetSequence CreateFromMorphTargetSequence],
[page:.CreateClipsFromMorphTargetSequences CreateClipsFromMorphTargetSequences]) or from
animation hierarchies ([page:.parseAnimation parseAnimation]) - if your model doesn't already
hold AnimationClips in its geometry's animations array.
</p>
<h2>Properties</h2>
<h3>[property:Number duration]</h3>
<p>
The duration of this clip (in seconds). This can be calculated from the [page:.tracks tracks]
array via [page:.resetDuration resetDuration].
</p>
<h3>[property:String name]</h3>
<p>
A name for this clip. A certain clip can be searched via [page:.findByName findByName].
</p>
<h3>[property:Array tracks]</h3>
<p>
An array containing a [page:KeyframeTrack] for each property that are animated by this clip.
</p>
<h3>[property:String uuid]</h3>
<p>
The [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of this clip instance.
It gets automatically assigned and shouldn't be edited.
</p>
<h2>Methods</h2>
<h3>[method:this optimize]()</h3>
<p>
Optimizes each track by removing equivalent sequential keys (which are common in morph target
sequences).
</p>
<h3>[method:this resetDuration]()</h3>
<p>
Sets the [page:.duration duration] of the clip to the duration of its longest
[page:KeyframeTrack].
</p>
<h3>[method:this trim]()</h3>
<p>
Trims all tracks to the clip's duration.
</p>
<h3>[method:Boolean validate]()</h3>
<p>
Performs minimal validation on each track in the clip. Returns true if all tracks are valid.
</p>
<h2>Static Methods</h2>
<h3>[method:Array CreateClipsFromMorphTargetSequences]( [param:String name], [param:Array morphTargetSequence], [param:Number fps], [param:Boolean noLoop] )</h3>
<p>
Returns an array of new AnimationClips created from the [page:Geometry.morphTargets morph
target sequences] of a geometry, trying to sort morph target names into animation-group-based
patterns like "Walk_001, Walk_002, Run_001, Run_002 ..."<br /><br />
This method is called by the [page:JSONLoader] internally, and it uses
[page:.CreateFromMorphTargetSequence CreateFromMorphTargetSequence].
</p>
<h3>[method:AnimationClip CreateFromMorphTargetSequence]( [param:String name], [param:Array morphTargetSequence], [param:Number fps], [param:Boolean noLoop] )</h3>
<p>
Returns a new AnimationClip from the passed [page:Geometry.morphTargets morph targets array]
of a geometry, taking a name and the number of frames per second.<br /><br />
Note: The fps parameter is required, but the animation speed can be overridden in an
*AnimationAction* via [page:AnimationAction.setDuration animationAction.setDuration].
</p>
<h3>[method:AnimationClip findByName]( [param:Object objectOrClipArray], [param:String name] )</h3>
<p>
Searches for an AnimationClip by name, taking as its first parameter either an array of
AnimationClips, or a mesh or geometry that contains an array named "animations".
</p>
<h3>[method:AnimationClip parse]( [param:Object json] )</h3>
<p>
Parses a JSON representation of a clip and returns an AnimationClip.
</p>
<h3>[method:AnimationClip parseAnimation]( [param:Object animation], [param:Array bones] )</h3>
<p>
Parses the animation.hierarchy format and returns an AnimationClip.
</p>
<h3>[method:Object toJSON]( [param:AnimationClip clip] )</h3>
<p>
Takes an AnimationClip and returns a JSON object.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
The AnimationMixer is a player for animations on a particular object in the scene. When
multiple objects in the scene are animated independently, one AnimationMixer may be used for
each object.<br /><br />
For an overview of the different elements of the three.js animation system see the
"Animation System" article in the "Next Steps" section of the manual.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:Object3D rootObject] )</h3>
<p>
[page:Object3D rootObject] - the object whose animations shall be played by this mixer.<br />
</p>
<h2>Properties</h2>
<h3>[property:Number time]</h3>
<p>
The global mixer time (in seconds; starting with 0 on the mixer's creation).
</p>
<h3>[property:Number timeScale]</h3>
<p>
A scaling factor for the global [page:.time mixer time].<br /><br />
Note: Setting the mixer's timeScale to 0 and later back to 1 is a possibility to pause/unpause
all actions that are controlled by this mixer.
</p>
<h2>Methods</h2>
<h3>[method:AnimationAction clipAction]([param:AnimationClip clip], [param:Object3D optionalRoot])</h3>
<p>
Returns an [page:AnimationAction] for the passed clip, optionally using a root object different
from the mixer's default root. The first parameter can be either an [page:AnimationClip] object
or the name of an AnimationClip.<br /><br />
If an action fitting the clip and root parameters doesn't yet exist, it will be created by
this method. Calling this method several times with the same clip and root parameters always
returns the same clip instance.
</p>
<h3>[method:AnimationAction existingAction]([param:AnimationClip clip], [param:Object3D optionalRoot])</h3>
<p>
Returns an existing [page:AnimationAction] for the passed clip, optionally using a root object
different from the mixer's default root.<br /><br />
The first parameter can be either an [page:AnimationClip] object or the name of an AnimationClip.
</p>
<h3>[method:Object3D getRoot]()</h3>
<p>
Returns this mixer's root object.
</p>
<h3>[method:AnimationMixer stopAllAction]()</h3>
<p>
Deactivates all previously scheduled actions on this mixer.
</p>
<h3>[method:AnimationMixer update]([param:Number deltaTimeInSeconds]) </h3>
<p>
Advances the global mixer time and updates the animation.<br /><br />
This is usually done in the render loop, passing [page:Clock.getDelta clock.getDelta] scaled by the mixer's [page:.timeScale timeScale]).
</p>
<h3>[method:null uncacheClip]([param:AnimationClip clip])</h3>
<p>
Deallocates all memory resources for a clip.
</p>
<h3>[method:null uncacheRoot]([param:Object3D root]) </h3>
<p>
Deallocates all memory resources for a root object.
</p>
<h3>[method:null uncacheAction]([param:AnimationClip clip], [param:Object3D optionalRoot])</h3>
<p>
Deallocates all memory resources for an action.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">A group of objects that receives a shared animation state.<br /><br />
For an overview of the different elements of the three.js animation system see the
"Animation System" article in the "Next Steps" section of the manual.
</p>
<h2>Usage:</h2>
<p class="desc">
Add objects you would otherwise pass as 'root' to the constructor or the [page:AnimationMixer.clipAction clipAction]
method of [page:AnimationMixer AnimationMixer] and instead pass this object as 'root'.<br /><br />
Note that objects of this class appear as one object to the mixer,
so cache control of the individual objects must be done on the group.
</p>
<h2>Limitations</h2>
<p class="desc">
The animated properties must be compatible among all objects in the group.<br /><br />
A single property can either be controlled through a target group or directly, but not both.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:object obj1], [param:object obj2], [param:object obj3], ... )</h3>
[page:object obj] - an abitrary number of meshes that share the same animation state.<br />
<h2>Properties</h2>
<h3>[property:object stats]</h3>
<p>
An object that contains some informations of this *AnimationObjectGroup* (total number, number
in use, number of bindings per object)
</p>
<h3>[property:String uuid]</h3>
<p>
The [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of this
*AnimationObjectGroup*. It gets automatically assigned and shouldn't be edited.
</p>
<h2>Methods</h2>
<h3>[method:null add]( [param:object obj1], [param:object obj2], [param:object obj3], ... )</h3>
<p>
Adds an arbitrary number of objects to this *AnimationObjectGroup*.
</p>
<h3>[method:null remove]( [param:object obj1], [param:object obj2], [param:object obj3], ... )</h3>
<p>
Removes an arbitrary number of objects from this *AnimationObjectGroup*.
</p>
<h3>[method:null uncache]( [param:object obj1], [param:object obj2], [param:object obj3], ... )</h3>
<p>
Deallocates all memory resources for the passed objects of this *AnimationObjectGroup*.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
An object with various functions to assist with animations, used internally.
</p>
<h2>Methods</h2>
<h3>[method:Array arraySlice]( array, from, to )</h3>
<p>
This is the same as Array.prototype.slice, but also works on typed arrays.
</p>
<h3>[method:Array convertArray]( array, type, forceClone )</h3>
<p>
Converts an array to a specific type.
</p>
<h3>[method:Array flattenJSON]( jsonKeys, times, values, valuePropertyName )</h3>
<p>
Used for parsing AOS keyframe formats.
</p>
<h3>[method:Array getKeyframeOrder]( times )</h3>
<p>
Returns an array by which times and values can be sorted.
</p>
<h3>[method:Boolean isTypedArray]( object )</h3>
<p>
Returns *true* if the object is a typed array.
</p>
<h3>[method:Array sortedArray]( values, stride, order )</h3>
<p>
Sorts the array previously returned by [page:AnimationUtils.getKeyframeOrder getKeyframeOrder].
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
A KeyframeTrack is a timed sequence of [link:https://en.wikipedia.org/wiki/Key_frame keyframes],
which are composed of lists of times and related values, and which are used to animate a
specific property of an object.
</p>
<p>
For an overview of the different elements of the three.js animation system see the
"Animation System" article in the "Next Steps" section of the manual.
</p>
<p>
In contrast to the animation hierarchy of the
[link:https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 JSON model format] a
*KeyframeTrack* doesn't store its single keyframes as objects in a "keys" array (holding the
times and the values for each frame together in one place).
</p>
<p>
Instead of this there are always two arrays in a *KeyframeTrack*: the [page:.times times] array
stores the time values for all keyframes of this track in sequential order, and the
[page:.values values] array contains the corresponding changing values of the animated property.
</p>
<p>
A single value, belonging to a certain point of time, can not only be a simple number, but (for
example) a vector (if a position is animated) or a quaternion (if a rotation is animated). For
this reason the values array (which is a flat array, too) might be three or four times as long as the
times array.
</p>
<p>
Corresponding to the different possible types of animated values there are several subclasses of
*KeyframeTrack*, inheriting the most properties and methods:
</p>
<ul>
<li>[page:BooleanKeyframeTrack]</li>
<li>[page:ColorKeyframeTrack]</li>
<li>[page:NumberKeyframeTrack]</li>
<li>[page:QuaternionKeyframeTrack]</li>
<li>[page:StringKeyframeTrack]</li>
<li>[page:VectorKeyframeTrack]</li>
</ul>
<p>
Some examples of how to manually create [page:AnimationClip AnimationClips] with different sorts
of KeyframeTracks can be found in the [link:https://threejs.org/examples/js/AnimationClipCreator.js]
file.
</p>
<p>
Since explicit values are only specified for the discrete points of time stored in the times array,
all values in between have to be interpolated.
</p>
<p>
The track's name is important for the connection of this track with a specific property of the
animated node (done by [page:PropertyBinding]).
</p>
<h2>Constructor</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values], [param:Constant interpolation] )</h3>
<p>
[page:String name] - the identifier for the *KeyframeTrack*.<br />
[page:Array times] - an array of keyframe times, converted internally to a
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
[page:Array values] - an array with the values related to the times array, converted internally to a
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
[page:Constant interpolation] - the type of interpolation to use. See
[page:Animation Animation Constants] for possible values. Default is [page:Animation InterpolateLinear].
</p>
<h2>Properties</h2>
<h3>[property:String name]</h3>
<p>
The track's name can refer to [page:Geometry.morphTargets morph targets] or
[page:SkinnedMesh bones] or possibly other values within an animated object. See
[page:PropertyBinding.parseTrackName] for the forms of strings that can be parsed for property
binding:
</p>
<p>
The name can specify the node either using its name or its uuid (although it needs to be in the
subtree of the scene graph node passed into the mixer). Or, if the track name starts with a dot,
the track applies to the root node that was passed into the mixer.
</p>
<p>
Usually after the node a property will be specified directly. But you can also specify a
subproperty, such as .rotation[x], if you just want to drive the X component of the rotation
via a float track.
</p>
<p>
You can also specify bones or multimaterials by using an object name, for example:
.bones[R_hand].scale; the red channel of the diffuse color of the fourth material in a
materials array - as a further example - can be accessed with .materials[3].diffuse[r].
</p>
<p>
PropertyBinding will also resolve morph target names, for example: .morphTargetInfluences[run].
</p>
<p>
Note: The track's name does not necessarily have to be unique. Multiple tracks can drive the same
property. The result should be based on a weighted blend between the multiple tracks according to
the weights of their respective actions.
</p>
<h3>[property:Float32Array times]</h3>
<p>
A [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
converted from the times array which is passed in the constructor.
</p>
<h3>[property:Float32Array values]</h3>
<p>
A [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
converted from the values array which is passed in the constructor.
</p>
<h3>[property:Constant DefaultInterpolation]</h3>
<p>
The default interpolation type: [page:Animation InterpolateLinear].
</p>
<h3>[property:Constant TimeBufferType ]</h3>
<p>
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
the type of the buffer internally used for the times.
</p>
<h3>[property:Constant ValueBufferType ]</h3>
<p>
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
the type of the buffer internally used for the values.
</p>
<h2>Methods</h2>
<h3>[method:null createInterpolant]()</h3>
<p>
Creates a [page:LinearInterpolant LinearInterpolant], [page:CubicInterpolant CubicInterpolant]
or [page:DiscreteInterpolant DiscreteInterpolant], depending on the value of the interpolation
parameter passed in the constructor.
</p>
<h3>[method:null getInterpolation]()</h3>
<p>
Returns the interpolation type.
</p>
<h3>[method:Number getValueSize]()</h3>
<p>
Returns the size of each value (that is the length of the [page:.values values] array divided
by the length of the [page:.times times] array).
</p>
<h3>[method:DiscreteInterpolant InterpolantFactoryMethodDiscrete]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
Creates a new [page:DiscreteInterpolant DiscreteInterpolant] from the
[page:KeyframeTrack.times times] and [page:KeyframeTrack.times values]. A Float32Array can be
passed which will receive the results. Otherwise a new array with the appropriate size will be
created automatically.
</p>
<h3>[method:null InterpolantFactoryMethodLinear]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
Creates a new [page:LinearInterpolant LinearInterpolant] from the
[page:KeyframeTrack.times times] and [page:KeyframeTrack.times values]. A Float32Array can be
passed which will receive the results. Otherwise a new array with the appropriate size will be
created automatically.
</p>
<h3>[method:null InterpolantFactoryMethodSmooth]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
Create a new [page:CubicInterpolant CubicInterpolant] from the
[page:KeyframeTrack.times times] and [page:KeyframeTrack.times values]. A Float32Array can be
passed which will receive the results. Otherwise a new array with the appropriate size will be
created automatically.
</p>
<h3>[method:this optimize]()</h3>
<p>
Removes equivalent sequential keys, which are common in morph target sequences.
</p>
<h3>[method:this scale]()</h3>
<p>
Scales all keyframe times by a factor.<br /><br />
Note: This is useful, for example, for conversions to a certain rate of frames per seconds (as it
is done internally by
[page:AnimationClip.CreateFromMorphTargetSequence animationClip.CreateFromMorphTargetSequence]).
</p>
<h3>[method:this setInterpolation]( [param:Constant interpolationType] )</h3>
<p>
Sets the interpolation type. See [page:Animation Animation Constants] for choices.
</p>
<h3>[method:this shift]( [param:Number timeOffsetInSeconds] )</h3>
<p>
Moves all keyframes either forward or backward in time.
</p>
<h3>[method:this trim]( [param:Number startTimeInSeconds], [param:Number endTimeInSeconds] )</h3>
<p>
Removes keyframes before *startTime* and after *endTime*,
without changing any values within the range [*startTime*, *endTime*].
</p>
<h3>[method:Boolean validate]()</h3>
<p>
Performs minimal validation on the tracks. Returns true if valid.
</p>
<p>
This method logs errors to the console, if a track is empty, if the [page:.valueSize value size] is not valid, if an item
in the [page:.times times] or [page:.values values] array is not a valid number or if the items in the *times* array are out of order.
</p>
<h2>Static Methods</h2>
<h3>[method:KeyframeTrack parse]( [param:JSON json] )</h3>
<p>
Parses a JSON object and returns a new keyframe track of the correct type.
</p>
<h3>[method:JSON toJSON]( [param:KeyframeTrack track] )</h3>
<p>
Converts the track to JSON.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
This holds a reference to a real property in the scene graph; used internally.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:Object3D rootNode], path, parsedPath )</h3>
<p>
-- [page:Object3D rootNode]:
-- path
-- parsedPath (optional)
</p>
<h2>Properties</h2>
<h3>[property:Number path]</h3>
<p>
</p>
<h3>[property:Number parsedPath]</h3>
<p>
</p>
<h3>[property:Number node]</h3>
<p>
</p>
<h3>[property:Number rootNode]</h3>
<p>
</p>
<h3>[property:Object BindingType]</h3>
<p>
</p>
<h3>[property:Object Versioning]</h3>
<p>
</p>
<h3>[property:Array GetterByBindingType]</h3>
<p>
</p>
<h3>[property:Array SetterByBindingTypeAndVersioning]</h3>
<p>
</p>
<h2>Methods</h2>
<h3>[method:null getValue]( [param:Array targetArray], [param:Number offset] )</h3>
<p>
</p>
<h3>[method:null setValue]( [param:Array sourceArray], [param:Number offset] )</h3>
<p>
</p>
<h3>[method:null bind]( )</h3>
<p>
Create getter / setter pair for a property in the scene graph. Used internally by
[page:PropertyBinding.getValue getValue] and [page:PropertyBinding.setValue setValue].
</p>
<h3>[method:null unbind]( )</h3>
<p>
Unbind getter / setter pair for a property in the scene graph.
</p>
<h3>[method:Constructor Composite]( targetGroup, path, optionalParsedPath )</h3>
<p>
Create a new Composite PropertyBinding.
</p>
<h3>[method:Constructor create]( root, path, parsedPath )</h3>
<p>
Create a new Composite PropertyBinding (if root is an [page:AnimationObjectGroup]) or PropertyBinding.
</p>
<h3>[method:Constructor parseTrackName]( trackName )</h3>
<p>
Matches strings in the following forms:<br />
-- nodeName.property<br />
-- nodeName.property[accessor]<br />
-- nodeName.material.property[accessor]<br />
-- uuid.property[accessor]<br />
-- uuid.objectName[objectIndex].propertyName[propertyIndex]<br />
-- parentName/nodeName.property<br />
-- parentName/parentName/nodeName.property[index]<br />
-- .bone[Armature.DEF_cog].position<br />
-- scene:helium_balloon_model:helium_balloon_model.position
</p>
<h3>[method:Constructor findNode]( root, nodeName )</h3>
<p>
Find a node in a node tree or [page:Skeleton Skeleton].
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
Buffered scene graph property that allows weighted accumulation; used internally.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:PropertyBinding binding], [param:String typeName], [param:Number valueSize] )</h3>
<p>
-- binding <br />
-- typeName <br />
-- valueSize <br />
</p>
<h2>Properties</h2>
<h3>[property:PropertyBinding binding]</h3>
<p>
</p>
<h3>[property:TypedArray buffer]</h3>
<p>
Buffer with size [page:PropertyMixer valueSize] * 4. <br /><br />
This has the layout: [ incoming | accu0 | accu1 | orig ]<br /><br />
Interpolators can use .buffer as their .result and the data then goes to 'incoming'.
'accu0' and 'accu1' are used frame-interleaved for the cumulative result and
are compared to detect changes. 'orig' stores the original state of the property.
</p>
<h3>[property:Number cumulativeWeight]</h3>
<p>
Default is *0*.
</p>
<h3>[property:Number valueSize]</h3>
<p>
</p>
<h3>[property:Number referenceCount]</h3>
<p>
Default is *0*.
</p>
<h3>[property:Number useCount]</h3>
<p>
Default is *0*.
</p>
<h2>Methods</h2>
<h3>[method:null accumulate]( [param:Number accuIndex], [param:Number weight] )</h3>
<p>
Accumulate data in [page:PropertyMixer.buffer buffer][accuIndex] 'incoming' region into 'accu[i]'.<br />
If weight is *0* this does nothing.
</p>
<h3>[method:null apply]( [param:Number accuIndex] )</h3>
<p>
Apply the state of [page:PropertyMixer.buffer buffer] 'accu[i]' to the binding when accus differ.
</p>
<h3>[method:null saveOriginalState]( )</h3>
<p>
Remember the state of the bound property and copy it to both accus.
</p>
<h3>[method:null restoreOriginalState]( )</h3>
<p>
Apply the state previously taken via 'saveOriginalState' to the binding.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
A Track of boolean keyframe values.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] - (required) identifier for the KeyframeTrack.<br />
[page:Array times] - (required) array of keyframe times.<br />
[page:Array values] - values for the keyframes at the times specified.<br />
</p>
<h2>Properties</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited properties.
</p>
<h3>[property:Constant DefaultInterpolation]</h3>
<p>
The default interpolation type to use, [page:Animation InterpolateDiscrete].
</p>
<h3>[property:Array ValueBufferType]</h3>
<p>
A normal Array (no Float32Array in this case, unlike *ValueBufferType* of [page:KeyframeTrack]).
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'bool'.
</p>
<h2>Methods</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited methods.
</p>
<h3>[method:null InterpolantFactoryMethodLinear ]()</h3>
<p>
The value of this method here is 'undefined', as it does not make sense for discrete properties.
</p>
<h3>[method:null InterpolantFactoryMethodSmooth ]()</h3>
<p>
The value of this method here is 'undefined', as it does not make sense for discrete properties.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
A Track of keyframe values that represent color changes.<br /><br />
The very basic implementation of this subclass has nothing special yet. However, this is the place
for color space parameterization.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] - (required) identifier for the KeyframeTrack.<br />
[page:Array times] - (required) array of keyframe times.<br />
[page:Array values] - values for the keyframes at the times specified.<br />
[page:Constant interpolation] - the type of interpolation to use. See
[page:Animation Animation Constants] for possible values. Default is
[page:Animation InterpolateLinear].
</p>
<h2>Properties</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited properties.
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'color'.
</p>
<h2>Methods</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited methods.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
A Track of numeric keyframe values.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] - (required) identifier for the KeyframeTrack.<br />
[page:Array times] - (required) array of keyframe times.<br />
[page:Array values] - values for the keyframes at the times specified.<br />
[page:Constant interpolation] - the type of interpolation to use. See
[page:Animation Animation Constants] for possible values. Default is
[page:Animation InterpolateLinear].
</p>
<h2>Properties</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited properties.
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'number'.
</p>
<h2>Methods</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited methods.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
A Track of quaternion keyframe values.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] (required) identifier for the KeyframeTrack.<br />
[page:Array times] (required) array of keyframe times.<br />
[page:Array values] values for the keyframes at the times specified.<br />
[page:Constant interpolation] the type of interpolation to use. See
[page:Animation Animation Constants] for possible values. Default is
[page:Animation InterpolateLinear].
</p>
<h2>Properties</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited properties.
</p>
<h3>[property:Constant DefaultInterpolation]</h3>
<p>
The default interpolation type to use, [page:Animation InterpolateLinear].
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'quaternion'.
</p>
<h2>Methods</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited methods.
</p>
<h3>[method:null InterpolantFactoryMethodLinear]()</h3>
<p>
Returns a new [page:QuaternionLinearInterpolant QuaternionLinearInterpolant] based on the
[page:KeyframeTrack.values values], [page:KeyframeTrack.times times] and
[page:KeyframeTrack.valueSize valueSize] of the keyframes.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
A Track of string keyframe values.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] - (required) identifier for the KeyframeTrack.<br />
[page:Array times] - (required) array of keyframe times.<br />
[page:Array values] - values for the keyframes at the times specified.<br />
[page:Constant interpolation] - the type of interpolation to use. See
[page:Animation Animation Constants] for possible values. Default is
[page:Animation InterpolateDiscrete].
</p>
<h2>Properties</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited properties.
</p>
<h3>[property:Constant DefaultInterpolation]</h3>
<p>
The default interpolation type to use, [page:Animation InterpolateDiscrete].
</p>
<h3>[property:Array ValueBufferType]</h3>
<p>
A normal Array (no Float32Array in this case, unlike *ValueBufferType* of [page:KeyframeTrack]).
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'string'.
</p>
<h2>Methods</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited methods.
</p>
<h3>[method:null InterpolantFactoryMethodLinear]()</h3>
<p>
The value of this method here is 'undefined', as it does not make sense for discrete properties.
</p>
<h3>[method:null InterpolantFactoryMethodSmooth]()</h3>
<p>
The value of this method here is 'undefined', as it does not make sense for discrete properties.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
A Track of vector keyframe values.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] - (required) identifier for the KeyframeTrack.<br />
[page:Array times] - (required) array of keyframe times.<br />
[page:Array values] - values for the keyframes at the times specified.<br />
[page:Constant interpolation] - the type of interpolation to use. See
[page:Animation Animation Constants] for possible values. Default is
[page:Animation InterpolateLinear].
</p>
<h2>Properties</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited properties.
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'vector'.
</p>
<h2>Methods</h2>
<p class="desc">
See [page:KeyframeTrack] for inherited methods.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr;
<h1>[name]</h1>
<p class="desc">
Create a non-positional ( global ) audio object.<br /><br />
This uses the [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
</p>
<h2>Example</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]</br>
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<code>
// create an AudioListener and add it to the camera
var listener = new THREE.AudioListener();
camera.add( listener );
// create a global audio source
var sound = new THREE.Audio( listener );
// load a sound and set it as the Audio object's buffer
var audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setLoop( true );
sound.setVolume( 0.5 );
sound.play();
});
</code>
<h2>Constructor</h2>
<h3>[name]( [param:AudioListener listener] )</h3>
<p>
listener — (required) [page:AudioListener AudioListener] instance.
</p>
<h2>Properties</h2>
<h3>[property:Boolean autoplay]</h3>
<p>Whether to start playback automatically. Default is *false*.</p>
<h3>[property:AudioContext context]</h3>
<p>The [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext] of the [page:AudioListener listener] given in the constructor.</p>
<h3>[property:Array filters]</h3>
<p>Represents an array of [link:https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode BiquadFilterNodes]. Can be used to apply a variety of low-order filters to create more complex sound effects. Filters are set via [page:Audio.setFilter] or [page:Audio.setFilters].</p>
<h3>[property:GainNode gain]</h3>
<p>A [link:https://developer.mozilla.org/en-US/docs/Web/API/GainNode GainNode] created
using [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createGain AudioContext.createGain]().</p>
<h3>[property:Boolean hasPlaybackControl]</h3>
<p>Whether playback can be controlled using the [page:Audio.play play](),
[page:Audio.pause pause]() etc. methods. Default is *true*.</p>
<h3>[property:Number playbackRate]</h3>
<p>Speed of playback. Default is *1*.</p>
<h3>[property:Boolean isPlaying]</h3>
<p>Whether the audio is currently playing.</p>
<h3>[property:Number startTime]</h3>
<p>The time at which the sound should begin to play. Same as the *when* paramter of [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start](). Default is *0*.</p>
<h3>[property:Number offset]</h3>
<p>An offset to the time within the audio buffer that playback should begin. Same as the *offset* paramter of [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start](). Default is *0*.</p>
<h3>[property:String source]</h3>
<p>An [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode AudioBufferSourceNode] created
using [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createBufferSource AudioContext.createBufferSource]().</p>
<h3>[property:String sourceType]</h3>
<p>Type of the audio source. Default is string 'empty'.</p>
<h3>[property:String type]</h3>
<p>String denoting the type, set to 'Audio'.</p>
<h2>Methods</h2>
<h3>[method:Audio connect]()</h3>
<p>
Connect to the [page:Audio.source]. This is used internally on initialisation and when
setting / removing filters.
</p>
<h3>[method:Audio disconnect]()</h3>
<p>
Disconnect from the [page:Audio.source]. This is used internally when
setting / removing filters.
</p>
<h3>[method:BiquadFilterNode getFilter]()</h3>
<p>
Returns the first element of the [page:Audio.filters filters] array.
</p>
<h3>[method:Array getFilters]()</h3>
<p>
Returns the [page:Audio.filters filters] array.
</p>
<h3>[method:Boolean getLoop]()</h3>
<p>
Return the value of [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loop source.loop]
(whether playback should loop).
</p>
<h3>[method:GainNode getOutput]()</h3>
<p>
Return the [page:Audio.gain gainNode].
</p>
<h3>[method:Float getPlaybackRate]()</h3>
<p>
Return the value of [page:Audio.playbackRate playbackRate].
</p>
<h3>[method:Float getVolume]( value )</h3>
<p>
Return the current volume.
</p>
<h3>[method:Audio play]()</h3>
<p>
If [page:Audio.hasPlaybackControl hasPlaybackControl] is true, starts playback.
</p>
<h3>[method:Audio pause]()</h3>
<p>
If [page:Audio.hasPlaybackControl hasPlaybackControl] is true, pauses playback.
</p>
<h3>[method:null onEnded]()</h3>
<p>
Called automatically when playback finished. Sets If [page:Audio.isPlaying isPlaying] to false.
</p>
<h3>[method:Audio setBuffer]( audioBuffer )</h3>
<p>
Setup the [page:Audio.source source] to the audioBuffer, and sets [page:Audio.sourceType sourceType] to 'buffer'.<br />
If [page:Audio.autoplay autoplay], also starts playback.
</p>
<h3>[method:Audio setFilter]( filter )</h3>
<p>
Applies a single [link:https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode BiquadFilterNode] to the audio.
</p>
<h3>[method:Audio setFilters]( [param:Array value] )</h3>
<p>
value - arrays of filters.<br />
Applies an array of [link:https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode BiquadFilterNodes] to the audio.
</p>
<h3>[method:Audio setLoop]( [param:Boolean value] )</h3>
<p>
Set [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loop source.loop] to *value*
(whether playback should loop).
</p>
<h3>[method:Audio setMediaElementSource]( mediaElement )</h3>
<p>
Applies the given object of type [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement HTMLMediaElement] as the source of this audio.<br />
Also sets [page:Audio.hasPlaybackControl hasPlaybackControl] to false.
</p>
<h3>[method:Audio setNodeSource]( audioNode )</h3>
<p>
Setup the [page:Audio.source source] to the audioBuffer, and sets [page:Audio.sourceType sourceType] to 'audioNode'.<br />
Also sets [page:Audio.hasPlaybackControl hasPlaybackControl] to false.
</p>
<h3>[method:Audio setPlaybackRate]( [param:Float value] )</h3>
<p>
If [page:Audio.hasPlaybackControl hasPlaybackControl] is enabled, set the [page:Audio.playbackRate playbackRate] to *value*.
</p>
<h3>[method:Audio setVolume]( [param:Float value] )</h3>
<p>
Set the volume.
</p>
<h3>[method:Audio stop]()</h3>
<p>
If [page:Audio.hasPlaybackControl hasPlaybackControl] is enabled, stops playback,
resets [page:Audio.startTime startTime] to *0* and sets [page:Audio.isPlaying isPlaying] to false.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
Create a AudioAnalyser object, which uses an [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode AnalyserNode]
to analyse audio data.<br /><br />
This uses the [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
</p>
<h2>Example</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]</br>
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<code>
// create an AudioListener and add it to the camera
var listener = new THREE.AudioListener();
camera.add( listener );
// create an Audio source
var sound = new THREE.Audio( listener );
// load a sound and set it as the Audio object's buffer
var audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setLoop(true);
sound.setVolume(0.5);
sound.play();
});
// create an AudioAnalyser, passing in the sound and desired fftSize
var analyser = new THREE.AudioAnalyser( sound, 32 );
// get the average frequency of the sound
var data = analyser.getAverageFrequency();
</code>
<h2>Constructor</h2>
<h3>[name]( audio, [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize fftSize] )</h3>
<p>
Create a new [page:AudioAnalyser AudioAnalyser].
</p>
<h2>Properties</h2>
<h3>[property:AnalyserNode analyser]</h3>
<p>An [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode AnalyserNode] used to analyze audio.</p>
<h3>[property:Integer fftSize]</h3>
<p>
A non-zero power of two up to 2048, representing the size of the FFT (Fast Fourier Transform) to be used to determine the frequency domain.
See [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize this page] for details.
</p>
<h3>[property:Uint8Array data]</h3>
<p>
A Uint8Array with size determined by [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/frequencyBinCount analyser.frequencyBinCount]
used to hold analysis data.
</p>
<h2>Methods</h2>
<h3>[method:Uint8Array getFrequencyData]()</h3>
<p>
Uses the Web Audio's [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteFrequencyData getByteFrequencyData] method.
See that page.
</p>
<h3>[method:Number getAverageFrequency]()</h3>
<p>
Get the average of the frequencies returned by the [page:AudioAnalyser.getFrequencyData getFrequencyData] method.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
This contains methods for setting up an [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext].<br /><br />
Used internally by the [page:AudioListener AudioListener] and [page:AudioLoader AudioLoader] classes.<br /><br />
This uses the [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
</p>
<h2>Methods</h2>
<h3>[method:AudioContext getContext]()</h3>
<p>
Return the value of the variable *context* in the outer scope, if defined,
otherwise set it to a new [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext].
</p>
<h3>[method:AudioContext setContext]( [param:AudioConetxt value] )</h3>
<p>
Set the variable *context* in the outer scope to *value*.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr;
<h1>[name]</h1>
<p class="desc">
The [name] represents a virtual [link:https://developer.mozilla.org/de/docs/Web/API/AudioListener listener] of the all positional and non-positional audio effects in the scene.</br>
A three.js application usually creates a single instance of [name]. It is a mandatory construtor parameter for audios entities like [page:Audio Audio] and [page:PositionalAudio PositionalAudio].</br>
In most cases, the listener object is a child of the camera. So the 3D transformation of the camera represents the 3D transformation of the listener.
</p>
<h2>Example</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]</br>
[example:webaudio_timing webaudio / timing ]</br>
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<code>
// create an AudioListener and add it to the camera
var listener = new THREE.AudioListener();
camera.add( listener );
// create a global audio source
var sound = new THREE.Audio( listener );
// load a sound and set it as the Audio object's buffer
var audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setLoop(true);
sound.setVolume(0.5);
sound.play();
});
</code>
<h2>Constructor</h2>
<h3>[name]( )</h3>
<p>
Create a new AudioListener.
</p>
<h2>Properties</h2>
<h3>[property:AudioContext context]</h3>
<p>The [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext] of the [page:AudioListener listener] given in the constructor.</p>
<h3>[property:GainNode gain]</h3>
<p>A [link:https://developer.mozilla.org/en-US/docs/Web/API/GainNode GainNode] created
using [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createGain AudioContext.createGain]().</p>
<h3>[property:AudioNode filter]</h3>
<p>Default is *null*.</p>
<h2>Methods</h2>
<h3>[method:GainNode getInput]()</h3>
<p>
Return the [page:AudioListener.gain gainNode].
</p>
<h3>[method:AudioListener removeFilter]()</h3>
<p>
Set the [page:AudioListener.filter filter] property to *null*.
</p>
<h3>[method:AudioNode getFilter]()</h3>
<p>
Returns the value of the [page:AudioListener.filter filter] property.
</p>
<h3>[method:AudioListener setFilter]( [param:AudioNode value] )</h3>
<p>
Set the [page:AudioListener.filter filter] property to *value*.
</p>
<h3>[method:Float getMasterVolume]()</h3>
<p>
Return the volume.
</p>
<h3>[method:AudioListener setMasterVolume]( [param:Number value] )</h3>
<p>
Set the volume.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr; [page:Audio] &rarr;
<h1>[name]</h1>
<p class="desc">
Create a positional audio object.<br /><br />
This uses the [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
</p>
<h2>Example</h2>
<p>
[example:webaudio_orientation webaudio / orientation ]</br>
[example:webaudio_sandbox webaudio / sandbox ]</br>
[example:webaudio_timing webaudio / timing ]
</p>
<code>
// create an AudioListener and add it to the camera
var listener = new THREE.AudioListener();
camera.add( listener );
// create the PositionalAudio object (passing in the listener)
var sound = new THREE.PositionalAudio( listener );
// load a sound and set it as the PositionalAudio object's buffer
var audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/song.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setRefDistance( 20 );
sound.play();
});
// create an object for the sound to play from
var sphere = new THREE.SphereGeometry( 20, 32, 16 );
var material = new THREE.MeshPhongMaterial( { color: 0xff2200 } );
var mesh = new THREE.Mesh( sphere, material );
scene.add( mesh );
// finally add the sound to the mesh
mesh.add( sound );
</code>
<h2>Constructor</h2>
<h3>[name]( [param:AudioListener listener] )</h3>
<p>
listener — (required) [page:AudioListener AudioListener] instance.
</p>
<h2>Properties</h2>
<p>
See the [page:Audio Audio] class for inherited properties.
</p>
<h3>[property:PannerNode panner]</h3>
<p>The PositionalAudio's [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode PannerNode].</p>
<h2>Methods</h2>
<p>
See the [page:Audio Audio] class for inherited methods.
</p>
<h3>[method:PannerNode getOutput]()</h3>
<p>
Returns the [page:PositionalAudio.panner panner].
</p>
<h3>[method:Float getRefDistance]()</h3>
<p>
Returns the value of [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/refDistance panner.refDistance].
</p>
<h3>[method:PositionalAudio setRefDistance]( [param:Float value] )</h3>
<p>
Sets the value of [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/refDistance panner.refDistance].
</p>
<h3>[method:Float getRolloffFactor]()</h3>
<p>
Returns the value of [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/rolloffFactor panner.rolloffFactor].
</p>
<h3>[method:PositionalAudio setRolloffFactor]( [param:Float value] )</h3>
<p>
Sets the value of [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/rolloffFactor panner.rolloffFactor].
</p>
<h3>[method:String getDistanceModel]()</h3>
<p>
Returns the value of [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/distanceModel panner.distanceModel].
</p>
<h3>[method:PositionalAudio setDistanceModel]( [param:String value] )</h3>
<p>
Sets the value of [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/distanceModel panner.distanceModel].
</p>
<h3>[method:Float getMaxDistance]()</h3>
<p>
Returns the value of [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/maxDistance panner.maxDistance].
</p>
<h3>[method:PositionalAudio setMaxDistance]( [param:Float value] )</h3>
<p>
Sets the value of [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/maxDistance panner.maxDistance].
</p>
<h3>[method:PositionalAudio setDirectionalCone]( [param:Float coneInnerAngle], [param:Float coneOuterAngle], [param:Float coneOuterGain] )</h3>
<p>
This method can be used in order to transform an omnidirectional sound into a [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode directional sound].
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:PerspectiveCamera] &rarr;
<h1>[name]</h1>
<p class="desc">
[name] can be used in order to efficiently render a scene with a predefined set of cameras. This is an important performance aspect for rendering VR scenes.<br />
An instance of [name] always has an array of sub cameras. It's mandatory to define for each sub camera the *bounds* property which determines the part of the viewport that is rendered with this camera.
</p>
<h2>Example</h2>
<p>[example:webgl_camera_array camera / array ]</p>
<h2>Constructor</h2>
<h3>[name]( [param:Array array] )</h3>
<p>
An array of cameras.
</p>
<h2>Properties</h2>
<p>See the base [page:PerspectiveCamera] class for common properties.</p>
<h3>[property:Array cameras]</h3>
<p>
An array of cameras.
</p>
<h2>Methods</h2>
<p>See the base [page:PerspectiveCamera] class for common methods.</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr;
<h1>[name]</h1>
<p class="desc">
Abstract base class for cameras. This class should always be inherited when you build a new camera.
</p>
<h2>Constructor</h2>
<h3>[name]()</h3>
<p>
Creates a new [name]. Note that this class is not intended to be called directly;
you probably want a [page:PerspectiveCamera] or [page:OrthographicCamera] instead.
</p>
<h2>Properties</h2>
<p>See the base [page:Object3D] class for common properties.</p>
<h3>[property:Boolean isCamera]</h3>
<p>
Used to check whether this or derived classes are cameras. Default is *true*.<br /><br />
You should not change this, as it used internally by the renderer for optimisation.
</p>
<h3>[property:Layers layers]</h3>
<p>
The [page:Layers layers] that the camera is a member of. This is an inherited
property from [page:Object3D].<br /><br />
Objects must share at least one layer with the camera to be seen
when the camera's viewpoint is rendered.
</p>
<h3>[property:Matrix4 matrixWorldInverse]</h3>
<p>
This is the inverse of matrixWorld. MatrixWorld contains the Matrix which has
the world transform of the Camera.
</p>
<h3>[property:Matrix4 projectionMatrix]</h3>
<p>This is the matrix which contains the projection.</p>
<h3>[property:Matrix4 projectionMatrixInverse]</h3>
<p>The inverse of projectionMatrix.</p>
<h2>Methods</h2>
<p>See the base [page:Object3D] class for common methods.</p>
<h3>[method:Camera clone]( )</h3>
<p>
Return a new camera with the same properties as this one.
</p>
<h3>[method:Camera copy]( [param:Camera source], [param:Boolean recursive] )</h3>
<p>
Copy the properties from the source camera into this one.
</p>
<h3>[method:Vector3 getWorldDirection]( [param:Vector3 target] )</h3>
<p>
[page:Vector3 target] — the result will be copied into this Vector3. <br /><br />
Returns a [page:Vector3] representing the world space direction in which the camera is looking.
(Note: A camera looks down its local, negative z-axis).<br /><br />
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr;
<h1>[name]</h1>
<p class="desc">Creates 6 cameras that render to a [page:WebGLRenderTargetCube].</p>
<h2>Examples</h2>
<p>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</p>
<p>[example:webgl_materials_cubemap_dynamic2 materials / cubemap / dynamic2 ]</p>
<p>[example:webgl_shading_physical shading / physical ]</p>
<code>// Create cube camera
var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
scene.add( cubeCamera );
// Create car
var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget } );
var car = new Mesh( carGeometry, chromeMaterial );
scene.add( car );
// Update the render target cube
car.setVisible( false );
cubeCamera.position.copy( car.position );
cubeCamera.update( renderer, scene );
// Render the scene
car.setVisible( true );
renderer.render( scene, camera );
</code>
<h2>Constructor</h2>
<h3>[name]( [param:Number near], [param:Number far], [param:Number cubeResolution] )</h3>
<p>
near -- The near clipping distance. <br />
far -- The far clipping distance <br />
cubeResolution -- Sets the length of the cube's edges.
</p>
<p>
Constructs a CubeCamera that contains 6 [page:PerspectiveCamera PerspectiveCameras] that
render to a [page:WebGLRenderTargetCube].
</p>
<h2>Properties</h2>
<p>See the base [page:Object3D] class for common properties.</p>
<h3>[property:WebGLRenderTargetCube renderTarget]</h3>
<p>
The cube texture that gets generated.
</p>
<h2>Methods</h2>
<p>See the base [page:Object3D] class for common methods.</p>
<h3>[method:null update]( [param:WebGLRenderer renderer], [param:Scene scene] )</h3>
<p>
renderer -- The current WebGL renderer <br />
scene -- The current scene
</p>
<p>
Call this to update the [page:CubeCamera.renderTarget renderTarget].
</p>
<h3>[method:null clear]( [param:WebGLRenderer renderer], [param:Boolean color], [param:Boolean depth], [param:Boolean stencil] )</h3>
<p>
Call this to clear the [page:CubeCamera.renderTarget renderTarget] color, depth, and/or stencil buffers.
The color buffer is set to the renderer's current clear color. Arguments default to *true*.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr; [page:Camera] &rarr;
<h1>[name]</h1>
<p class="desc">
Camera that uses [link:https://en.wikipedia.org/wiki/Orthographic_projection orthographic projection].<br /><br />
In this projection mode, an object's size in the rendered image stays constant
regardless of its distance from the camera.<br /><br />
This can be useful for rendering 2D scenes and UI elements, amongst other things.
</p>
<h2>Example</h2>
<p>[example:canvas_camera_orthographic camera / orthographic ]</p>
<p>[example:webgl_camera camera ]</p>
<p>[example:webgl_interactive_cubes_ortho interactive / cubes / ortho ]</p>
<p>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</p>
<p>[example:webgl_postprocessing_advanced postprocessing / advanced ]</p>
<p>[example:webgl_postprocessing_dof2 postprocessing / dof2 ]</p>
<p>[example:webgl_postprocessing_godrays postprocessing / godrays ]</p>
<p>[example:webgl_rtt rtt ]</p>
<p>[example:webgl_shaders_tonemapping shaders / tonemapping ]</p>
<p>[example:webgl_shadowmap shadowmap ]</p>
<p>[example:webgl_terrain_dynamic terrain / dynamic ]</p>
<code>var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );</code>
<h2>Constructor</h2>
<h3>[name]( [param:Number left], [param:Number right], [param:Number top], [param:Number bottom], [param:Number near], [param:Number far] )</h3>
<p>
left — Camera frustum left plane.<br />
right — Camera frustum right plane.<br />
top — Camera frustum top plane.<br />
bottom — Camera frustum bottom plane.<br />
near — Camera frustum near plane.<br />
far — Camera frustum far plane.<br /><br />
Together these define the camera's [link:https://en.wikipedia.org/wiki/Viewing_frustum viewing frustum].
</p>
<h2>Properties</h2>
<p>
See the base [page:Camera] class for common properties.<br>
Note that after making changes to most of these properties you will have to call
[page:OrthographicCamera.updateProjectionMatrix .updateProjectionMatrix] for the changes to take effect.
</p>
<h3>[property:Float bottom]</h3>
<p>Camera frustum bottom plane.</p>
<h3>[property:Float far]</h3>
<p>
Camera frustum far plane. Default is *2000*.<br /><br />
The valid range is between the current value of the [page:.near near] plane and infinity.
</p>
<h3>[property:Boolean isOrthographicCamera]</h3>
<p>
Used to test whether this or derived classes are OrthographicCameras. Default is *true*.<br /><br />
This should not be changed as it is used internally by the renderer for optimisation.
</p>
<h3>[property:Float left]</h3>
<p>Camera frustum left plane.</p>
<h3>[property:Float near]</h3>
<p>
Camera frustum near plane. Default is *0.1*.<br /><br />
The valid range is between 0 and the current value of the [page:.far far] plane.
Note that, unlike for the [page:PerspectiveCamera], *0* is a valid value for an
OrthographicCamera's near plane.
</p>
<h3>[property:Float right]</h3>
<p>Camera frustum right plane.</p>
<h3>[property:Float top]</h3>
<p>Camera frustum top plane.</p>
<h3>[property:Object view]</h3>
<p>Set by [page:OrthographicCamera.setViewOffset setViewOffset]. Default is *null*.</p>
<h3>[property:number zoom]</h3>
<p>Gets or sets the zoom factor of the camera. Default is *1*.</p>
<h2>Methods</h2>
<p>See the base [page:Camera] class for common methods.</p>
<h3>[method:null setViewOffset]( [param:Float fullWidth], [param:Float fullHeight], [param:Float x], [param:Float y], [param:Float width], [param:Float height] )</h3>
<p>
fullWidth — full width of multiview setup<br />
fullHeight — full height of multiview setup<br />
x — horizontal offset of subcamera<br />
y — vertical offset of subcamera<br />
width — width of subcamera<br />
height — height of subcamera<br /><br />
Sets an offset in a larger [link:https://en.wikipedia.org/wiki/Viewing_frustum viewing frustum].
This is useful for multi-window or multi-monitor/multi-machine setups.
For an example on how to use it see [page:PerspectiveCamera.setViewOffset PerspectiveCamera].
</p>
<h3>[method:null clearViewOffset]()</h3>
<p>
Removes any offset set by the .setViewOffset method.
</p>
<h3>[method:null updateProjectionMatrix]()</h3>
<p>
Updates the camera projection matrix. Must be called after any change of parameters.
</p>
<h3>[method:JSON toJSON]()</h3>
<p>
Return the camera's data in JSON format.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr; [page:Camera] &rarr;
<h1>[name]</h1>
<p class="desc">
Camera that uses [link:https://en.wikipedia.org/wiki/Perspective_(graphical) perspective projection].<br /><br />
This projection mode is designed to mimic the way the human eye sees. It is the most
common projection mode used for rendering a 3D scene.
</p>
<h2>Example</h2>
<p>[example:canvas_geometry_birds geometry / birds ]</p>
<p>[example:canvas_geometry_cube geometry / cube ]</p>
<p>[example:webgl_animation_skinning_blending animation / skinning / blending ]</p>
<p>[example:webgl_animation_skinning_morph animation / skinning / blending ]</p>
<p>[example:webgl_effects_stereo effects / stereo ]</p>
<p>[example:webgl_interactive_cubes interactive / cubes ]</p>
<p>[example:webgl_loader_collada_skinning loader / collada / skinning ]</p>
<code>var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );</code>
<h2>Constructor</h2>
<h3>[name]( [param:Number fov], [param:Number aspect], [param:Number near], [param:Number far] )</h3>
<p>
fov — Camera frustum vertical field of view.<br />
aspect — Camera frustum aspect ratio.<br />
near — Camera frustum near plane.<br />
far — Camera frustum far plane.<br /><br />
Together these define the camera's [link:https://en.wikipedia.org/wiki/Viewing_frustum viewing frustum].
</p>
<h2>Properties</h2>
<p>
See the base [page:Camera] class for common properties.<br>
Note that after making changes to most of these properties you will have to call
[page:PerspectiveCamera.updateProjectionMatrix .updateProjectionMatrix] for the changes to take effect.
</p>
<h3>[property:Float aspect]</h3>
<p>Camera frustum aspect ratio, usually the canvas width / canvas height. Default is *1* (square canvas).</p>
<h3>[property:Float far]</h3>
<p>
Camera frustum far plane. Default is *2000*.<br /><br />
The valid range is between the current value of the [page:.near near] plane and infinity.
</p>
<h3>[property:Float filmGauge]</h3>
<p>Film size used for the larger axis. Default is 35 (millimeters). This parameter does not influence the projection matrix unless .filmOffset is set to a nonzero value.</p>
<h3>[property:Float filmOffset]</h3>
<p>Horizontal off-center offset in the same unit as .filmGauge. Default is *0*.</p>
<h3>[property:Float focus]</h3>
<p>Object distance used for stereoscopy and depth-of-field effects.
This parameter does not influence the projection matrix unless a [page:StereoCamera] is being used.
Default is *10*.
</p>
<h3>[property:Float fov]</h3>
<p>Camera frustum vertical field of view, from bottom to top of view, in degrees. Default is *50*.</p>
<h3>[property:Boolean isPerspectiveCamera]</h3>
<p>
Used to test whether this or derived classes are PerspectiveCameras. Default is *true*.<br /><br />
This should not be changed as it is used internally by the renderer for optimisation.
</p>
<h3>[property:Float near]</h3>
<p>
Camera frustum near plane. Default is *0.1*.<br /><br />
The valid range is greater than 0 and less than the current value of the [page:.far far] plane.
Note that, unlike for the [page:OrthographicCamera], *0* is <em>not</em> a valid value
for a PerspectiveCamera's near plane.
</p>
<h3>[property:Object view]</h3>
<p>
Frustum window specification or null.
This is set using the [page:PerspectiveCamera.setViewOffset .setViewOffset] method
and cleared using [page:PerspectiveCamera.clearViewOffset .clearViewOffset].
</p>
<h3>[property:number zoom]</h3>
<p>Gets or sets the zoom factor of the camera. Default is *1*.</p>
<h2>Methods</h2>
<p>See the base [page:Camera] class for common methods.</p>
<h3>[method:null clearViewOffset]()</h3>
<p>Removes any offset set by the [page:PerspectiveCamera.setViewOffset .setViewOffset] method.</p>
<h3>[method:Float getEffectiveFOV]()</h3>
<p>Returns the current vertical field of view angle in degrees considering .zoom.</p>
<h3>[method:Float getFilmHeight]()</h3>
<p>
Returns the height of the image on the film. If .aspect is less than or equal to one
(portrait format), the result equals .filmGauge.
</p>
<h3>[method:Float getFilmWidth]()</h3>
<p>
Returns the width of the image on the film. If .aspect is greater than or equal to one
(landscape format), the result equals .filmGauge.
</p>
<h3>[method:Float getFocalLength]()</h3>
<p>Returns the focal length of the current .fov in respect to .filmGauge.</p>
<h3>[method:null setFocalLength]( [param:Float focalLength] )</h3>
<p>
Sets the FOV by focal length in respect to the current [page:PerspectiveCamera.filmGauge .filmGauge].<br /><br />
By default, the focal length is specified for a 35mm (full frame) camera.
</p>
<h3>[method:null setViewOffset]( [param:Float fullWidth], [param:Float fullHeight], [param:Float x], [param:Float y], [param:Float width], [param:Float height] )</h3>
<p>
fullWidth — full width of multiview setup<br />
fullHeight — full height of multiview setup<br />
x — horizontal offset of subcamera<br />
y — vertical offset of subcamera<br />
width — width of subcamera<br />
height — height of subcamera
</p>
<p>
Sets an offset in a larger frustum. This is useful for multi-window or multi-monitor/multi-machine setups.
</p>
<p>
For example, if you have 3x2 monitors and each monitor is 1920x1080 and the monitors are in grid like this:<br />
<pre>
+---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+
</pre>
then for each monitor you would call it like this:<br />
<code>var w = 1920;
var h = 1080;
var fullWidth = w * 3;
var fullHeight = h * 2;
// A
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
// B
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
// C
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
// D
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
// E
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
// F
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
</code>
Note there is no reason monitors have to be the same size or in a grid.
</p>
<h3>[method:null updateProjectionMatrix]()</h3>
<p>
Updates the camera projection matrix. Must be called after any change of parameters.
</p>
<h3>[method:JSON toJSON]()</h3>
<p>
Return camera data in JSON format.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
Dual [page:PerspectiveCamera PerspectiveCamera]s used for effects such as
[link:https://en.wikipedia.org/wiki/Anaglyph_3D 3D Anaglyph] or [link:https://en.wikipedia.org/wiki/parallax_barrier Parallax Barrier].
</p>
<h2>Example</h2>
<p>[example:webgl_effects_anaglyph effects / anaglyph ]</p>
<p>[example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]</p>
<p>[example:webgl_effects_stereo effects / stereo ]</p>
<p>
This class is used internally in the files<br /><br />
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/effects/AnaglyphEffect.js examples/js/effects/AnaglyphEffect.js]<br /><br />
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/effects/ParallaxBarrierEffect.js examples/js/effects/ParallaxBarrierEffect.js]<br /><br />
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/effects/StereoEffect.js examples/js/effects/StereoEffect.js]<br /><br />
used in the above examples.
</p>
<h2>Constructor</h2>
<h3>[name]( )</h3>
<h2>Properties</h2>
<h3>[property:Float aspect]</h3>
<p>Default is *1*.</p>
<h3>[property:Float eyeSep]</h3>
<p>Default is *0.064*.</p>
<h3>[property:PerspectiveCamera cameraL]</h3>
<p>Left camera. This is added to [page:Layers layer 1] - objects to be rendered
by the left camera must also be added to this layer.</p>
<h3>[property:PerspectiveCamera cameraR]</h3>
<p>Right camera.This is added to [page:Layers layer 2] - objects to be rendered
by the right camera must also be added to this layer.</p>
<h2>Methods</h2>
<h3>[method:null update]( [param:PerspectiveCamera camera] )</h3>
<p>
Update the stereo cameras based on the camera passed in.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>Animation Constants</h1>
<h2>Loop Modes</h2>
<code>
THREE.LoopOnce
THREE.LoopRepeat
THREE.LoopPingPong
</code>
<h2>Interpolation Modes</h2>
<code>
THREE.InterpolateDiscrete
THREE.InterpolateLinear
THREE.InterpolateSmooth
</code>
<h2>Ending Modes</h2>
<code>
THREE.ZeroCurvatureEnding
THREE.ZeroSlopeEnding
THREE.WrapAroundEnding
</code>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>Core Constants</h1>
<h2>Revision Number</h2>
<code>
THREE.REV
</code>
<div id="rev">
The current three.js [link:https://github.com/mrdoob/three.js/releases revision number].
</div>
<h2>Mouse Buttons</h2>
<code>
THREE.MOUSE.LEFT
THREE.MOUSE.MIDDLE
THREE.MOUSE.RIGHT
</code>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>Custom Blending Equation Constants</h1>
<h2>Example</h2>
<p>[example:webgl_materials_blending_custom materials / blending / custom ]</p>
<h2>Usage</h2>
<p>
These work with all material types. First set the material's blending mode to THREE.CustomBlending, then set the desired Blending Equation, Source Factor and Destination Factor.
</p>
<code>
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
material.blending = THREE.CustomBlending;
material.blendEquation = THREE.AddEquation; //default
material.blendSrc = THREE.SrcAlphaFactor; //default
material.blendDst = THREE.OneMinusSrcAlphaFactor; //default
</code>
<h2>Blending Equations</h2>
<code>
THREE.AddEquation
THREE.SubtractEquation
THREE.ReverseSubtractEquation
THREE.MinEquation
THREE.MaxEquation
</code>
<h2>Source Factors</h2>
<code>
THREE.ZeroFactor
THREE.OneFactor
THREE.SrcColorFactor
THREE.OneMinusSrcColorFactor
THREE.SrcAlphaFactor
THREE.OneMinusSrcAlphaFactor
THREE.DstAlphaFactor
THREE.OneMinusDstAlphaFactor
THREE.DstColorFactor
THREE.OneMinusDstColorFactor
THREE.SrcAlphaSaturateFactor
</code>
<h2>Destination Factors</h2>
<p>
All of the Source Factors are valid as Destination Factors, except for <code>THREE.SrcAlphaSaturateFactor</code>
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>Draw Mode Constants</h1>
<p class="desc">
These are valid values for [page:Mesh.drawMode], and control how the list of vertices is interpeted once sent to the GPU.<br /><br />
Note that these only work when [page:Mesh.geometry] is a [page:BufferGeometry]. Changing this
when [page:Mesh.geometry] is a [page:Geometry] will have no effect.<br /><br />
</p>
<h2>Draw Modes</h2>
<code>
THREE.TrianglesDrawMode
</code>
<p>
This is the default, and results in every three consecutive vertices (v0, v1, v2), (v2, v3, v5), ...
being interpreted as a separate triangle. <br />
If the number of vertices is not a multiple of 3, excess vertices are ignored.
</p>
<code>
THREE.TriangleStripDrawMode
</code>
<p>
This will result in a series of triangles connected in a strip, given by (v0, v1, v2), (v2, v1, v3), (v2, v3, v4), ...
so that every subsequent triangle shares two vertices with the previous triangle.
</p>
<code>
THREE.TriangleFanDrawMode
</code>
<p>
This will result in a series of triangles each sharing the first vertex (like a fan),
given by (v0, v1, v2), (v0, v2, v3), (v0, v3, v4), ... <br /><br />
<em>Note:</em> As of [link:https://en.wikipedia.org/wiki/DirectX#DirectX_10 DirectX10], this mode is not supported. As Chrome and Firefox
render WebGL using [link:https://en.wikipedia.org/wiki/ANGLE_(software) ANGLE] on Windows,
internally this mode will be converted to a supported mode, which will likely lead to lowered
performance on those browsers.
</p>
<h2>Usage</h2>
<code>
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( -10, 10, 0 ),
new THREE.Vector3( -10, -10, 0 ),
new THREE.Vector3( 10, -10, 0 ),
...
);
geometry.faces.push( new THREE.Face3( 0, 1, 2 ), ... );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var mesh = new THREE.Mesh( geometry, material );
mesh.drawMode = THREE.TrianglesDrawMode; //default
scene.add( mesh );
</code>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>Material Constants</h1>
<p class="desc">
These constants define properties common to all material types,
with the exception of Texture Combine Operations which only apply to [page:MeshBasicMaterial.combine MeshBasicMaterial], [page:MeshLambertMaterial.combine MeshLambertMaterial] and [page:MeshPhongMaterial.combine MeshPhongMaterial].<br />
</p>
<h2>Side</h2>
<code>
THREE.FrontSide
THREE.BackSide
THREE.DoubleSide
</code>
<p>
Defines which side of faces will be rendered - front, back or both.
Default is [page:Constant FrontSide].
</p>
<h2>Colors</h2>
<code>
THREE.NoColors
THREE.FaceColors
THREE.VertexColors
</code>
<p>
[page:Constant NoColors] is the default and applies the material's color to all faces.<br />
[page:Constant FaceColors] colors faces according to each [page:Face3 Face3] [page:Color Color] value.<br />
[page:Constant VertexColors] colors faces according to each [page:Face3 Face3] vertexColors value. This is an array of three [page:Color Color]s, one for each vertex in the face.<br />
See the [example:webgl_geometry_colors geometry / colors] example.
</p>
<h2>Blending Mode</h2>
<code>
THREE.NoBlending
THREE.NormalBlending
THREE.AdditiveBlending
THREE.SubtractiveBlending
THREE.MultiplyBlending
THREE.CustomBlending
</code>
<p>
These control the source and destination blending equations for the material's RGB and Alpha sent to the WebGLRenderer for use by WebGL.<br />
[page:Constant NormalBlending] is the default.<br />
Note that [page:Constant CustomBlending] must be set to use [page:CustomBlendingEquation Custom Blending Equations].<br />
See the [example:webgl_materials_blending materials / blending] example.<br />
</p>
<h2>Depth Mode</h2>
<code>
THREE.NeverDepth
THREE.AlwaysDepth
THREE.LessDepth
THREE.LessEqualDepth
THREE.GreaterEqualDepth
THREE.GreaterDepth
THREE.NotEqualDepth
</code>
<p>
Which depth function the material uses to compare incoming pixels Z-depth against the current Z-depth buffer value. If the result of the comparison is true, the pixel will be drawn.<br />
[page:Materials NeverDepth] will never return true.<br />
[page:Materials AlwaysDepth] will always return true.<br />
[page:Materials LessDepth] will return true if the incoming pixel Z-depth is less than the current buffer Z-depth.<br />
[page:Materials LessEqualDepth] is the default and will return true if the incoming pixel Z-depth is less than or equal to the current buffer Z-depth.<br />
[page:Materials GreaterEqualDepth] will return true if the incoming pixel Z-depth is greater than or equal to the current buffer Z-depth.<br />
[page:Materials GreaterDepth] will return true if the incoming pixel Z-depth is greater than the current buffer Z-depth.<br />
[page:Materials NotEqualDepth] will return true if the incoming pixel Z-depth is not equal to the current buffer Z-depth.<br />
</p>
<h2>Texture Combine Operations</h2>
<code>
THREE.MultiplyOperation
THREE.MixOperation
THREE.AddOperation
</code>
<p>
These define how the result of the surface's color is combined with the environment map (if present), for [page:MeshBasicMaterial.combine MeshBasicMaterial], [page:MeshLambertMaterial.combine MeshLambertMaterial] and [page:MeshPhongMaterial.combine MeshPhongMaterial]. <br />
[page:Constant MultiplyOperation] is the default and multiplies the environment map color with the surface color.<br />
[page:Constant MixOperation] uses reflectivity to blend between the two colors.<br />
[page:Constant AddOperation] adds the two colors.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>WebGLRenderer Constants</h1>
<h2>Cull Face Modes</h2>
<code>
THREE.CullFaceNone
THREE.CullFaceBack
THREE.CullFaceFront
THREE.CullFaceFrontBack
</code>
<p>
[page:constant CullFaceNone] disables face culling.<br />
[page:constant CullFaceBack] culls back faces (default).<br />
[page:constant CullFaceFront] culls front faces.<br />
[page:constant CullFaceFrontBack] culls both front and back faces.
</p>
<h2>Front Face Direction</h2>
<code>
THREE.FrontFaceDirectionCW
THREE.FrontFaceDirectionCCW
</code>
<p>
[page:constant FrontFaceDirectionCW] sets the winding order for polygons to clockwise.<br />
[page:constant FrontFaceDirectionCCW] sets the winding order for polygons to counter-clockwise (default).
</p>
<h2>Shadow Types</h2>
<code>
THREE.BasicShadowMap
THREE.PCFShadowMap
THREE.PCFSoftShadowMap
</code>
<p>
These define the WebGLRenderer's [page:WebGLRenderer.shadowMap.type shadowMap.type] property.<br /><br />
[page:constant BasicShadowMap] gives unfiltered shadow maps - fastest, but lowest quality.<br />
[page:constant PCFShadowMap] filters shadow maps using the Percentage-Closer Filtering (PCF) algorithm (default).<br />
[page:constant PCFSoftShadowMap] filters shadow maps using the Percentage-Closer Soft Shadows (PCSS) algorithm.
</p>
<h2>Tone Mapping</h2>
<code>
THREE.NoToneMapping
THREE.LinearToneMapping
THREE.ReinhardToneMapping
THREE.Uncharted2ToneMapping
THREE.CineonToneMapping
</code>
<p>
These define the WebGLRenderer's [page:WebGLRenderer.toneMapping toneMapping] property.
This is used to approximate the appearance of high dynamic range (HDR) on the
low dynamic range medium of a standard computer monitor or mobile device's screen.<br /><br />
[page:constant NoToneMapping] disables tone mapping.<br />
[page:constant LinearToneMapping] is the default.<br /><br />
See the [example:webgl_tonemapping WebGL / tonemapping] example.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>Texture Constants</h1>
<h2>Mapping Modes</h2>
<code>
THREE.UVMapping
THREE.CubeReflectionMapping
THREE.CubeRefractionMapping
THREE.EquirectangularReflectionMapping
THREE.EquirectangularRefractionMapping
THREE.SphericalReflectionMapping
THREE.CubeUVReflectionMapping
THREE.CubeUVRefractionMapping
</code>
<p>
These define the texture's mapping mode.<br />
[page:Constant UVMapping] is the default, and maps the texture using the mesh's UV coordinates.<br /><br />
The rest define environment mapping types.<br /><br />
[page:Constant CubeReflectionMapping] and [page:Constant CubeRefractionMapping] are for
use with a [page:CubeTexture CubeTexture], which is made up of six textures, one for each face of the cube.
[page:Constant CubeReflectionMapping] is the default for a [page:CubeTexture CubeTexture]. <br /><br />
[page:Constant EquirectangularReflectionMapping] and [page:Constant EquirectangularRefractionMapping]
are for use with an equirectangular environment map. Also called a lat-long map, an equirectangular
texture represents a 360-degree view along the horizontal centerline, and a 180-degree view along the
vertical axis, with the top and bottom edges of the image corresponding to the north and south poles
of a mapped sphere.<br /><br />
[page:Constant SphericalReflectionMapping] is for use with a spherical reflection map such as may be obtained
by cropping a photograph of a mirrored ball. Sphere maps will be rendered "facing" the camera, irrespective
of the position of the camera relative to the cubemapped object or surface.<br /><br />
See the [example:webgl_materials_envmaps materials / envmaps] example.
</p>
<h2>Wrapping Modes</h2>
<code>
THREE.RepeatWrapping
THREE.ClampToEdgeWrapping
THREE.MirroredRepeatWrapping
</code>
<p>
These define the texture's [page:Texture.wrapS wrapS] and [page:Texture.wrapT wrapT] properties,
which define horizontal and vertical texture wrapping.<br /><br />
With [page:constant RepeatWrapping] the texture will simply repeat to infinity.<br /><br />
[page:constant ClampToEdgeWrapping] is the default.
The last pixel of the texture stretches to the edge of the mesh.<br /><br />
With [page:constant MirroredRepeatWrapping] the texture will repeats to infinity, mirroring on each repeat.
</p>
<h2>Magnification Filters</h2>
<code>
THREE.NearestFilter
THREE.LinearFilter
</code>
<p>
For use with a texture's [page:Texture.magFilter magFilter] property,
these define the texture magnification function to be used when the pixel being textured maps to an
area less than or equal to one texture element (texel).<br /><br />
[page:constant NearestFilter] returns the value of the texture element that is nearest
(in Manhattan distance) to the specified texture coordinates.<br /><br />
[page:constant LinearFilter] is the default and returns the weighted average
of the four texture elements that are closest to the specified texture coordinates,
and can include items wrapped or repeated from other parts of a texture,
depending on the values of [page:Texture.wrapS wrapS] and [page:Texture.wrapT wrapT], and on the exact mapping.
</p>
<h2>Minification Filters</h2>
<code>
THREE.NearestFilter
THREE.NearestMipMapNearestFilter
THREE.NearestMipMapLinearFilter
THREE.LinearFilter
THREE.LinearMipMapNearestFilter
THREE.LinearMipMapLinearFilter
</code>
<p>
For use with a texture's [page:Texture.minFilter minFilter] property, these define
the texture minifying function that is used whenever the pixel being textured maps
to an area greater than one texture element (texel).<br /><br />
In addition to [page:constant NearestFilter] and [page:constant LinearFilter],
the following four functions can be used for minification:<br /><br />
[page:constant NearestMipMapNearestFilter] chooses the mipmap that most closely
matches the size of the pixel being textured
and uses the [page:constant NearestFilter] criterion (the texel nearest to the
center of the pixel) to produce a texture value.<br /><br />
[page:constant NearestMipMapLinearFilter] chooses the two mipmaps that most closely
match the size of the pixel being textured and uses the [page:constant NearestFilter] criterion to produce
a texture value from each mipmap. The final texture value is a weighted average of those two values.<br /><br />
[page:constant LinearMipMapNearestFilter] chooses the mipmap that most closely matches
the size of the pixel being textured and uses the [page:constant LinearFilter] criterion
(a weighted average of the four texels that are closest to the center of the pixel)
to produce a texture value.<br /><br />
[page:constant LinearMipMapLinearFilter] is the default and chooses the two mipmaps
that most closely match the size of the pixel being textured and uses the [page:constant LinearFilter] criterion
to produce a texture value from each mipmap. The final texture value is a weighted average of those two values.<br /><br />
See the [example:webgl_materials_texture_filters materials / texture / filters] example.
</p>
<h2>Types</h2>
<code>
THREE.UnsignedByteType
THREE.ByteType
THREE.ShortType
THREE.UnsignedShortType
THREE.IntType
THREE.UnsignedIntType
THREE.FloatType
THREE.HalfFloatType
THREE.UnsignedShort4444Type
THREE.UnsignedShort5551Type
THREE.UnsignedShort565Type
THREE.UnsignedInt248Type
</code>
<p>
For use with a texture's [page:Texture.type type] property, which must correspond to the correct format. See below for details.<br /><br />
[page:constant UnsignedByteType] is the default.
</p>
<h2>Formats</h2>
<code>
THREE.AlphaFormat
THREE.RGBFormat
THREE.RGBAFormat
THREE.LuminanceFormat
THREE.LuminanceAlphaFormat
THREE.RGBEFormat
THREE.DepthFormat
THREE.DepthStencilFormat
</code>
<p>
For use with a texture's [page:Texture.format format] property, these define
how elements of a 2d texture, or *texels*, are read by shaders.<br /><br />
[page:constant AlphaFormat] discards the red, green and blue components and reads just the alpha component.<br /><br />
[page:constant RGBFormat] discards the alpha components and reads the red, green and blue components.<br /><br />
[page:constant RGBAFormat] is the default and reads the red, green, blue and alpha components.<br /><br />
[page:constant LuminanceFormat] reads each element as a single luminance component.
This is then converted to a floating point, clamped to the range [0,1], and then assembled
into an RGBA element by placing the luminance value in the red, green and blue channels,
and attaching 1.0 to the alpha channel.<br /><br />
[page:constant LuminanceAlphaFormat] reads each element as a luminance/alpha double.
The same process occurs as for the [page:constant LuminanceFormat], except that the
alpha channel may have values other than *1.0*.<br /><br />
[page:constant RGBEFormat] is identical to [page:constant RGBAFormat].<br /><br />
[page:constant DepthFormat] reads each element as a single depth value, converts it to floating point, and clamps to the range [0,1].
This is the default for [page:DepthTexture DepthTexture].<br /><br />
[page:constant DepthStencilFormat] reads each element is a pair of depth and stencil values.
The depth component of the pair is interpreted as in [page:constant DepthFormat].
The stencil component is interpreted based on the depth + stencil internal format.
<br /><br />
Note that the texture must have the correct [page:Texture.type type] set, as described above.
See [link:https://developer.mozilla.org/en/docs/Web/API/WebGLRenderingContext/texImage2D WebGLRenderingContext.texImage2D] for details.
</p>
<h2>DDS / ST3C Compressed Texture Formats</h2>
<code>
THREE.RGB_S3TC_DXT1_Format
THREE.RGBA_S3TC_DXT1_Format
THREE.RGBA_S3TC_DXT3_Format
THREE.RGBA_S3TC_DXT5_Format
</code>
<p>
For use with a [page:CompressedTexture CompressedTexture]'s [page:Texture.format format] property,
these require support for the
[link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/ WEBGL_compressed_texture_s3tc]
extension. <br /><br />
There are four [link:https://en.wikipedia.org/wiki/S3_Texture_Compression S3TC] formats available via this extension. These are:<br />
[page:constant RGB_S3TC_DXT1_Format]: A DXT1-compressed image in an RGB image format.<br />
[page:constant RGBA_S3TC_DXT1_Format]: A DXT1-compressed image in an RGB image format with a simple on/off alpha value.<br />
[page:constant RGBA_S3TC_DXT3_Format]: A DXT3-compressed image in an RGBA image format. Compared to a 32-bit RGBA texture, it offers 4:1 compression.<br />
[page:constant RGBA_S3TC_DXT5_Format]: A DXT5-compressed image in an RGBA image format. It also provides a 4:1 compression, but differs to the DXT3 compression in how the alpha compression is done.<br />
</p>
<h2>PVRTC Compressed Texture Formats</h2>
<code>
THREE.RGB_PVRTC_4BPPV1_Format
THREE.RGB_PVRTC_2BPPV1_Format
THREE.RGBA_PVRTC_4BPPV1_Format
THREE.RGBA_PVRTC_2BPPV1_Format
</code>
<p>
For use with a [page:CompressedTexture CompressedTexture]'s [page:Texture.format format] property,
these require support for the [link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/ WEBGL_compressed_texture_pvrtc]
extension. <br />
PVRTC is typically only available on mobile devices with PowerVR chipsets, which are mainly Apple devices.<br /><br />
There are four [link:https://en.wikipedia.org/wiki/PVRTC PVRTC] formats available via this extension. These are:<br />
[page:constant RGB_PVRTC_4BPPV1_Format]: RGB compression in 4-bit mode. One block for each 4×4 pixels.<br />
[page:constant RGB_PVRTC_2BPPV1_Format]: RGB compression in 2-bit mode. One block for each 8×4 pixels.<br />
[page:constant RGBA_PVRTC_4BPPV1_Format]: RGBA compression in 4-bit mode. One block for each 4×4 pixels.<br />
[page:constant RGBA_PVRTC_2BPPV1_Format]: RGBA compression in 2-bit mode. One block for each 8×4 pixels.<br />
</p>
<h2>ETC Compressed Texture Format</h2>
<code>
THREE.RGB_ETC1_Format
</code>
<p>
For use with a [page:CompressedTexture CompressedTexture]'s [page:Texture.format format] property,
these require support for the [link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/ WEBGL_compressed_texture_etc1]
extension. <br /><br />
</p>
<h2>Encoding</h2>
<code>
THREE.LinearEncoding
THREE.sRGBEncoding
THREE.GammaEncoding
THREE.RGBEEncoding
THREE.LogLuvEncoding
THREE.RGBM7Encoding
THREE.RGBM16Encoding
THREE.RGBDEncoding
THREE.BasicDepthPacking
THREE.RGBADepthPacking
</code>
<p>
For use with a Texture's [page:Texture.encoding encoding] property.<br /><br />
If the encoding type is changed after the texture has already been used by a material,
you will need to set [page:Material.needsUpdate Material.needsUpdate] to *true* to make the material recompile.<br /><br />
[page:constant LinearEncoding] is the default.
Values other than this are only valid for a material's map, envMap and emissiveMap.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
This class stores data for an attribute (such as vertex positions, face indices, normals,
colors, UVs, and any custom attributes ) associated with a [page:BufferGeometry], which allows
for more efficient passing of data to the GPU. See that page for details and a usage example.<br /><br />
Data is stored as vectors of any length (defined by [page:BufferAttribute.itemSize itemSize]),
and in general in the methods outlined below if passing in an index, this is automatically
multiplied by the vector length.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:TypedArray array], [param:Integer itemSize], [param:Boolean normalized] )</h3>
<p>
[page:TypedArray array] -- Must be a [link:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/TypedArray TypedArray].
Used to instantiate the buffer. <br />
This array should have
<code>itemSize * numVertices</code>
elements, where numVertices is the number of vertices in the associated [page:BufferGeometry BufferGeometry].<br /><br />
[page:Integer itemSize] -- the number of values of the array that should be associated with
a particular vertex. For instance, if this
attribute is storing a 3-component vector (such as a position, normal, or color), then itemSize should be 3.
<br /><br />
[page:Boolean normalized] -- (optional) Indicates how the underlying data in the buffer maps
to the values in the GLSL code. For instance, if [page:TypedArray array] is an instance of
UInt16Array, and [page:Boolean normalized] is true, the values 0 - +65535 in the array
data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map
from -32767 - +32767 to -1.0f - +1.0f. If [page:Boolean normalized] is false, the values
will be converted to floats which contain the exact value, i.e. 32767 becomes 32767.0f.
</p>
<h2>Properties</h2>
<h3>[property:TypedArray array]</h3>
<p>
The [page:TypedArray array] holding data stored in the buffer.
</p>
<h3>[property:Integer count]</h3>
<p>
Stores the [page:BufferAttribute.array array]'s length divided by the [page:BufferAttribute.itemSize itemSize].<br /><br />
If the buffer is storing a 3-component vector (such as a position, normal, or color),
then this will count the number of such vectors stored.
</p>
<h3>[property:Boolean dynamic]</h3>
<p>
Whether the buffer is dynamic or not. Default is *false*.<br />
If false, the GPU is informed that contents of the buffer are likely to be used often and not change often.
This corresponds to the [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData gl.STATIC_DRAW] flag.<br />
if true, the GPU is informed that contents of the buffer are likely to be used often and change often.
This corresponds to the [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData gl.DYNAMIC_DRAW] flag.
</p>
<h3>[property:Boolean isBufferAttribute]</h3>
<p>
Used to check whether this or derived classes are BufferAttributes. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</p>
<h3>[property:Integer itemSize]</h3>
<p>The length of vectors that are being stored in the [page:BufferAttribute.array array].</p>
<h3>[property:String name]</h3>
<p>
Optional name for this attribute instance. Default is an empty string.
</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
Flag to indicate that this attribute has changed and should be re-sent to the GPU.
Set this to true when you modify the value of the array.<br /><br />
Setting this to true also increments the [page:BufferAttribute.version version].
</p>
<h3>[property:Boolean normalized]</h3>
<p>
Indicates how the underlying data in the buffer maps to the values in the GLSL shader code.
See the constructor above for details.
</p>
<h3>[property:Function onUploadCallback]</h3>
<p>
A callback function that is executed after the Renderer has transfered the attribute array data to the GPU.
</p>
<h3>[property:Object updateRange]</h3>
<p>Object containing:<br />
[page:Integer offset]: Default is *0*. Position at whcih to start update.<br />
[page:Integer count]: Default is *-1*, which means don't use update ranges. <br /><br />
This can be used to only update some components of stored vectors (for example, just the component
related to color).
</p>
<h3>[property:Integer version]</h3>
<p>A version number, incremented every time the [page:BufferAttribute.needsUpdate needsUpdate] property is set to true.</p>
<h2>Methods</h2>
<h3>[method:BufferAttribute clone]() </h3>
<p>Return a copy of this bufferAttribute.</p>
<h3>[method:BufferAttribute copyArray]( array ) </h3>
<p>Copy the array given here (which can be a normal array or TypedArray) into
[page:BufferAttribute.array array].<br /><br />
See [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set TypedArray.set]
for notes on requirements if copying a TypedArray.
</p>
<h3>[method:null copyAt] ( [param:Integer index1], [param:BufferAttribute bufferAttribute], [param:Integer index2] ) </h3>
<p>Copy a vector from bufferAttribute[index2] to [page:BufferAttribute.array array][index1].</p>
<h3>[method:BufferAttribute copyColorsArray]( [param:Array colors] ) </h3>
<p>Copy an array representing RGB color values into [page:BufferAttribute.array array].</p>
<h3>[method:BufferAttribute copyVector2sArray]( [param:Array vectors] ) </h3>
<p>Copy an array representing [page:Vector2]s into [page:BufferAttribute.array array].</p>
<h3>[method:BufferAttribute copyVector3sArray]( [param:Array vectors] ) </h3>
<p>Copy an array representing [page:Vector3]s into [page:BufferAttribute.array array].</p>
<h3>[method:BufferAttribute copyVector4sArray]( [param:Array vectors] ) </h3>
<p>Copy an array representing [page:Vector4]s into [page:BufferAttribute.array array].</p>
<h3>[method:Number getX]( [param:Integer index] ) </h3>
<p>Returns the x component of the vector at the given index.</p>
<h3>[method:Number getY]( [param:Integer index] ) </h3>
<p>Returns the y component of the vector at the given index.</p>
<h3>[method:Number getZ]( [param:Integer index] ) </h3>
<p>Returns the z component of the vector at the given index.</p>
<h3>[method:Number getW]( [param:Integer index] ) </h3>
<p>Returns the w component of the vector at the given index.</p>
<h3>[method:null onUpload]( [param:Function callback] ) </h3>
<p>
Sets the value of the onUploadCallback property.<br /><br />
In the [example:webgl_buffergeometry WebGL / Buffergeometry] this is used to free memory
after the buffer has been transfered to the GPU.
</p>
<h3>[method:BufferAttribute set] ( [param:Array value], [param:Integer offset] ) </h3>
<p>
value -- an [page:Array] or [page:TypedArray] from which to copy values. <br />
offset -- (optional) index of the [page:BufferAttribute.array array] at which to start copying.<br /><br />
Calls [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set TypedArray.set]( [page:Array value], [page:Integer offset] )
on the [page:BufferAttribute.array array].<br /><br />
In particular, see that page for requirements on [page:Array value]
being a [page:TypedArray].
</p>
<h3>[method:BufferAttribute setArray] ( [param:TypedArray array] ) </h3>
<p>
[page:BufferAttribute.array array] to the TypedArray passed in here.<br /><br />
After setting the array, [page:BufferAttribute.needsUpdate needsUpdate] should be set to true.
</p>
<h3>[method:BufferAttribute setDynamic] ( [param:Boolean value] ) </h3>
<p>Set [page:BufferAttribute.dynamic dynamic] to value.</p>
<h3>[method:BufferAttribute setX]( [param:Integer index], [param:Float x] ) </h3>
<p>Sets the x component of the vector at the given index.</p>
<h3>[method:BufferAttribute setY]( [param:Integer index], [param:Float y] ) </h3>
<p>Sets the y component of the vector at the given index.</p>
<h3>[method:BufferAttribute setZ]( [param:Integer index], [param:Float z] ) </h3>
<p>Sets the z component of the vector at the given index.</p>
<h3>[method:BufferAttribute setW]( [param:Integer index], [param:Float w] ) </h3>
<p>Sets the w component of the vector at the given index.</p>
<h3>[method:BufferAttribute setXY]( [param:Integer index], [param:Float x], [param:Float y] ) </h3>
<p>Sets the x and y components of the vector at the given index.</p>
<h3>[method:BufferAttribute setXYZ]( [param:Integer index], [param:Float x], [param:Float y], [param:Float z] ) </h3>
<p>Sets the x, y and z components of the vector at the given index.</p>
<h3>[method:BufferAttribute setXYZW]( [param:Integer index], [param:Float x], [param:Float y], [param:Float z], [param:Float w] ) </h3>
<p>Sets the x, y, z and w components of the vector at the given index.</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p>
An efficient representation of mesh, line, or point geometry. Includes vertex positions, face
indices, normals, colors, UVs, and custom attributes within buffers, reducing the cost of
passing all this data to the GPU.
</p>
<p>
To read and edit data in BufferGeometry attributes, see [page:BufferAttribute] documentation.
</p>
<p>
For a less efficient but easier-to-use representation of geometry, see [page:Geometry].
</p>
<h2>Example</h2>
<code>
var geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
var vertices = new Float32Array( [
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, 1.0
] );
// itemSize = 3 because there are 3 values (components) per vertex
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh( geometry, material );
</code>
<p>
[example:webgl_buffergeometry Mesh with non-indexed faces]<br />
[example:webgl_buffergeometry_indexed Mesh with indexed faces]<br />
[example:webgl_buffergeometry_lines Lines]<br />
[example:webgl_buffergeometry_lines_indexed Indexed Lines]<br />
[example:webgl_buffergeometry_custom_attributes_particles Particles]<br />
[example:webgl_buffergeometry_rawshader Raw Shaders]
</p>
<h2>Accessing Attributes</h2>
<p>
WebGL stores data associated with individual vertices of a geometry in <em>attributes</em>.
Examples include the position of the vertex, the normal vector for the vertex, the vertex color,
and so on. When using [page:Geometry], the [page:WebGLRenderer renderer] takes care of wrapping
up this information into typed array buffers and sending this data to the shader. With
BufferGeometry, all of this data is stored in buffers associated with individual attributes.
This means that to get the position data associated with a vertex (for instance), you must call
[page:.getAttribute] to access the 'position' [page:BufferAttribute attribute], then access the individual
x, y, and z coordinates of the position.
</p>
<p>
The following attributes are set by various members of this class:
</p>
<h3>[page:BufferAttribute position] (itemSize: 3)</h3>
<p>
Stores the x, y, and z coordinates of each vertex in this geometry. Set by [page:.fromGeometry]().
</p>
<h3>[page:BufferAttribute normal] (itemSize: 3)</h3>
<p>
Stores the x, y, and z components of the vertex normal vector of each vertex in this geometry.
Set by [page:.fromGeometry]().
</p>
<h3>[page:BufferAttribute color] (itemSize: 3)</h3>
<p>
Stores the red, green, and blue channels of vertex color of each vertex in this geometry.
Set by [page:.fromGeometry]().
</p>
<p>
In addition to the the built-in attributes, you can set your own custom attributes using the addAttribute method. With [page:Geometry], these attributes are set and stored on the [page:Material]. In BufferGeometry, the attributes are stored with the geometry itself. Note that you still need to set the attributes information on the material as well, but the value of each attribute is stored in the BufferGeometry.
</p>
<h2>Constructor</h2>
<h3>[name]()</h3>
<div>
This creates a new [name]. It also sets several properties to a default value.
</div>
<h2>Properties</h2>
<h3>[property:Object attributes]</h3>
<p>
This hashmap has as id the name of the attribute to be set and as value the [page:BufferAttribute buffer] to set it to.
Rather than accessing this property directly, use [page:.addAttribute] and [page:.getAttribute] to access attributes of this geometry.
</p>
<h3>[property:Box3 boundingBox]</h3>
<p>
Bounding box for the bufferGeometry, which can be calculated with
[page:.computeBoundingBox](). Default is *null*.
</p>
<h3>[property:Sphere boundingSphere]</h3>
<p>
Bounding sphere for the bufferGeometry, which can be calculated with
[page:.computeBoundingSphere](). Default is *null*.
</p>
<h3>[property:Object drawRange]</h3>
<p>
Used to determine what part of the geometry should be rendered. This should not
be set directly, instead use [page:.setDrawRange].<br />
Default is
<code>
{ start: 0, count: Infinity }
</code>
</p>
<h3>[property:Array groups]</h3>
<p>
Split the geometry into groups, each of which will be rendered in a separate WebGL draw call.
This allows an array of materials to be used with the bufferGeometry.<br /><br />
Each group is an object of the form:
<code>{ start: Integer, count: Integer, materialIndex: Integer }</code>
where start specifies the first element in this draw call – the first vertex for non-indexed geometry,
otherwise the first triangle index. Count specifies how many vertices (or indices) are included, and
materialIndex specifies the material array index to use.<br /><br />
Use [page:.addGroup] to add groups, rather than modifying this array directly.
</p>
<!-- Note: groups used to be called drawCalls
<h3>[property:Array drawcalls]</h3>
<p>
For geometries that use indexed triangles, this Array can be used to split the object
into multiple WebGL draw calls. Each draw call will draw some subset of the vertices
in this geometry using the configured [page:Material shader]. This may be necessary if,
for instance, you have more than 65535 vertices in your object.
</p> -->
<h3>[property:Integer id]</h3>
<p>Unique number for this bufferGeometry instance.</p>
<h3>[property:BufferAttribute index]</h3>
<p>
Allows for vertices to be re-used across multiple triangles; this is called using "indexed triangles" and
works much the same as it does in [page:Geometry]: each triangle is associated with the indices of three vertices.
This attribute therefore stores the index of each vertex for each triangular face.
If this attribute is not set, the [page:WebGLRenderer renderer] assumes that each three contiguous
positions represent a single triangle.
Default is *null*.
</p>
<h3>[property:Boolean isBufferGeometry]</h3>
<p>
Used to check whether this or derived classes are BufferGeometries. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</p>
<h3>[property:Object morphAttributes]</h3>
<p>
Hashmap of [page:BufferAttribute]s holding details of the geometry's [page:Geometry.morphTargets morphTargets].
</p>
<h3>[property:String name]</h3>
<p>
Optional name for this bufferGeometry instance. Default is an empty string.
</p>
<h3>[property:Object userData]</h3>
<p>
An object that can be used to store custom data about the BufferGeometry. It should not hold
references to functions as these will not be cloned.
</p>
<h3>[property:String uuid]</h3>
<p>
[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of this object instance.
This gets automatically assigned and shouldn't be edited.
</p>
<h2>Methods</h2>
<h3>[page:EventDispatcher EventDispatcher] methods are available on this class.</h3>
<h3>[method:BufferGeometry addAttribute]( [param:String name], [param:BufferAttribute attribute] )</h3>
<p>
Adds an attribute to this geometry. Use this rather than the attributes property,
because an internal hashmap of [page:.attributes] is maintained to speed up iterating over
attributes.
</p>
<h3>[method:null addGroup]( [param:Integer start], [param:Integer count], [param:Integer materialIndex] )</h3>
<p>
Adds a group to this geometry; see the [page:BufferGeometry.groups groups]
property for details.
</p>
<h3>[method:null applyMatrix]( [param:Matrix4 matrix] )</h3>
<p>Bakes matrix transform directly into vertex coordinates.</p>
<h3>[method:BufferGeometry center] ()</h3>
<p>Center the geometry based on the bounding box.</p>
<h3>[method:BufferGeometry clone]()</h3>
<p>Creates a clone of this BufferGeometry.</p>
<h3>[method:BufferGeometry copy]( [param:BufferGeometry bufferGeometry] )</h3>
<p>Copies another BufferGeometry to this BufferGeometry.</p>
<h3>[method:null clearGroups]( )</h3>
<p>Clears all groups.</p>
<h3>[method:null computeBoundingBox]()</h3>
<p>
Computes bounding box of the geometry, updating [param:.boundingBox] attribute.<br />
Bounding boxes aren't computed by default. They need to be explicitly computed, otherwise they are *null*.
</p>
<h3>[method:null computeBoundingSphere]()</h3>
<p>
Computes bounding sphere of the geometry, updating [page:.boundingSphere] attribute.<br />
Bounding spheres aren't computed by default. They need to be explicitly computed, otherwise they are *null*.
</p>
<h3>[method:null computeVertexNormals]()</h3>
<p>Computes vertex normals by averaging face normals.</p>
<h3>[method:null dispose]()</h3>
<p>
Disposes the object from memory. <br />
You need to call this when you want the BufferGeometry removed while the application is running.
</p>
<h3>[method:BufferGeometry fromDirectGeometry]( [param:Geometry] )</h3>
<p>
Populates this BufferGeometry with data from a [page:DirectGeometry] object containing faces. Not implemented for a line geometry.<br /><br />
Note: [page:DirectGeometry] is mainly used as an intermediary object for converting between [page:Geometry]
and BufferGeometry.
</p>
<h3>[method:BufferGeometry fromGeometry]( [param:Geometry] )</h3>
<p>Populates this BufferGeometry with data from a [page:Geometry] object containing faces. Not implemented for a line geometry.</p>
<h3>[method:BufferAttribute getAttribute]( [param:String name] )</h3>
<p>Returns the [page:BufferAttribute attribute] with the specified name.</p>
<h3>[method:BufferAttribute getIndex] ()</h3>
<p>Return the [page:.index] buffer.</p>
<h3>[method:BufferGeometry lookAt] ( [param:Vector3 vector] )</h3>
<p>
vector - A world vector to look at.<br /><br />
Rotates the geometry to face a point in space. This is typically done as a one time operation, and not during a loop.
Use [page:Object3D.lookAt] for typical real-time mesh usage.
</p>
<h3>[method:null merge]( [param:BufferGeometry bufferGeometry], [param:Integer offset] )</h3>
<p>Merge in another BufferGeometry with an optional offset of where to start merging in.</p>
<h3>[method:null normalizeNormals]()</h3>
<p>
Every normal vector in a geometry will have a magnitude of 1.
This will correct lighting on the geometry surfaces.
</p>
<h3>[method:BufferAttribute removeAttribute]( [param:String name] )</h3>
<p>Removes the [page:BufferAttribute attribute] with the specified name.</p>
<h3>[method:BufferGeometry rotateX] ( [param:Float radians] )</h3>
<p>
Rotate the geometry about the X axis. This is typically done as a one time operation, and not during a loop.
Use [page:Object3D.rotation] for typical real-time mesh rotation.
</p>
<h3>[method:BufferGeometry rotateY] ( [param:Float radians] )</h3>
<p>
Rotate the geometry about the Y axis. This is typically done as a one time operation, and not during a loop.
Use [page:Object3D.rotation] for typical real-time mesh rotation.
</p>
<h3>[method:BufferGeometry rotateZ] ( [param:Float radians] )</h3>
<p>
Rotate the geometry about the Z axis. This is typically done as a one time operation, and not during a loop.
Use [page:Object3D.rotation] for typical real-time mesh rotation.
</p>
<h3>[method:BufferGeometry scale] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>
Scale the geometry data. This is typically done as a one time operation, and not during a loop.
Use [page:Object3D.scale] for typical real-time mesh scaling.
</p>
<h3>[method:null setIndex] ( [param:BufferAttribute index] )</h3>
<p>Set the [page:.index] buffer.</p>
<h3>[method:null setDrawRange] ( [param:Integer start], [param:Integer count] )</h3>
<p>Set the [page:.drawRange] buffer. See that property for details.</p>
<h3>[method:BufferGeometry setFromObject] ( [param:Object3D object] )</h3>
<p>Sets the attributes for this BufferGeometry from an [page:Object3D].</p>
<h3>[method:BufferGeometry setFromPoints] ( [param:Array points] )</h3>
<p>Sets the attributes for this BufferGeometry from an array of points.</p>
<h3>[method:Object toJSON]()</h3>
<p>Returns a JSON object representation of the BufferGeometry.</p>
<h3>[method:BufferGeometry toNonIndexed]()</h3>
<p>Return a non-index version of an indexed BufferGeometry.</p>
<h3>[method:BufferGeometry translate] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>
Translate the geometry. This is typically done as a one time operation, and not during a loop.
Use [page:Object3D.position] for typical real-time mesh translation.
</p>
<h3>[method:BufferGeometry updateFromObject] ( [param:Object3D object] )</h3>
<div>Updates the attributes for this BufferGeometry from an [page:Object3D].</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
Object for keeping track of time. This uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now">performance.now()</a>
if it is available, otherwise it reverts to the less accurate <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now">Date.now()</a>.
</p>
<h2>Constructor</h2>
<h3>[name]( [param:Boolean autoStart] )</h3>
<p>
autoStart — (optional) whether to automatically start the clock. Default is true.
</p>
<h2>Properties</h2>
<h3>[property:Boolean autoStart]</h3>
<p>
If set, starts the clock automatically when the first update is called. Default is true.
</p>
<h3>[property:Float startTime]</h3>
<p>
Holds the time at which the clock's [page:Clock.start start] method was last called.
</p>
<h3>[property:Float oldTime]</h3>
<p>
Holds the time at which the clock's [page:Clock.start start], [page:Clock.getElapsedTime getElapsedTime] or [page:Clock.getDelta getDelta]
methods were last called.
</p>
<h3>[property:Float elapsedTime]</h3>
<p>
Keeps track of the total time that the clock has been running.
</p>
<h3>[property:Boolean running]</h3>
<p>
Whether the clock is running or not.
</p>
<h2>Methods</h2>
<h3>[method:null start]()</h3>
<p>
Starts clock. Also sets the [page:Clock.startTime startTime] and [page:Clock.oldTime oldTime]
to the current time, sets [page:Clock.elapsedTime elapsedTime] to *0* and [page:Clock.running running] to *true*.
</p>
<h3>[method:null stop]()</h3>
<p>
Stops clock and sets [page:Clock.oldTime oldTime] to the current time.
</p>
<h3>[method:Float getElapsedTime]()</h3>
<p>
Get the seconds passed since the clock started and sets [page:Clock.oldTime oldTime] to the current time.<br />
If [page:Clock.autoStart autoStart] is *true* and the clock is not running, also starts the clock.
</p>
<h3>[method:Float getDelta]()</h3>
<p>
Get the seconds passed since the time [page:Clock.oldTime oldTime] was set and sets [page:Clock.oldTime oldTime] to the current time.<br />
If [page:Clock.autoStart autoStart] is *true* and the clock is not running, also starts the clock.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
This class is used internally to convert from [page:Geometry] to [page:BufferGeometry].
</p>
<h2>Constructor</h2>
<h3>[name]()</h3>
<p>This creates a new [name].</p>
<h2>Properties</h2>
<h3>[property:Integer id]</h3>
<p>Unique number for this [name] instance.</p>
<h3>[property:String name]</h3>
<p>Optional name. Default is the empty string.</p>
<h3>[property:Array type]</h3>
<p>String 'DirectGeometry'.</p>
<h3>[property:Array vertices]</h3>
<p>Initialiased as an empty array, this is populated by [page:.fromGeometry]().</p>
<h3>[property:Array normals]</h3>
<p>Initialiased as an empty array, this is populated by [page:.fromGeometry]().</p>
<h3>[property:Array colors]</h3>
<p>Initialiased as an empty array, this is populated by [page:.fromGeometry]().</p>
<h3>[property:Array uvs]</h3>
<p>Initialiased as an empty array, this is populated by [page:.fromGeometry]().</p>
<h3>[property:Array uvs2]</h3>
<p>Initialiased as an empty array, this is populated by [page:.fromGeometry]().</p>
<h3>[property:Array groups]</h3>
<p>Initialiased as an empty array, this is populated by [page:.fromGeometry]().</p>
<h3>[property:Array morphTargets]</h3>
<p>Initialiased as an empty array, this is populated by [page:.fromGeometry]().</p>
<h3>[property:Array skinWeights]</h3>
<p>Initialiased as an empty array, this is populated by [page:.fromGeometry]().</p>
<h3>[property:Array skinIndices]</h3>
<p>Initialiased as an empty array, this is populated by [page:.fromGeometry]().</p>
<h3>[property:Box3 boundingBox]</h3>
<p>
Bounding box for the bufferGeometry, which can be calculated with
[page:.computeBoundingBox](). Default is *null*.
</p>
<h3>[property:Sphere boundingSphere]</h3>
<p>
Bounding sphere for the bufferGeometry, which can be calculated with
[page:.computeBoundingSphere](). Default is *null*.
</p>
<h3>[property:Boolean verticesNeedUpdate]</h3>
<p>Default is false.</p>
<h3>[property:Boolean normalsNeedUpdate]</h3>
<p>Default is false.</p>
<h3>[property:Boolean colorsNeedUpdate]</h3>
<p>Default is false.</p>
<h3>[property:Boolean uvsNeedUpdate]</h3>
<p>Default is false.</p>
<h3>[property:Boolean groupsNeedUpdate]</h3>
<p>Default is false.</p>
<h2>Methods</h2>
<h3>[property:null computeGroups]( [param:Geometry geometry] )</h3>
<p>
Compute the parts of the geometry that have different materialIndex.
See [page:BufferGeometry.groups].
</p>
<h3>[property:null fromGeometry]( [param:Geometry geometry] )</h3>
<p>Pass in a [page:Geometry] instance for conversion.</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
JavaScript events for custom objects.<br />
[link:https://github.com/mrdoob/eventdispatcher.js Eventdispatcher on GitHub]
</p>
<h2>Example</h2>
<code>
// Adding events to a custom object
var Car = function () {
this.start = function () {
this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
};
};
// Mixing the EventDispatcher.prototype with the custom object prototype
Object.assign( Car.prototype, EventDispatcher.prototype );
// Using events with the custom object
var car = new Car();
car.addEventListener( 'start', function ( event ) {
alert( event.message );
} );
car.start();
</code>
<h2>Constructor</h2>
<h3>[name]()</h3>
<p>
Creates EventDispatcher object.
</p>
<h2>Methods</h2>
<h3>[method:null addEventListener]( [param:String type], [param:Function listener] )</h3>
<p>
type - The type of event to listen to.<br />
listener - The function that gets called when the event is fired.
</p>
<p>
Adds a listener to an event type.
</p>
<h3>[method:Boolean hasEventListener]( [param:String type], [param:Function listener] )</h3>
<p>
type - The type of event to listen to.<br />
listener - The function that gets called when the event is fired.
</p>
<p>
Checks if listener is added to an event type.
</p>
<h3>[method:null removeEventListener]( [param:String type], [param:Function listener] )</h3>
<p>
type - The type of the listener that gets removed.<br />
listener - The listener function that gets removed.
</p>
<p>
Removes a listener from an event type.
</p>
<h3>[method:null dispatchEvent]( [param:object event] )</h3>
<p>
event - The event that gets fired.
</p>
<p>
Fire an event type.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
Triangular face used in [page:Geometry]. These are created automatically for all
standard geometry types, however if you are building a custom geometry you will have to
create them manually.
</p>
<h2>Examples</h2>
<p>[example:misc_ubiquity_test ubiquity / test ]</p>
<p>[example:svg_sandbox svg / sandbox ]</p>
<p>[example:misc_exporter_obj exporter / obj ]</p>
<p>[example:webgl_shaders_vector WebGL / shaders / vector ]</p>
<code>
var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );
//create a triangular geometry
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3( 50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3( 50, 50, 0 ) );
//create a new face using vertices 0, 1, 2
var normal = new THREE.Vector3( 0, 1, 0 ); //optional
var color = new THREE.Color( 0xffaa00 ); //optional
var materialIndex = 0; //optional
var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex );
//add the face to the geometry's faces array
geometry.faces.push( face );
//the face normals and vertex normals can be calculated automatically if not supplied above
geometry.computeFaceNormals();
geometry.computeVertexNormals();
scene.add( new THREE.Mesh( geometry, material ) );
</code>
<h2>Constructor</h2>
<h3>[name]( [param:Integer a], [param:Integer b], [param:Integer c], [param:Vector3 normal], [param:Color color], [param:Integer materialIndex] )</h3>
<p>
a — Vertex A index.<br />
b — Vertex B index.<br />
c — Vertex C index.<br /><br />
normal — (optional) Face normal ([page:Vector3 Vector3]) or array of vertex normals.
If a single vector is passed in, this sets [page:.normal], otherwise if an array of three
vectors is passed in this sets [page:.vertexNormals]<br /><br />
color — (optional) Face [page:Color color] or array of vertex [page:Color colors].
If a single vector is passed in, this sets [page:.color], otherwise if an array of three
vectors is passed in this sets [page:.vertexColors]<br /><br />
materialIndex — (optional) which index of an array of materials to associate
with the face.
</p>
<h2>Properties</h2>
<h3>[property:Integer a]</h3>
<p>
Vertex A index.
</p>
<h3>[property:Integer b]</h3>
<p>
Vertex B index.
</p>
<h3>[property:Integer c]</h3>
<p>
Vertex C index.
</p>
<h3>[property:Vector3 normal]</h3>
<p>
Face normal - vector showing the direction of the Face3. If calculated automatically
(using [page:Geometry.computeFaceNormals]), this is the normalized cross product of two edges of the
triangle. Default is *(0, 0, 0)*.
</p>
<h3>[property:Color color]</h3>
<p>
Face color - for this to be used a material's [page:Material.vertexColors vertexColors] property
must be set to [page:Materials THREE.FaceColors].
</p>
<h3>[property:Array vertexNormals]</h3>
<p>
Array of 3 [page:Vector3 vertex normals].
</p>
<h3>[property:Array vertexColors]</h3>
<p>
Array of 3 vertex colors - for these to be used a material's [page:Material.vertexColors vertexColors] property
must be set to [page:Materials THREE.VertexColors].
</p>
<h3>[property:Integer materialIndex]</h3>
<p>
Material index (points to an index in the associated array of materials). Default is *0*.
</p>
<h2>Methods</h2>
<h3>[method:Face3 clone]()</h3>
<p>Creates a new clone of the Face3 object.</p>
<h3>[method:Face3 copy]( [param:Face3 face3] )</h3>
<p>Copy the paramaters of another Face3 into this.</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
此差异已折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:BufferAttribute] &rarr;
<h1>[name]</h1>
<p class="desc">
An instanced version of [page:BufferAttribute].
</p>
<h2>Constructor</h2>
<h3>[name]( [param:TypedArray array], [param:Integer itemSize], [param:Number meshPerAttribute] )</h3>
<p>
</p>
<h2>Properties</h2>
See [page:BufferAttribute] for inherited properties.
<h3>[property:Number meshPerAttribute]</h3>
<p>
Default is *1*.
</p>
<h3>[property:Boolean isInstancedBufferAttribute]</h3>
<p>
Default is *true*.
</p>
<h2>Methods</h2>
<p>See [page:BufferAttribute] for inherited methods.</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:BufferGeometry] &rarr;
<h1>[name]</h1>
<p class="desc">
An instanced version of [page:BufferGeometry].
</p>
<h2>Constructor</h2>
<h3>[name]( )</h3>
<p>
</p>
<h2>Properties</h2>
See [page:BufferGeometry] for inherited properties.
<h3>[property:Number maxInstancedCount]</h3>
<p>
Default is *undefined*.
</p>
<h3>[property:Boolean isInstancedBufferGeometry]</h3>
<p>
Default is *true*.
</p>
<h2>Methods</h2>
<p>See [page:BufferAttribute] for inherited methods.</p>
<h3>[property:Number addGroup]( start, count, materialIndex )</h3>
<p>
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:InterleavedBuffer] &rarr;
<h1>[name]</h1>
<p class="desc">
An instanced version of [page:InterleavedBuffer].
</p>
<h2>Constructor</h2>
<h3>[name]( [param:TypedArray array], [param:Integer itemSize], [param:Number meshPerAttribute] )</h3>
<p>
</p>
<h2>Properties</h2>
<p>
See [page:InterleavedBuffer] for inherited properties.
</p>
<h3>[property:Number meshPerAttribute]</h3>
<p>
Default is *1*.
</p>
<h3>[property:Boolean isInstancedInterleavedBuffer]</h3>
<p>
Default is *true*.
</p>
<h2>Methods</h2>
<p>
See [page:InterleavedBuffer] for inherited methods.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
"Interleaved" means that multiple attributes, possibly of different types, (e.g., position, normal, uv, color) are packed into a single array buffer.
<br/><br/>
An introduction into interleaved arrays can be found here: [link:https://blog.tojicode.com/2011/05/interleaved-array-basics.html Interleaved array basics]
</p>
<h2>Example</h2>
<p>[example:webgl_buffergeometry_points_interleaved webgl / buffergeometry / points / interleaved]</p>
<h2>Constructor</h2>
<h3>[name]( [param:TypedArray array], [param:Integer stride] )</h3>
<p>
[page:TypedArray array] -- A typed array with a shared buffer. Stores the geometry data.<br/>
[page:Integer stride] -- The number of typed-array elements per vertex.
</p>
<h2>Properties</h2>
<h3>[property:Array array]</h3>
<p>
A typed array with a shared buffer. Stores the geometry data.
</p>
<h3>[property:Integer stride]</h3>
<p>
The number of typed-array elements per vertex.
</p>
<h3>[property:Integer count]</h3>
<p>
Gives the total number of elements in the array.
</p>
<h3>[property:Boolean dynamic]</h3>
<p>
Default is *false*.
</p>
<h3>[property:Object updateRange]</h3>
<p>
Object containing offset and count.
</p>
<h3>[property:Number updateRange.offset]</h3>
<p>
Default is *0*.
</p>
<h3>[property:Number updateRange.count]</h3>
<p>
Default is *-1*.
</p>
<h3>[property:Integer version]</h3>
<p>
A version number, incremented every time the needsUpdate property is set to true.
</p>
<h3>[property:Integer isInterleavedBuffer]</h3>
<p>
Default is *true*.
</p>
<h3>[property:Integer needsUpdate]</h3>
<p>
Default is *false*. Setting this to true increments [page:InterleavedBuffer.version version].
</p>
<h2>Methods</h2>
<h3>[method:InterleavedBuffer setArray] ( [param:TypedArray array] ) </h3>
<p>
array - must be a Typed Array.
</p>
<h3>[method:InterleavedBuffer setDynamic] ( [param:Boolean value] ) </h3>
<p>
Set [page:InterleavedBuffer.dynamic dynamic] to value.
</p>
<h3>[method:InterleavedBuffer copy]( [param:InterleavedBuffer source] ) </h3>
<p>
Copies another [name] to this [name].
</p>
<h3>[method:InterleavedBuffer copyAt]( [param:Integer index1], [param:InterleavedBuffer attribute], [param:Integer index2] ) </h3>
<p>Copies data from attribute[index2] to [page:InterleavedBuffer.array array][index1].</p>
<h3>[method:InterleavedBuffer set]( [param:TypedArray value], [param:Integer offset] ) </h3>
<p>
value - The source (typed) array.<br/>
offset - The offset into the target array at which to begin writing values from the source array. Default is *0*.<br/><br />
Stores multiple values in the buffer, reading input values from a specified array.
</p>
<h3>[method:InterleavedBuffer clone]() </h3>
<p>
Creates a clone of this [name].
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:BufferAttribute] &rarr;
<h1>BufferAttribute Types</h1>
<p class="desc">
There are nine types of [page:BufferAttribute] available in three.js. These correspond to the JavaScript
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax Typed Arrays].
</p>
<code>
THREE.Float64BufferAttribute
THREE.Float32BufferAttribute
THREE.Uint32BufferAttribute
THREE.Int32BufferAttribute
THREE.Uint16BufferAttribute
THREE.Int16BufferAttribute
THREE.Uint8ClampedBufferAttribute
THREE.Uint8BufferAttribute
THREE.Int8BufferAttribute
</code>
<h2>Constructor</h2>
All of the above are called in the same way.
<h3>TypedBufferAttribute( [param:Array array], [param:Integer itemSize], [param:Boolean normalized] )</h3>
<p>
array -- this can be a typed or untyped (normal) array. It will be converted to the Type specified.<br /><br />
itemSize -- the number of values of the array that should be associated with a particular vertex.<br /><br />
normalized -- (optional) indicates how the underlying data in the buffer maps to the values in the GLSL code.
</p>
<h2>Properties</h2>
See the [page:BufferAttribute] page for inherited properties.
<h2>Methods</h2>
See the [page:BufferAttribute] page for inherited methods.
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/core/BufferAttribute.js src/core/BufferAttribute.js]
</body>
</html>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册