Three.js

Объекты

Object3D →

Bone

Кость (bone) является частью скелета (Skeleton). Скелет, в свою очередь, используется "сеткой, покрытой кожей" (SkinnedMesh). Кости практически одинаковы с пустым Object3D.

Пример

var root = new THREE.Bone();
var child = new THREE.Bone();

root.add( child );
child.position.y = 5;

Конструктор

Bone( skin )

Свойства

.skin

An optional reference to the [page:SkinnedMesh].

Методы

.clone()

Возвращает клона данного объекта Bone и его потомков.

Исходники

Object3D →

Group

Данный объект (группа) практически идентичен Object3D. Его назначение сделать работу с группой объектов синтаксически яснее.

Пример

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

var cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );

var cubeB = new THREE.Mesh( geometry, material );
cubeA.position.set( -100, -100, 0 );

// create a group and add the two cubes
// These cubes can now be rotated / scaled etc as a group
// создаем группу и добавляем два куба
// Эти кубы теперь можно вращать/масштабировать и т.д. как группу
var group = new THREE.Group();
group.add( cubeA );
group.add( cubeB )

scene.add( group );

Конструктор

Group( )

Свойства

Свойства одинаковы со свойствами Object3D, за исключением:

.type

Строка 'Group'. Она не должна изменяться.

Методы

Методы одинаковы с методами Object3D.

Исходники

Object3D →

Line

Непрерывная линия.

Пример

var material = new THREE.LineBasicMaterial({
	color: 0x0000ff
});

var geometry = new THREE.Geometry();
geometry.vertices.push(
	new THREE.Vector3( -10, 0, 0 ),
	new THREE.Vector3( 0, 10, 0 ),
	new THREE.Vector3( 10, 0, 0 )
);

var line = new THREE.Line( geometry, material );
scene.add( line );

Конструктор

Line( [page:Geometry geometry], [page:Material material] )

Свойства

[property:Geometry geometry]

[property:Material material]

Методы

[method:Array raycast]( [page:Raycaster raycaster], [page:Array intersects] )

[method:Line clone]()

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

Object3D →   Line →

LineLoop

A continuous line that connects back to the start. Line →

LineSegments

A series of lines drawn between pairs of vertices.

Конструктор

LineSegments( [page:Geometry geometry], [page:Material material] )

Свойства

[property:Geometry geometry]

[property:Material material]

Методы

[method:Array raycast]( [page:Raycaster raycaster], [page:Array intersects] )

[method:LineSegments clone]()

Source

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

Object3D →

LOD

Level of Detail - Show meshes with more or less geometry based on distance.

Пример

		var lod = new THREE.LOD();

		//Create 5 levels of spheres
		for( var i = 0; i < 5; i++ ) {

			var geometry = new THREE.IcosahedronGeometry( 10, 5 - i )

			new THREE.Mesh( geometry, material );

			lod.addLevel( mesh, i * 50 );

		}
		

Конструктор

LOD()

Свойства

[property:array levels]

Методы

[method:null addLevel]( [page:Object3D mesh], [page:Float distance] )

[method:Object3D getObjectForDistance]( [page:Float distance] )

[method:null update]( [page:Camera camera] )

[method:LOD clone]()

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

Object3D →

Mesh

Base class for Mesh objects, such as [page:MorphAnimMesh] and [page:SkinnedMesh].

Пример

var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh );

Конструктор

[name]( [page:Geometry geometry], [page:Material material] )

Свойства

[property:Geometry geometry]

[property:Material material]

[property:Array morphTargetInfluences]

[property:Array morphTargetDictionary]

[property:Integer drawMode]

Методы

[method:null updateMorphTargets]()

[method:Array raycast]( [page:Raycaster raycaster], [page:Array intersects] )

[method:Mesh clone]()

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

Object3D →

Points

Конструктор

Points( [page:Geometry geometry], [page:Material material] )

Свойства

[property:Geometry geometry]

[property:Material material]

Методы

[method:Array raycast]( [page:Raycaster raycaster], [page:Array intersects] )

[method:Points clone]()

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

Skeleton

Use an array of [page:Bone bones] to create a skeleton that can be used by a [page:SkinnedMesh]. WebGL only.

Пример

// Create a simple "arm"

var bones = [];

var shoulder = new THREE.Bone();
var elbow = new THREE.Bone();
var 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;

var armSkeleton = new THREE.Skeleton( bones );

// See THREE.SkinnedMesh for an example of usage with a mesh

Конструктор

Skeleton( [page:Array bones], [page:Array boneInverses], [page:Boolean useVertexTexture]  )

