Three.js API手册

动画
AnimationAction AnimationClip AnimationMixer AnimationObjectGroup AnimationUtils KeyframeTrack PropertyBinding PropertyMixer
动画 / 轨道
BooleanKeyframeTrack ColorKeyframeTrack NumberKeyframeTrack QuaternionKeyframeTrack StringKeyframeTrack VectorKeyframeTrack
音频
Audio AudioAnalyser AudioContext AudioListener PositionalAudio
摄像机
ArrayCamera Camera CubeCamera OrthographicCamera PerspectiveCamera StereoCamera
常量
Animation Core CustomBlendingEquation DrawModes Materials Renderer Textures
核心
BufferAttribute BufferGeometry Clock DirectGeometry EventDispatcher Face3 Geometry InstancedBufferAttribute InstancedBufferGeometry InstancedInterleavedBuffer InterleavedBuffer InterleavedBufferAttribute Layers Object3D Raycaster Uniform
核心 / BufferAttributes
BufferAttribute_Types
弃用列表
DeprecatedList
附件
Earcut ShapeUtils
附件 / 核心
Curve CurvePath Font Interpolations Path Shape ShapePath
附件 / 曲线
ArcCurve CatmullRomCurve3 CubicBezierCurve CubicBezierCurve3 EllipseCurve LineCurve LineCurve3 QuadraticBezierCurve QuadraticBezierCurve3 SplineCurve
附件 / 物体
ImmediateRenderObject
几何体
BoxBufferGeometry BoxGeometry CircleBufferGeometry CircleGeometry ConeBufferGeometry ConeGeometry CylinderBufferGeometry CylinderGeometry DodecahedronBufferGeometry DodecahedronGeometry EdgesGeometry ExtrudeBufferGeometry ExtrudeGeometry IcosahedronBufferGeometry IcosahedronGeometry LatheBufferGeometry LatheGeometry OctahedronBufferGeometry OctahedronGeometry ParametricBufferGeometry ParametricGeometry PlaneBufferGeometry PlaneGeometry PolyhedronBufferGeometry PolyhedronGeometry RingBufferGeometry RingGeometry ShapeBufferGeometry ShapeGeometry SphereBufferGeometry SphereGeometry TetrahedronBufferGeometry TetrahedronGeometry TextBufferGeometry TextGeometry TorusBufferGeometry TorusGeometry TorusKnotBufferGeometry TorusKnotGeometry TubeBufferGeometry TubeGeometry WireframeGeometry
辅助对象
ArrowHelper AxesHelper BoxHelper Box3Helper CameraHelper DirectionalLightHelper FaceNormalsHelper GridHelper PolarGridHelper PositionalAudioHelper HemisphereLightHelper PlaneHelper PointLightHelper RectAreaLightHelper SkeletonHelper SpotLightHelper VertexNormalsHelper
灯光
AmbientLight DirectionalLight HemisphereLight Light PointLight RectAreaLight SpotLight
灯光 / 阴影
DirectionalLightShadow LightShadow SpotLightShadow
加载器
AnimationLoader AudioLoader BufferGeometryLoader Cache CompressedTextureLoader CubeTextureLoader DataTextureLoader FileLoader FontLoader ImageBitmapLoader ImageLoader Loader LoaderUtils MaterialLoader ObjectLoader TextureLoader
加载器 / 管理器
DefaultLoadingManager LoadingManager
材质
LineBasicMaterial LineDashedMaterial Material MeshBasicMaterial MeshDepthMaterial MeshDistanceMaterial MeshLambertMaterial MeshMatcapMaterial MeshNormalMaterial MeshPhongMaterial MeshPhysicalMaterial MeshStandardMaterial MeshToonMaterial PointsMaterial RawShaderMaterial ShaderMaterial ShadowMaterial SpriteMaterial
数学库
Box2 Box3 Color Cylindrical Euler Frustum Interpolant Line3 Math Matrix3 Matrix4 Plane Quaternion Ray Sphere Spherical Triangle Vector2 Vector3 Vector4
数学库 / 插值
CubicInterpolant DiscreteInterpolant LinearInterpolant QuaternionLinearInterpolant
物体
Bone Group Line LineLoop LineSegments LOD Mesh Points Skeleton SkinnedMesh Sprite
渲染器
WebGLMultisampleRenderTarget WebGLRenderer WebGLRenderTarget WebGLRenderTargetCube
渲染器 / 着色器
ShaderChunk ShaderLib UniformsLib UniformsUtils
场景
Fog FogExp2 Scene
纹理贴图
CanvasTexture CompressedTexture CubeTexture DataTexture DataTexture3D DepthTexture Texture VideoTexture
在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

