Three.js

Математика

Box2

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

Конструктор

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

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

Свойства

Методы

Исходники

Box3

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

Конструктор

Box3( 
сокращ. от англ. слова minimum - минимум')" onmouseout="hide()">min, 
сокращ. от англ. слова maximum - максимум')" onmouseout="hide()">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( 
hex - шестнадцатиричное значение или string - строковое значение')">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

Frustum'ы используются для определения того, что находится в поле просмотра камеры. Они помогают ускорить процесс визуализации (рендеринга) - объект, находящийся вне области просмотра камеры (в виде усеченной пирамиды), вполне можно благополучно исключить из визуализации.
Статья о усеченной пирамиде в русскоязычной Википедии.
Этот класс в основном предназначен для внутреннего использования визуализатором (рендерером) для расчета областей просмотра (в виде усеченных пирамид) камеры и теневой камеры.

Конструктор

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

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

Свойства

Методы

Исходники

Interpolant

Абстрактный базовый класс
— в вычислительной математике это функция,
которая строится по значениям в некоторых
точках')" onmouseout="hide()">интерполянтов по выборкам параметра. Статья Википедии об интерполяции.
Область параметра является одномерной, обычно это время или путь вдоль кривой, определяемой данными.
Значения выборок могут иметь любую размерность, а производные классы могут применять к данным специальные интерпретации.
Данный класс предоставляет поиск интервала в
— поведенческий шаблон проектирования,
определяющий основу алгоритма и
позволяющий наследникам переопределять
некоторые шаги алгоритма, не изменяя его
структуру в целом.')" onmouseout="hide()">шаблонном методе, перекладывая интерполяцию на производные (дочерние) классы.

алгоритма от количества обрабатываемых входных данных')" onmouseout="hide()">Временна́я сложность алгоритма равна O(1) (т.е. алгоритм постоянного времени) при линейном переходе не более чем через две точки, и равна O(log N) (логарифмическое время) для произвольной выборки, где N - это число позиций.
Ссылки: 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 - начало, старт')" onmouseout="hide()">start, 
end - конец')" onmouseout="hide()">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) имеет три взаимосвязанных четырехмерных матрицы:

• 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
к поверхности представляет собой вектор, перпендикулярный
поверхности в данной точке.')" onmouseout="hide()">нормальным вектором единичной длины и константой.

Конструктор

Plane( 
normal - нормаль')" onmouseout="hide()">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 - источник')" onmouseout="hide()">origin, 
direction - направление')" onmouseout="hide()">direction )

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

Свойства

Методы

Исходники

Sphere

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

Конструктор

Sphere( 
center - центр')" onmouseout="hide()">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.

Свойства

Методы

Исходники