Three.js

Математика

В этом разделе рассматриваются некоторые объекты и функции, имеющие отношение к математике.

Box2

Представляет собой ограниченный прямоугольник в двумерном пространстве.

Конструктор

Box2( 
сокращ. от англ. слова minimum - минимум');" onmouseout="hide()">min, 
сокращ. от англ. слова maximum - максимум');" onmouseout="hide()">max )

Создает прямоугольник, ограниченный по min и max.

Свойства

Методы

Исходники

Box3

Представляет собой прямоугольный параллелепипед или куб в 3-мерном пространстве. Основное назначение данного класса - представление прямоугольного параллелепипеда со сторонами, параллельными осям координат (в англоязычном варианте это Minimum Bounding Boxes), для ограничения некоторых геометрических объектов в пространстве.

Конструктор

Box3( min, max )

Создает Box3, с границами по min и max.

Свойства

Методы

Исходники

Color

Класс представляющий цвет.

Пример

Класс Color может быть инициализирован любым из следующих способов:

// empty constructor - will default white
// пустой конструктор - по умолчанию цвет будет белым
var color = new THREE.Color();

// Hexadecimal color (recommended)
// шестнадцатиричное значение цвета (рекомендуется)
var color = new THREE.Color( 0xff0000 );

// RGB string
// строковое RGB значение
var color = new THREE.Color("rgb(255, 0, 0)");
var color = new THREE.Color("rgb(100%, 0%, 0%)");

// X11 color name - all 140 color names are supported.
// Note the lack of CamelCase in the name
// название цвета X11 - поддерживаются все 140 названий цвета.
// обратите внимание, в названии цвета отсутствует CamelCase - верблюжий стиль
var color = new THREE.Color( 'skyblue' );

// HSL string
// строковое значение HSL
var color = new THREE.Color("hsl(0, 100%, 50%)");

// Separate RGB values between 0 and 1
// отдельные значения RGB от 0 до 1
var color = new THREE.Color( 1, 0, 0 );

Конструктор

Color( r, g, b )

Цвет по умолчанию - белый (white).
Если указаны все аргументы, то r будет красным компонентом, g - зеленым, а b будет синим компонентом цвета.
Когда установлен только аргумент r, то:

• это может быть шестнадцатиричное значение цвета (рекомендуется к применению).
• это может быть другой экземпляр цвета.
• это может быть строковое значение стиля CSS, например:
  'rgb(250, 0,0)'
  'rgb(100%,0%,0%)'
  'hsl(0, 100%, 50%)'
  '#ff0000'
  '#f00'
  'red'

Свойства

Методы

Исходники

Cylindrical

Координаты точки в цилиндрической системе координат.
Цилиндрическая система координат на русском языке.

Конструктор

Cylindrical( radius, theta, y )

Свойства

Методы

Исходники

Euler

Класс, представляющий углы Эйлера. Вот статья про углы Эйлера в русскоязычной Википедии.
Углы Эйлера описывают изменения при вращении объекта по его различным осям с определенными значениями для каждой оси и с указанной последовательностью вращения по осям.

Пример

var a = new THREE.Euler( 0, 1, 1.57, 'XYZ' );
var b = new THREE.Vector3( 1, 0, 1 );
b.applyEuler(a);

Конструктор

Euler( x, y, z, order )

Свойства

Методы

Исходники

Frustum

Frustums are used to determine what is inside the camera's field of view. They help speed up the rendering process.
Frustums are used to determine what is inside the camera's field of view. They help speed up the rendering process - object which lie outside a camera's frustum can safely be excluded from rendering.
Статья о усеченной пирамиде в русскоязычной Википедии.
Этот класс в основном предназначен для внутреннего использования визуализатором (рендерером) для расчета усеченных пирамид камеры и теневой камеры. This class is mainly intended for use internally by a renderer for calculating a camera or shadowCamera's frustum.

Конструктор

Frustum( p0, p1, p2, p3, p4, p5 )

Создает новый Frustum.

Свойства

Методы

Исходники

Interpolant

Abstract base class of interpolants over parametric samples.
The parameter domain is one dimensional, typically the time or a path along a curve defined by the data.
The sample values can have any dimensionality and derived classes may apply special interpretations to the data.
This class provides the interval seek in a Template Method, deferring the actual interpolation to derived classes.
Time complexity is *O(1)* for linear access crossing at most two points and *O(log N)* for random access, where *N* is the number of positions.
References: [link:http://www.oodesign.com/template-method-pattern.html http://www.oodesign.com/template-method-pattern.html

Конструктор

Interpolant( parameterPositions, sampleValues, sampleSize, resultBuffer )

Свойства

Методы

Исходники

Interpolant →

CubicInterpolant

Пример

var interpolant = new THREE.[name](
  new Float32Array( 2 ),
  new Float32Array( 2 ),
  1,
  new Float32Array( 1 )
);

interpolant.evaluate( 0.5 );

Конструктор

CubicInterpolant( parameterPositions, sampleValues, sampleSize, resultBuffer )

Свойства

Методы

Исходники

Interpolant →

DiscreteInterpolant

Пример

var interpolant = new THREE.DiscreteInterpolant(
  new Float32Array( 2 ),
  new Float32Array( 2 ),
  1,
  new Float32Array( 1 )
);

interpolant.evaluate( 0.5 );

Конструктор

DiscreteInterpolant( parameterPositions, sampleValues, sampleSize, resultBuffer )

Свойства

Методы

Исходники

Interpolant →

LinearInterpolant

Пример

var interpolant = new THREE.LinearInterpolant(
  new Float32Array( 2 ),
  new Float32Array( 2 ),
  1,
  new Float32Array( 1 )
);

interpolant.evaluate( 0.5 );

Конструктор

LinearInterpolant( parameterPositions, sampleValues, sampleSize, resultBuffer )

Свойства

Методы

Исходники

Interpolant →

QuaternionLinearInterpolant

Пример

var interpolant = new THREE.QuaternionLinearInterpolant(
  new Float32Array( 2 ),
  new Float32Array( 2 ),
  1,
  new Float32Array( 1 )
);

interpolant.evaluate( 0.5 );

Конструктор

QuaternionLinearInterpolant( parameterPositions, sampleValues, sampleSize, resultBuffer )

Свойства

Методы

Исходники

Line3

Отрезок геометрической линии, представленный начальной (start) и конечной (end) точками.

Конструктор

Line3( start, end )

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

Свойства

Методы

Исходники

Math

Объект с некоторыми вспомогательными математическими функциями.

Функции

Исходники

Matrix3

Класс, представляющий матрицу 3×3. Вот статья русскоязычной Википедии о матрицах.

Пример

var m = new Matrix3();

Примечание о упорядочивании по рядам и колонкам

Метод set() принимает аргументы, упорядоченные по рядам, в то время как внутри они хранятся в массиве элементов, упорядоченном по колонкам.
Это значит, что вызов

m.set( 11, 12, 13,
       21, 22, 23,
       31, 32, 33 );

приведет в результате к массиву элементов, содержащему:

m.elements = [ 11, 21, 31,
               12, 22, 32,
               13, 23, 33 ];

и внутри все вычисления выполняются с использованием упорядочивания по колонкам. Однако, поскольку фактически порядок размещения элементов в матрице, с точки зрения математики, не имеет никакого значения, а большинство людей привыкли представлять матрицы упорядоченными по строкам, то в документации three.js матрицы также показываются упорядоченными по строкам. Просто имейте ввиду, чтобы понять смысл расчетов, при чтении исходного кода нужно переставлять (транспонировать, в англоязычном варианте - transpose) любые матрицы, представленные здесь. То есть, нужно каждую строчку исходной матрицы записать в виде столбца в том же порядке.

Конструктор

Matrix3( )

Создает и инициализирует Matrix3 как единичную матрицу 3×3.
Вот статья русскоязычной Википедии о единичной матрице.

Свойства

Методы

Исходники

Matrix4

Класс, представляющий матрицу 4×4 (англоязычный вариант matrix).
Наиболее распространенным использование матрицы 4×4 в трехмерной компьютерной графике является матрица перехода (в англоязычном варианте Transformation Matrix). Чтобы иметь представление о матрицах перехода (матрицах трансформаций), используемых в WebGL, ознакомьтесь с этим руководством. Вот эта же статья на русском языке.
При помощи перемножения с матрицей, становятся возможными преобразования трехмерного вектора, представляющего точку в трехмерном пространстве, такие как перенос, вращение, сдвиг, масштабирование, отражение, ортогональное или перспективное проецирование и так далее. Это называется применением матрицы к вектору.
Каждый трехмерный объект (Object3D) имеет три, взаимосвязанных матрицы has three associated Matrix4s:

• Object3D.matrix: здесь хранится локальное изменение объекта.
• Object3D.matrixWorld: глобальное или "мировое" изменение объекта. Это преобразование объекта относительно его родителя. Если у объекта нет родителя, то здесь все идентично с локальным изменением.
• Object3D.modelViewMatrix: здесь представлено преобразование объекта относительно системы координат камеры. Матрица modelViewMatrix объекта - это матрица matrixWorld предварительно перемноженная с матрицей matrixWorldInverse камеры.

Камеры имеют две дополнительные матрицы Matrix4:

• Camera.matrixWorldInverse: матрица просмотра - инверсия матрицы "мира" (matrixWorld) камеры.
• Camera.projectionMatrix: представляет сведения о том, как проецировать сцену на пространство клипа.

Примечание о упорядочивании по рядам и колонкам

Метод set() принимает аргументы, упорядоченные по рядам, в то время как внутри они хранятся в массиве элементов, упорядоченном по колонкам.
Это значит, что вызов

var m = new Matrix4();

m.set( 11, 12, 13, 14,
       21, 22, 23, 24,
       31, 32, 33, 34,
       41, 42, 43, 44 );

приведет к массиву элементов, содержащему:

m.elements = [ 11, 21, 31, 41,
               12, 22, 32, 42,
               13, 23, 33, 43,
               14, 24, 34, 44 ];

и внутри все вычисления выполняются с использованием упорядочивания по колонкам. Однако, поскольку фактически порядок размещения элементов в матрице, с точки зрения математики, не имеет никакого значения, а большинство людей привыкли представлять матрицы упорядоченными по строкам, то в документации three.js матрицы также показываются упорядоченными по строкам. Просто имейте ввиду, чтобы понять смысл расчетов, при чтении исходного кода нужно переставлять (транспонировать, в англоязычном варианте - transpose) любые матрицы, представленные здесь. То есть, нужно каждую строчку исходной матрицы записать в виде столбца в том же порядке.

Конструктор

Matrix4()

Создает и инициализирует Matrix4 как единичную матрицу 4×4 (в англоязычном варианте это identity matrix).

Свойства

Методы

Исходники

Plane

Двумерная поверхность, расширяемая до бесконечности в трехмерном пространстве, представленная в Hessian normal form нормальным вектором единичной длины и константой.

Конструктор

Plane( normal, constant )

Свойства

Методы

Исходники

Quaternion

Реализация кватерниона. Вот статья Википедии о кватернионе на русском языке.
Кватернионы используются при расчетах вращающихся элементов (вот эта статья Википедии на русском), при этом, среди других преимуществ, не встречаясь с ужасной проблемой шарнирного замка. Вот статья Википедии о шарнирном замке на русском языке.

Пример

var quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 2 );

var vector = new THREE.Vector3( 1, 0, 0 );
vector.applyQuaternion( quaternion );

Конструктор

Quaternion( x, y, z, w )

Свойства

Методы

• Изменились свойства x, y, z или w.
• Был вызов функций set, copy, clone, setFromAxisAngle, setFromRotationMatrix, conjugate, normalize, multiplyQuaternions, slerp или fromArray.
• Вызывалась функция setFromEuler со своим аргументом update, установленным как true.

Статические методы

Статические методы (в противоположность методам для отдельных экземпляров) разработаны для вызова непосредственно от класса, а не от отдельного экземпляра. Поэтому для использования статической версии метода, вызов делается так:

THREE.Quaternion.slerp( qStart, qEnd, qTarget, t );

Для сравнения, чтобы вызвать "обычный" или "экземплярный" метод slerp нужно сделать следующее:

// instantiate a quaternion with default values
// создаем экземпляр кватерниона со значениями по умолчанию
var q = new THREE.Quaternion();

// call the instanced slerp method (вызов "экземплярного" метода slerp)
q.slerp( qb, t )

Исходники

Ray

Луч (ray), который испускается из источника в определенном направлении. Данный класс используется RayCaster'ом для оказания помощи с raycasting. Вот описание рейкастинга в Википедии на русском языке. Рейкастинг используется для выборки курсором мышки (вычисляет какие из объектов в трехмерном пространстве накрывает курсор мышки) среди других объектов.

Конструктор

Ray( origin, direction )

Создает новый Ray.

Свойства

Методы

Исходники

Sphere

Сфера, определяемая центром и радиусом.

Конструктор

Sphere( center, radius )

Создает новую сферу.

Свойства

Методы

Исходники

Spherical

Координаты точки в сферической системе координат.
Сферическая система координат на русском языке.

Конструктор

Spherical( radius, phi, theta )

Полюсы (phi) находятся на положительной и отрицательной сторонах оси y. Экватор (theta) начинается с положительной стороны оси z.

Свойства

Методы

Исходники

Triangle

Треугольник - геометрическая фигура, определяемая тремя трехмерными векторами (Vector3), представляющими три его угла.

Конструктор

Triangle( a, b, c )

Создает новый Triangle.

Свойства

Методы

Исходники

Vector2

Класс, представляющий двумерный (2D) вектор. (Вот статья Википедии о векторном пространстве на русском языке.) Вектор 2D - это упорядоченная пара чисел (помеченных как x и y), которая может использоваться для представления ряда вещей, таких как:

• Точка в двумерном пространстве (т.е. позиция на плоскости).
• Направление и расстояние по плоскости. В three.js расстояние всегда будет Эвклидовым расстоянием (т.е. расстоянием по прямой линии) от точки начала координат (0, 0) до координат заданной точки (x, y), направление также измеряется от (0, 0) к (x, y).
• Любая произвольная упорядоченная пара чисел.

Имеются и другие вещи, которые можно представить как 2D-вектор, однако это его наиболее распространенное использование в three.js.

Пример

var a = new THREE.Vector2( 0, 1 );

// no arguments; will be initialised to (0, 0)
// без аргументов вектор будет инициализирован как (0, 0)
var b = new THREE.Vector2( );

var d = a.distanceTo( b );

Конструктор

Vector2( x, y )

Создает новый Vector2.

Свойства

Методы

Исходники

Vector3

Класс, представляющий трехмерный (3D) вектор. (Вот статья Википедии о векторном пространстве на русском языке.) Вектор 3D - это упорядоченная тройка (триплет) чисел (помеченных как x, y и z), которая может использоваться для представления ряда вещей, таких как:

• Точка в трехмерном пространстве.
• Направление и расстояние в трехмерном пространстве. В three.js расстояние всегда будет Эвклидовым расстоянием (т.е. расстоянием по прямой линии) от точки начала координат (0, 0, 0) до координат заданной точки (x, y, z), направление также измеряется от (0, 0, 0) к (x, y, z).
• Любая произвольная упорядоченная тройка (триплет) чисел.

Имеются и другие вещи, которые можно представить как 3D-вектор (такие как векторы импульса и т. д.), однако это его наиболее распространенное использование в three.js.

Пример

var a = new THREE.Vector3( 0, 1, 0 );

// no arguments; will be initialised to (0, 0, 0)
// без аргументов вектор будет инициализирован как (0, 0, 0)
var b = new THREE.Vector3( );

var d = a.distanceTo( b );

Конструктор

Vector3 ( x, y, z )

Создает новый трехмерный вектор Vector3.

Свойства

Методы

Исходники

Vector4

Класс, представляющий четырехмерный (4D) вектор. (Вот статья Википедии о векторном пространстве на русском языке.) Вектор 4D - это упорядоченная четверка (квадруплет) чисел (помеченных как x, y, z и w), которая может использоваться для представления ряда вещей, таких как:

• Точка в четырехмерном пространстве.
• Направление и расстояние в четырехмерном пространстве. В three.js расстояние всегда будет Эвклидовым расстоянием (т.е. расстоянием по прямой линии) от точки начала координат (0, 0, 0, 0) до координат заданной точки (x, y, z, w), направление также измеряется от (0, 0, 0, 0) к (x, y, z, w).
• Любая произвольная упорядоченная четверка (квадруплет) чисел.

Имеются и другие вещи, которые можно представить как 4D-вектор, однако это его наиболее распространенное использование в three.js.

Пример

var a = new THREE.Vector4( 0, 1, 0, 0 );

// no arguments; will be initialised to (0, 0, 0, 1)
// без аргументов вектор будет инициализирован как (0, 0, 0, 1)
var b = new THREE.Vector4( );

var d = a.dot( b );

Конструктор

Vector4 ( x, y, z, w )

Создает новый Vector4.

Свойства

Методы

Исходники

Vector4.js на Гитхабе