Three.js

Основные элементы three.js

В этом разделе описаны основные классы библиотеки three.js.

      BufferAttribute

Данный класс сохраняет данные атрибута (такие как положения вершин, индексы граней, нормали, цвета, текстурные координаты (
объекта (X, Y, Z) и координатами на текстуре (U, V - эти буквы
обозначают оси двумерной текстуры, потому что «X», «Y» и «Z»
уже используются для обозначения осей 3D-объекта в пространстве
модели). Значения U и V обычно изменяются от 0 до 1.')" onmouseout="hide()">UV) и все атрибуты, установленные пользователем), связанного с BufferGeometry, который позволяет более эффективное прохождение всех этих данных к
блок графических вычислений или графический процессор
или попросту - процессор видеокарты')" onmouseout="hide()">GPU. Посмотрите эту страницу для дополнительных сведений и примеров использования.

Данные хранятся как векторы произвольной длины (определяемые itemSize), и вообще в методах, описанных ниже, если передаются с индексом, то он автоматически умножается на длину вектора.

Конструктор

BufferAttribute( array, itemSize, 
нормированный, т.е. приведенный к какой-то норме')" onmouseout="hide()">normalized )

Свойства

Методы

Исходники

BufferAttribute →

Типы BufferAttribute

В three.js имеются девять типов BufferAttribute. Они соответствуют типизированным массивам в JavaScript.

THREE.Float64BufferAttribute
THREE.Float32BufferAttribute
THREE.Uint32BufferAttribute
THREE.Int32BufferAttribute
THREE.Uint16BufferAttribute
THREE.Int16BufferAttribute
THREE.Uint8ClampedBufferAttribute
THREE.Uint8BufferAttribute
THREE.Int8BufferAttribute

Конструктор

Все вышеперечисленное вызывается одним и тем же способом.

TypedBufferAttribute( array, itemSize )

Свойства

Унаследованные свойства смотрите на странице BufferAttribute.

Методы

Унаследованные методы смотрите на странице BufferAttribute.

Исходники

      BufferGeometry

Данный класс является эффективной альтернативой Geometry, так как он сохраняет внутри буферов все данные, включая положения вершин, индексы граней, нормали, цвета, текстурные координаты (
объекта (X, Y, Z) и координатами на текстуре (U, V - эти буквы
обозначают оси двумерной текстуры, потому что «X», «Y» и «Z»
уже используются для обозначения осей 3D-объекта в пространстве
модели). Значения U и V обычно изменяются от 0 до 1.')" onmouseout="hide()">UV) и все атрибуты, установленные пользователем); это снижает затраты на прохождение всех этих данных к
блок графических вычислений или графический процессор
или попросту - процессор видеокарты')" onmouseout="hide()">GPU. При этом, работать с BufferGeometry сложнее, чем с Geometry; вместо того, чтобы обращаться к данным расположения как к объектам Vector3, а к данным о цвете как к объектам Color и так далее, нужно обращаться к необработанным данным (raw data) из соответствующего буфера атрибутов. Это делает BufferGeometry наиболее подходящим для статических объектов, где вам не нужно управлять геометрическими свойствами объекта после его создания.

Пример

var geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the bottom left and top right
// vertices because each vertex needs to appear once per triangle.
// создадим простую форму - квадрат. Нижняя левая и верхняя правая вершины
// повторяются, поскольку в обоих треугольниках есть каждая из этих вершин.
var vertices = new Float32Array( [
-1.0, -1.0,  1.0,
 1.0, -1.0,  1.0,
 1.0,  1.0,  1.0,

 1.0,  1.0,  1.0,
-1.0,  1.0,  1.0,
-1.0, -1.0,  1.0
] );

// itemSize = 3 because there are 3 values (components) per vertex
// itemSize = 3, потому что имеется 3 значения (компонента, т.е. составные части) на каждую вершину
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh( geometry, material );

Другие примеры:

Complex mesh with non-indexed faces (сложная сетка с неиндексированными гранями),
Complex mesh with indexed faces (сложная сетка с индексированными гранями),
Lines (линии),
Indexed Lines (индексированные линии),
Particles (частицы), и
Raw Shaders (необработанные шейдеры).

Обращение к атрибутам Accessing attributes

WebGL хранит данные, связанные с отдельными вершинами геометрии в атрибутах. WebGL stores data associated with individual vertices of a geometry in attributes. Примеры включают положение вершины, вектор нормали вершины, цвет вершины и т.д. Examples include the position of the vertex, the normal vector for the vertex, the vertex color, and so on. При использовании Geometry, рендерер берет на себя заботу о переносе этой информации в буферы типизированного массива и отправлении этих данных в шейдер. When using [page:Geometry], the [page:WebGLRenderer renderer] takes care of wrapping up this information into typed array buffers and sending this data to the shader. С BufferGeometry все эти данные хранятся в буферах, связанных с отдельными атрибутами. With BufferGeometry, all of this data is stored in buffers associated with an individual attributes. Это значит, что для получения данных о положении, связанных с вершиной (например), нужно вызвать метод .getAttribute для доступа к атрибуту position, затем обращаться к отдельным координатам x, y, и z. This means that to get the position data associated with a vertex (for instance), you must call [page:.getAttribute] to access the 'position' [page:BufferAttribute attribute], then access the individual x, y, and z coordinates of the position.

Различными элементами этого класса устанавливаются следующие атрибуты: If this attribute is not set, the [page:WebGLRenderer renderer] assumes that each three contiguous positions represent a single triangle.

In addition to the the built-in attributes, you can set your own custom attributes using the addAttribute method. With [page:Geometry], these attributes are set and stored on the [page:Material]. In BufferGeometry, the attributes are stored with the geometry itself. Note that you still need to set the attributes information on the material as well, but the value of each attribute is stored in the BufferGeometry.

Конструктор

BufferGeometry()

Конструктор создает новый BufferGeometry, а также задает некоторым свойствам значение по умолчанию.

Свойства

Методы

В данном классе возможно применение методов EventDispatcher.

Исходники

      Clock

Объект для отслеживания времени. Он использует метод performance.now(), если такая возможность имеется, в противном случае он обращается к менее точному методу Date.now(). Вот описание методов performance.now() и Date.now() на русском языке.

Конструктор

Clock( autoStart )

Свойства

Методы

Исходники

      DirectGeometry

Данный класс используется внутри three.js для конвертирования из Geometry в BufferGeometry.

Конструктор

DirectGeometry()

Создает новую DirectGeometry.

Свойства

Методы

В данном классе возможно применение методов EventDispatcher.

Исходники

      EventDispatcher

События JavaScript для настраиваемых объектов.
EventDispatcher на Гитхабе.

Пример

// Adding events to a custom object
// Добавляем события в пользовательский объект
var Car = function () {
    this.start = function () {
        this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
    };
};

// Mixin the EventDispatcher.prototype with the custom object prototype
// Объединяем EventDispatcher.prototype с прототипом пользовательского объекта
Object.assign( Car.prototype, EventDispatcher.prototype );

// Using events with the custom object
// Использование событий с пользовательским объектом
var car = new Car();
car.addEventListener( 'start', function ( event ) {
    alert( event.message );
} );

car.start();

Конструктор

EventDispatcher()

Создает объект EventDispatcher.

Методы

Исходники

      Face3

Треугольная грань, используемая в Geometry. Грани создаются автоматически для всех стандартных типов геометрии, однако, если строится нестандартная геометрия, их придется создавать вручную.

Пример

var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );

// create a triangular geometry
// создадим геометрию треугольника
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3(  50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3(  50,  50, 0 ) );

// create a new face using vertices 0, 1, 2
// создаем новую грань, используя вершины 0, 1, 2
var normal = new THREE.Vector3( 0, 1, 0 ); // optional (необязательно)
var color = new THREE.Color( 0xffaa00 ); // optional (необязательно)
var materialIndex = 0; // optional (необязательно)
var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex );

// add the face to the geometry's faces array
// добавляем грань к массиву граней геометрии
geometry.faces.push( face );

// the face normals and vertex normals can be calculated automatically if not supplied above
// если выше не предоставлено, то нормали граней и вершин могут вычисляться автоматически
geometry.computeFaceNormals();
geometry.computeVertexNormals();

scene.add( new THREE.Mesh( geometry, material ) );

Другие примеры:

ubiquity / test
svg / sandbox
WebGL / exporter / obj
WebGL / shaders / vector

Конструктор

Face3( 
- ячейки сетки-арматуры, из которой состоят все грани геометрического элемента')" onmouseout="hide()">a, 
- ячейки сетки-арматуры, из которой состоят все грани геометрического элемента')" onmouseout="hide()">b, 
- ячейки сетки-арматуры, из которой состоят все грани геометрического элемента')" onmouseout="hide()">c, 
normal - нормаль')" onmouseout="hide()">normal, color, materialIndex )

Свойства

Методы

Исходники

      Geometry

Основной класс для всех геометрий (но не для BufferGeometries). Также его можно использовать напрямую для построения собственных и нестандартных геометрий.
С Geometry работать легче, чем с BufferGeometries, так как она хранит атрибуты, такие как вершины, грани, цвета и тому подобное непосредственно у себя (а не в буферах), хотя она, как правило, работает медленней.

Пример

var geometry = new THREE.Geometry();

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

geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );

geometry.computeBoundingSphere();

Другие примеры:

WebGL / geometry / minecraft,
WebGL / geometry / minecraft / ao,
WebGL / geometry / nurbs,
WebGL / geometry / spline / editor,
WebGL / interactive / cubes / gpu,
WebGL / interactive / lines,
WebGL / interactive / raycasting / points,
WebGL / interactive / voxelpainter,
WebGL / morphNormals.

Конструктор

Geometry()

Конструктор не принимает аргументов.

Свойства

Методы

В данном классе возможно применение методов EventDispatcher.

Исходники

BufferAttribute →

      InstancedBufferAttribute

В отличие от слова «создание», применяется не к объекту, а к классу.
То есть, говорят: (в виртуальной среде) создать экземпляр класса
или, другими словами, инстанцировать класс.')" onmouseout="hide()">Инстанцированная версия BufferAttribute (то есть, это экземпляр класса BufferAttribute). An instanced version of BufferAttribute.

Конструктор

InstancedBufferAttribute( array, itemSize, meshPerAttribute )

Свойства

Смотрите наследуемые свойства в описании BufferAttribute.

Методы

Смотрите наследуемые методы в описании BufferAttribute.

Исходники

BufferGeometry →

      InstancedBufferGeometry

В отличие от слова «создание», применяется не к объекту, а к классу.
То есть, говорят: (в виртуальной среде) создать экземпляр класса
или, другими словами, инстанцировать класс.')" onmouseout="hide()">Инстанцированная версия BufferGeometry (то есть, это экземпляр класса BufferGeometry).

Конструктор

InstancedBufferGeometry( )

Свойства

Смотрите наследуемые свойства в описании BufferGeometry.

Методы

Смотрите наследуемые методы в описании BufferGeometry.

Исходники

InterleavedBuffer →

      InstancedInterleavedBuffer

Инстанцированная версия InterleavedBuffer.

Конструктор

InstancedInterleavedBuffer( array, itemSize, meshPerAttribute )

Свойства

Смотрите наследуемые свойства в описании InterleavedBuffer.

Методы

Смотрите наследуемые методы в описании InterleavedBuffer.

Исходники

      InterleavedBuffer

Конструктор

InterleavedBuffer( array, stride )

InterleavedBuffer( [page:TypedArray array, [page:Integer stride )

Свойства

Методы

Исходники

      InterleavedBufferAttribute

Конструктор

InterleavedBufferAttribute( interleavedBuffer, itemSize, offset, normalized )

[name]( [page:InterleavedBuffer interleavedBuffer], [page:Integer itemSize], [page:Integer offset], [page:Boolean normalized] )

Свойства

Методы

Исходники

      Layers

Объект предоставляет битовую маску и методы допуска, используемые для управления видимостью Object3D. An object providing a bit mask and accessor methods used to control an Object3D's visibility. A Layers object assigns an Object3D to 0 or more of 32 layers numbered 0 to 31.

This is used to control visibility - an object must share a layer with a camera to be visible when that camera's view is renderered.

All classes that inherit from Object3D have a .layers property which is an instance of this class. An object providing a bit mask and accessor method used to control an [page:Object3D]'s visibility. A [page:Layers] object assigns an [page:Object3D] to 0 or more of 32 layers numbered 0 to 31.

Конструктор

Layers()

Создает новый объект Layers, принадлежность которого установлена изначально на слой 0.

Свойства

Методы

Исходники

      Object3D

Object3D является базовым классом для большинства объектов three.js и предоставляет набор свойств и методов для управления объектами в трехмерном пространстве.
Обратите внимание, что имеется возможность для группировки объектов с помощью метода .add( object ), который добавляет объект в качестве дочернего, но, тем не менее, для этого лучше использовать класс Group.

Конструктор

Object3D()

Конструктор не принимает аргументов.

Свойства

Исходники

      Uniform

Uniform'ы являются глобальными переменными GLSL. Они передаются в шейдерные программы.

Пример

При объявлении uniform из ShaderMaterial, он объявляется по значению или по объекту.

uniforms: {
	time: { value: 1.0 },
	resolution: new THREE.Uniform(new THREE.Vector2())
}

Типы Uniform

Каждый uniform должен иметь свойство value. Тип этого value должен соответствовать типу переменной uniform в коде GLSL, как указано для примитивных типов GLSL в таблице ниже. The type of the value must correspond to the type of the uniform variable in the GLSL code as specified for the primitive GLSL types in the table below. Поддерживаются также структуры и массивы uniform. Массивы примитивных типов GLSL должны либо указываться как массивы соответствующих объектов THREE, либо как двумерный массив, содержащий данные всех объектов. Uniform structures and arrays are also supported. GLSL arrays of primitive type must either be specified as an array of the corresponding THREE objects or as a flat array containing the data of all the objects. Другими словами; примитивы GLSL в массивах не должны быть представлены массивами. Это правило не применяется транзитивно. In other words; GLSL primitives in arrays must not be represented by arrays. This rule does not apply transitively. Массив из массивов vec2, каждый из которых длиной в пять векторов, должен быть массивом массивов либо из пяти объектов Vector2, либо из десяти чисел. An array of vec2 arrays, each with a length of five vectors, must be an array of arrays, of either five Vector2 objects or ten numbers.
Типы Uniform

Типы GLSL	Типы JavaScript
int	Number
float	Number
bool	Boolean
bool	[page:Number
vec2	THREE.Vector2
vec2	Float32Array(*)
vec2	[page:Array Array (*)
vec3	[page:Vector3 THREE.Vector3
vec3	[page:Color THREE.Color]
vec3	[page:Float32Array Float32Array] (*)
vec3	[page:Array Array] (*)
vec4	[page:Vector4 THREE.Vector4]
vec4	[page:Quaternion THREE.Quaternion]
vec4	[page:Float32Array Float32Array] (*)
vec4	[page:Array Array] (*)
mat2	[page:Float32Array Float32Array] (*)
mat2	[page:Array Array] (*)
mat3	[page:Matrix3 THREE.Matrix3]
mat3	[page:Float32Array Float32Array] (*)
mat3	[page:Array Array] (*)
mat4	[page:Matrix3 THREE.Matrix4]
mat4	[page:Float32Array Float32Array] (*)
mat4	[page:Array Array (*)
ivec2, bvec2	[page:Float32Array Float32Array (*)
ivec2, bvec2	[page:Array Array (*)
ivec3, bvec3	[page:Int32Array Int32Array (*)
ivec3, bvec3	[page:Array Array (*)
ivec4, bvec4	[page:Int32Array Int32Array (*)
ivec4, bvec4	[page:Array Array (*)
sampler2D	[page:Texture THREE.Texture
samplerCube	[page:CubeTexture THREE.CubeTexture

(*) Same for an (innermost) array (dimension) of the same GLSL type, содержащего компоненты всех векторов или матриц в массиве.

Конструктор

Uniform( value )

Свойства

Методы

Исходники