蒙皮网格(SkinnedMesh)

具有Skeleton(骨架)和bones(骨骼)的网格,可用于给几何体上的顶点添加动画。 其材质必须支持蒙皮,并且已经启用了蒙皮 —— 请阅读MeshStandardMaterial.skinning。

// iOS iframe auto-resize workaround 
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) { 
  var scene = document.getElementById( 'scene' ); 
  scene.style.width = getComputedStyle( scene ).width; 
  scene.style.height = getComputedStyle( scene ).height; 
  scene.setAttribute( 'scrolling', 'no' ); 
}

示例

var geometry = new THREE.CylinderBufferGeometry( 5, 5, 5, 5, 15, 5, 30 ); 
// create the skin indices and skin weights 
var position = geometry.attributes.position; 
var vertex = new THREE.Vector3(); 
var skinIndices = []; 
var skinWeights = []; 
for ( var i = 0; i < position.count; i ++ ) { 
  vertex.fromBufferAttribute( position, i ); // compute skinIndex and skinWeight based on some configuration data 
  var y = ( vertex.y + sizing.halfHeight ); 
  var skinIndex = Math.floor( y / sizing.segmentHeight ); 
  var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight; 
  skinIndices.push( skinIndex, skinIndex + 1, 0, 0 ); 
  skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 ); 
} 
geometry.addAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) ); 
geometry.addAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) ); 
// create skinned mesh and skeleton 
var mesh = new THREE.SkinnedMesh( geometry, material ); 
var skeleton = new THREE.Skeleton( bones ); 
// see example from THREE.Skeleton 
var 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;

构造器

SkinnedMesh( geometry : BufferGeometry, material : Material )

geometry —— 一个BufferGeometry实例。
material —— (可选)一个Material实例,默认值是一个新的MeshBasicMaterial。

属性

请参阅其基类Mesh来查看共有属性。

# .bindMode : string

“attached”(附加)或者“detached”(分离)。“attached”使用SkinnedMesh.matrixWorld 属性作为对骨骼的基本变换矩阵,“detached”则使用SkinnedMesh.bindMatrix。 默认值是“attached”。

# .bindMatrix : Matrix4

该基础矩阵用于绑定骨骼的变换。

# .bindMatrixInverse : Matrix4

该基础矩阵用于重置绑定骨骼的变换。

# .isSkinnedMesh : Boolean

用于检查这个类或者其派生类是否为蒙皮网格,默认值为true

你不应当对这个属性进行改变,因为它在使用,以用于优化。

# .skeleton : Skeleton

用于表示蒙皮网格中骨骼的层次结构的Skeleton(骨架)。

方法

请参阅其基类Mesh来查看共有方法。

# .bind ( skeleton : Skeleton, bindMatrix : Matrix4 ) : null

skeleton —— 由一棵Bones树创建的Skeleton。
bindMatrix —— 表示骨架基本变换的Matrix4(4x4矩阵)。

将骨架绑定到一个蒙皮网格上。bindMatrix会被保存到.bindMatrix属性中,其逆矩阵.bindMatrixInverse也会被计算出来。

# .clone () : SkinnedMesh

返回当前SkinnedMesh对象的一个克隆及其任何后代。

# .normalizeSkinWeights () : null

标准化蒙皮的权重。

# .pose () : null

这个方法设置了在“休息”状态下蒙皮网格的姿势(重置姿势)。

# .updateMatrixWorld ( force : Boolean ) : null

更新MatrixWorld矩阵。

源代码

src/objects/SkinnedMesh.js