javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!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>
		[page:Object3D] &rarr; [page:Mesh] &rarr;

		<h1>[name]</h1>

		<p class="desc">
			A mesh that has a [page:Skeleton] with [page:Bone bones] that can then be
			used to animate the vertices of the geometry.<br /><br />

			[name] can only be used with WebGL 2.
		</p>

		<iframe id="scene" src="scenes/bones-browser.html"></iframe>

		<script>

		// iOS iframe auto-resize workaround

		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {

			const scene = document.getElementById( 'scene' );

			scene.style.width = getComputedStyle( scene ).width;
			scene.style.height = getComputedStyle( scene ).height;
			scene.setAttribute( 'scrolling', 'no' );

		}

		</script>

		<h2>Code Example</h2>

		<code>
		const geometry = new THREE.CylinderGeometry( 5, 5, 5, 5, 15, 5, 30 );

		// create the skin indices and skin weights manually
		// (typically a loader would read this data from a 3D model for you)

		const position = geometry.attributes.position;

		const vertex = new THREE.Vector3();

		const skinIndices = [];
		const skinWeights = [];

		for ( let i = 0; i < position.count; i ++ ) {

			vertex.fromBufferAttribute( position, i );

			// compute skinIndex and skinWeight based on some configuration data
			const y = ( vertex.y + sizing.halfHeight );
			const skinIndex = Math.floor( y / sizing.segmentHeight );
			const skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;
			skinIndices.push( skinIndex, skinIndex + 1, 0, 0 );
			skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 );
		}

		geometry.setAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) );
		geometry.setAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) );

		// create skinned mesh and skeleton

		const mesh = new THREE.SkinnedMesh( geometry, material );
		const skeleton = new THREE.Skeleton( bones );

		// see example from THREE.Skeleton
		const rootBone = skeleton.bones[ 0 ];
		mesh.add( rootBone );

		// bind the skeleton to the mesh
		mesh.bind( skeleton );

		// move the bones and manipulate the model
		skeleton.bones[ 0 ].rotation.x = -0.1;
		skeleton.bones[ 1 ].rotation.x = 0.2;
		</code>

		<h2>Constructor</h2>
		<h3>
			[name]( [param:BufferGeometry geometry], [param:Material material] )
		</h3>
		<p>
			[page:BufferGeometry geometry] - an instance of [page:BufferGeometry].<br />
			[page:Material material] - (optional) an instance of [page:Material].
			Default is a new [page:MeshBasicMaterial].
		</p>

		<h2>Properties</h2>
		<p>See the base [page:Mesh] class for common properties.</p>

		<h3>[property:String bindMode]</h3>
		<p>
			Either `AttachedBindMode` or `DetachedBindMode`. `AttachedBindMode` means the skinned mesh
			shares the same world space as the skeleton. This is not true when using `DetachedBindMode`
			which is useful when sharing a skeleton across multiple skinned meshes.
			Default is `AttachedBindMode`.
		</p>

		<h3>[property:Matrix4 bindMatrix]</h3>
		<p>The base matrix that is used for the bound bone transforms.</p>

		<h3>[property:Matrix4 bindMatrixInverse]</h3>
		<p>The base matrix that is used for resetting the bound bone transforms.</p>

		<h3>[property:Box3 boundingBox]</h3>
		<p>
			The bounding box of the [name]. Can be calculated with
			[page:.computeBoundingBox](). Default is `null`.
		</p>

		<h3>[property:Sphere boundingSphere]</h3>
		<p>
			The bounding sphere of the [name]. Can be calculated with
			[page:.computeBoundingSphere](). Default is `null`.
		</p>

		<h3>[property:Boolean isSkinnedMesh]</h3>
		<p>Read-only flag to check if a given object is of type [name].</p>

		<h3>[property:Skeleton skeleton]</h3>
		<p>[page:Skeleton] representing the bone hierarchy of the skinned mesh.</p>

		<h2>Methods</h2>
		<p>See the base [page:Mesh] class for common methods.</p>

		<h3>
			[method:undefined bind]( [param:Skeleton skeleton], [param:Matrix4 bindMatrix] )
		</h3>
		<p>
			[page:Skeleton skeleton] - [page:Skeleton] created from a [page:Bone Bones] tree.<br />
			[page:Matrix4 bindMatrix] - [page:Matrix4] that represents the base
			transform of the skeleton.<br /><br />

			Bind a skeleton to the skinned mesh. The bindMatrix gets saved to
			.bindMatrix property and the .bindMatrixInverse gets calculated.
		</p>

		<h3>[method:SkinnedMesh clone]()</h3>
		<p>
			This method does currently not clone an instance of [name] correctly.
			Please use [page:SkeletonUtils.clone]() in the meanwhile.
		</p>

		<h3>[method:undefined computeBoundingBox]()</h3>
		<p>
			Computes the bounding box of the skinned mesh, and updates the [page:.boundingBox] attribute.
			The bounding box is not computed by the engine; it must be computed by your app.
			If the skinned mesh is animated, the bounding box should be recomputed per frame.
		</p>

		<h3>[method:undefined computeBoundingSphere]()</h3>
		<p>
			Computes the bounding sphere of the skinned mesh, and updates the [page:.boundingSphere] attribute.
			The bounding sphere is automatically computed by the engine when it is needed, e.g., for ray casting and view frustum culling.
			If the skinned mesh is animated, the bounding sphere should be recomputed per frame.
		</p>

		<h3>[method:undefined normalizeSkinWeights]()</h3>
		<p>Normalizes the skin weights.</p>

		<h3>[method:undefined pose]()</h3>
		<p>This method sets the skinned mesh in the rest pose (resets the pose).</p>

		<h3>
			[method:Vector3 applyBoneTransform]( [param:Integer index], [param:Vector3 vector] )
		</h3>
		<p>
			Applies the bone transform associated with the given index to the given
			position vector. Returns the updated vector.
		</p>

		<h2>Source</h2>

		<p>
			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
		</p>
	</body>
</html>