Three.js

previous page next page

Объекты

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 — (дополнительный, необязательный аргумент) SkinnedMesh которой принадлежит кость.

Свойства

.skin

An optional reference to the [page:SkinnedMesh].

Методы

.clone()

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

Исходники

Bone.js в этом справочнике
Bone.js на github.com

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.

Исходники

Group.js в этом справочнике
Group.js на github.com

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

geometry — Vertices representing the line segment(s).
material — Material for the line. Default is [page:LineBasicMaterial LineBasicMaterial].

If no material is supplied, a randomized line material will be created and assigned to the object.

Свойства

[property:Geometry geometry]

Vertices representing the line segment(s).

[property:Material material]

Material for the line.

Методы

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

Get intersections between a casted ray and this Line. [page:Raycaster.intersectObject] will call this method.

[method:Line clone]()

Returns a clone of this Line object and its descendants.

Исходники

[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] )

geometry — Pair(s) of vertices representing each line segment(s).
material — Material for the line. Default is [page:LineBasicMaterial LineBasicMaterial].

If no material is supplied, a randomized line material will be created and assigned to the object.

Свойства

[property:Geometry geometry]

Pair(s) of vertices representing the line segment(s).

[property:Material material]

Material for the line.

Методы

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

Get intersections between a casted ray and this Line. [page:Raycaster.intersectObject] will call this method.

[method:LineSegments clone]()

Returns a clone of this LineSegments object and its descendants.

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.

Пример

[example:webgl_lod LOD]

		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]

An array of [page:object level] objects

level is an object with two properties.

distance -- The distance at which to display this level of detail
object -- The Object3D which will be displayed

Методы

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

mesh -- The Object3D to display
distance -- The distance at which to display this level of detail

Adds a mesh that will display at a certain distance and greater. Typically the further away the distance, the lower the detail on the mesh.

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

Get a reference to the first [page:Object3D] (mesh) that is greater than supplied distance.

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

camera -- The current camera

Update the visiblility of the level of detail based on the distance from the camera.

[method:LOD clone]()

Returns a clone of this LOD object and its associated distance specific objects.

Исходники

[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] )

geometry — An instance of [page:Geometry].
material — An instance of [page:Material] (optional).

Свойства

[property:Geometry geometry]

An instance of [page:Geometry], defining the object's structure.

[property:Material material]

An instance of [page:Material], defining the object's appearance. Default is a [page:MeshBasicMaterial] with wireframe mode enabled and randomised colour.

[property:Array morphTargetInfluences]

An array of weights typically from 0-1 that specify how much of the morph is applied. Undefined by default, but reset to a blank array by [page:Mesh.updateMorphTargets updateMorphTargets].

[property:Array morphTargetDictionary]

A dictionary of morphTargets based on the morphTarget.name property. Undefined by default, but rebuilt [page:Mesh.updateMorphTargets updateMorphTargets].

[property:Integer drawMode]

Determines how the mesh triangles are constructed from the vertices. See the draw mode [page:DrawModes constants] for all possible values. Default is [page:DrawModes TrianglesDrawMode].

Методы

[method:null updateMorphTargets]()

Updates the morphtargets to have no influence on the object. Resets the [page:Mesh.morphTargetInfluences morphTargetInfluences], [page:Mesh.morphTargetDictionary morphTargetDictionary], and [page:Mesh.morphTargetBase morphTargetBase] properties.

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

Get intersections between a casted ray and this mesh. [page:Raycaster.intersectObject] will call this method.

[method:Mesh clone]()

Returns a clone of this Mesh object and its descendants.

Исходники

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

Object3D →

Points

A class for displaying points. For example, if using the [page:WebGLRenderer], the points are displayed using GL_POINTS.

Конструктор

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

geometry — An instance of [page:Geometry].
material — An instance of [page:Material] (optional).

Свойства

[property:Geometry geometry]

An instance of [page:Geometry], where each vertex designates the position the points.

[property:Material material]

An instance of [page:Material], defining the object's appearance. Default is a [page:PointsMaterial] with randomised colour.

Методы

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

Get intersections between a casted ray and this Points. [page:Raycaster.intersectObject] will call this method.

[method:Points clone]()

Returns a clone of this Points object and its descendants.

Исходники

[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]  )

bones — The array of [page:bone bones]
boneInverses — (optional) An array of [page:Matrix4 Matrix4s]
useVertexTexture — (optional) Whether or not to use a vertex texture in the shader.

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

geometry — An instance of [page:Geometry]. [page:Geometry.skinIndices] and [page:Geometry.skinWeights] should be set.
material — An instance of [page:Material] (optional).
useVertexTexture -- Defines whether a vertex texture can be used (optional).

Свойства

[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] )

skeleton — [page:Skeleton]
bindMatrix — [page:Matrix4] that represents the base transform of the skeleton

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

bone — This is the bone that needs to be added. (optional)

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 )

material — экземпляр 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]

previous page start next page