You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.3 KiB
HTML
129 lines
3.3 KiB
HTML
2 months ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>[name]</h1>
|
||
|
|
|
||
|
|
<p class="desc">
|
||
|
|
Use an array of [page:Bone bones] to create a skeleton that can be used by
|
||
|
|
a [page:SkinnedMesh].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Code Example</h2>
|
||
|
|
<code>
|
||
|
|
// Create a simple "arm"
|
||
|
|
|
||
|
|
const bones = [];
|
||
|
|
|
||
|
|
const shoulder = new THREE.Bone();
|
||
|
|
const elbow = new THREE.Bone();
|
||
|
|
const hand = new THREE.Bone();
|
||
|
|
|
||
|
|
shoulder.add( elbow );
|
||
|
|
elbow.add( hand );
|
||
|
|
|
||
|
|
bones.push( shoulder );
|
||
|
|
bones.push( elbow );
|
||
|
|
bones.push( hand );
|
||
|
|
|
||
|
|
shoulder.position.y = -5;
|
||
|
|
elbow.position.y = 0;
|
||
|
|
hand.position.y = 5;
|
||
|
|
|
||
|
|
const armSkeleton = new THREE.Skeleton( bones );
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
See the [page:SkinnedMesh] page for an example of usage with standard
|
||
|
|
[page:BufferGeometry].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Constructor</h2>
|
||
|
|
|
||
|
|
<h3>[name]( [param:Array bones], [param:Array boneInverses] )</h3>
|
||
|
|
<p>
|
||
|
|
[page:Array bones] - The array of [page:Bone bones]. Default is an empty
|
||
|
|
array.<br />
|
||
|
|
[page:Array boneInverses] - (optional) An array of [page:Matrix4 Matrix4s].<br /><br />
|
||
|
|
|
||
|
|
Creates a new [name].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Properties</h2>
|
||
|
|
|
||
|
|
<h3>[property:Array bones]</h3>
|
||
|
|
<p>
|
||
|
|
The array of [page:bone bones]. Note this is a copy of the original array,
|
||
|
|
not a reference, so you can modify the original array without effecting
|
||
|
|
this one.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Array boneInverses]</h3>
|
||
|
|
<p>
|
||
|
|
An array of [page:Matrix4 Matrix4s] that represent the inverse of the
|
||
|
|
[page:Matrix4 matrixWorld] of the individual bones.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Float32Array boneMatrices]</h3>
|
||
|
|
<p>The array buffer holding the bone data when using a vertex texture.</p>
|
||
|
|
|
||
|
|
<h3>[property:DataTexture boneTexture]</h3>
|
||
|
|
<p>
|
||
|
|
The [page:DataTexture] holding the bone data when using a vertex texture.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Methods</h2>
|
||
|
|
|
||
|
|
<h3>[method:Skeleton clone]()</h3>
|
||
|
|
<p>Returns a clone of this Skeleton object.</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined calculateInverses]()</h3>
|
||
|
|
<p>
|
||
|
|
Generates the [page:.boneInverses boneInverses] array if not provided in
|
||
|
|
the constructor.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this computeBoneTexture]()</h3>
|
||
|
|
<p>
|
||
|
|
Computes an instance of [page:DataTexture] in order to pass the bone data
|
||
|
|
more efficiently to the shader. The texture is assigned to
|
||
|
|
[page:.boneTexture boneTexture].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined pose]()</h3>
|
||
|
|
<p>Returns the skeleton to the base pose.</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined update]()</h3>
|
||
|
|
<p>
|
||
|
|
Updates the [page:Float32Array boneMatrices] and [page:DataTexture boneTexture]
|
||
|
|
after changing the bones. This is called automatically by the
|
||
|
|
[page:WebGLRenderer] if the skeleton is used with a [page:SkinnedMesh].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:Bone getBoneByName]( [param:String name] )</h3>
|
||
|
|
<p>
|
||
|
|
name -- String to match to the Bone's .name property. <br /><br />
|
||
|
|
|
||
|
|
Searches through the skeleton's bone array and returns the first with a
|
||
|
|
matching name.<br />
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:undefined dispose]()</h3>
|
||
|
|
<p>
|
||
|
|
Frees the GPU-related resources allocated by this instance. Call this
|
||
|
|
method whenever this instance is no longer used in your app.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Source</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
||
|
|
</p>
|
||
|
|
</body>
|
||
|
|
</html>
|