The constructor automatically sets up all of the properties below.

Свойства

[property:Array bones]

The array of [page:bone bones]

[property:Boolean useVertexTexture]

Whether or not to use a vertex texture in the shader, set in the constructor. Not all devices support floating point pixel textures. If this option is set then the bone matrices will be packed into a texture and sent to the shader. This method allows a much larger set of bones to be used. Otherwise the vertex shader will use uniforms, which do not allow for as many bones to be used. The exact numbers vary between devices.

[property:Array boneInverses]

An array of [page:Matrix4 Matrix4s] that represent the inverse of the matrixWorld of the individual bones.

[property:Integer boneTextureWidth]

The width of the vertex data texture.

[property:Integer boneTextureHeight]

The height of the vertex data texture.

[property:Float32Array boneMatrices]

The array buffer holding the bone data when using a vertex texture.

[property:DataTexture boneTexture]

The [page:DataTexture] holding the bone data when using a vertex texture.

Методы

[method:null calculateInverses]()

Generates the boneInverses.

[method:null pose]()

Returns the skeleton to the base pose.

[method:null update]()

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

[method:Skeleton clone]()

Returns a clone of this Skeleton object.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

Object3D →

SkinnedMesh

A mesh that has a [page:Skeleton] with [page:Bone bones] that can then be used to animate the vertices of the geometry.

Пример

var geometry = new THREE.CylinderGeometry( 5, 5, 5, 5, 15, 5, 30 );

//Create the skin indices and skin weights
for ( var i = 0; i < geometry.vertices.length; i ++ ) {

  // Imaginary functions to calculate the indices and weights
  // This part will need to be changed depending your skeleton and model
  var skinIndex = calculateSkinIndex( geometry.vertices, i );
  var skinWeight = calculateSkinWeight( geometry.vertices, i );

  // Ease between each bone
  geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
  geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );

}

var mesh = THREE.SkinnedMesh( geometry, material );

// See example from THREE.Skeleton for the armSkeleton
var rootBone = armSkeleton.bones[ 0 ];
mesh.add( rootBone );

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

// Move the bones and manipulate the model
armSkeleton.bones[ 0 ].rotation.x = -0.1;
armSkeleton.bones[ 1 ].rotation.x = 0.2;

Конструктор

SkinnedMesh( [page:Geometry geometry], [page:Material material], [page:boolean useVertexTexture] )

Свойства

[property:array bones]

This contains the array of bones for this mesh. These should be set in the constructor.

[property:Matrix4 identityMatrix]

This is an identityMatrix to calculate the bones matrices from.

[property:boolean useVertexTexture]

The boolean defines whether a vertex texture is used to calculate the bones. This boolean shouldn't be changed after constructor.

[property:array boneMatrices]

This array of matrices contains the matrices of the bones. These get calculated in the constructor.

[property:string bindMode]

Either "attached" or "detached". "attached" uses the [page:SkinnedMesh.matrixWorld] property for the base transform matrix of the bones. "detached" uses the [page:SkinnedMesh.bindMatrix].

[property:Matrix4 bindMatrix]

The base matrix that is used for the bound bone transforms.

[property:Matrix4 inverseBindMatrix]

The inverse of the bindMatrix.

Методы

[method:null bind]( [page:Skeleton skeleton], [page:Matrix4 bindMatrix] )

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

[method:null normalizeSkinWeights]()

Normalizes the [page:Geometry.skinWeights] vectors. Does not affect [page:BufferGeometry].

[method:null pose]()

This method sets the skinned mesh in the rest pose.

[method:Bone addBone]( [page:Bone bone] )

This method adds the bone to the skinned mesh when it is provided. It creates a new bone and adds that when no bone is given.

[method:SkinnedMesh clone]()

Returns a clone of this SkinnedMesh object and its descendants.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

Object3D →

Sprite

Спрайт это плоскость на трехмерной сцене, которая всегда стоит перед камерой.
Спрайты не отбрасывают тени, так что установка castShadow = true не даст никакого эффекта.

Пример

var map = new THREE.TextureLoader().load( "sprite.png" );
  var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, fog: true } );
  var sprite = new THREE.Sprite( material );
  scene.add( sprite );

Конструктор

Sprite( material )

Создает новый объект Sprite с указанным материалом material.

Свойства

[property:SpriteMaterial material]

An instance of [page:Material], defining the object's appearance. Значение по умолчанию равно [page:SpriteMaterial], который является белой плоскостью.

Методы

[method:Sprite clone]()

Возвращает клон данного объекта Sprite и его потомков.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]