Three.js

From three.js

previous page next page

Дополнения

Здесь дается описание дополнительных классов к уже имеющимся.

Earcut - реализация алгоритма разбиения многоугольника на треугольники, т.е. триангуляция

ShapeUtils - вспомогательные функции для форм

Дополнения к основным элементам three.js

Curve - базовый класс для кривых линий

CurvePath - базовый класс массивов кривых линий

Font - создание набора форм для шрифтов

Interpolations - методы интерполяции (Катмулл-Ром, Безье)

Path - представление двумерного пути (контура)

Shape - произвольная двумерная фигурная плоскость

ShapePath - класс для конвертирования ряда фигур в массив из Path

Дополнения к кривым

ArcCurve - псевдоним (алиас) для EllipseCurve

CatmullRomCurve3 - трехмерная кривая по алгоритму Катмулл-Ром

CubicBezierCurve - кубическая кривая Безье

CubicBezierCurve3 - трехмерная кубическая кривая Безье

EllipseCurve - двумерная кривая в виде эллипса

LineCurve - отрезок линии в двумерном пространстве

LineCurve3 - отрезок линии в трехмерном пространстве

QuadraticBezierCurve - квадратичная кривая Безье

QuadraticBezierCurve3 - трехмерная квадратичная кривая Безье

SplineCurve - сплайновая кривая

Дополнения к объектам

ImmediateRenderObject - класс для немедленной визуализации объектов

Earcut

Реализация алгоритма триангуляции (т.е. разбиения на треугольники) полигона (многоугольника). Earcut в переводе на русский язык будет "ухорез", здесь имеется ввиду способ нарезания треугольников по имеющимся координатам вершин. Данный код - перенос из mapbox/earcut.

Методы

.triangulate( data, holeIndices, dim )

data -- "плоский" массив координат вершин.

holeIndices -- массив индексов дыр, если они имеются.

dim -- число координат на вершину во входном массиве.

Исходники

Earcut.js на github.com

ShapeUtils

Класс содержащий вспомогательные функции для форм.
Обратите внимание, что все они являются линейными функциями, поэтому необходимо отдельно рассчитывать для x, y (и z, w, если они есть) компоненты вектора.

Методы

.area( contour )

contour -- двумерный многоугольник (полигон).

Метод вычисляет площадь двумерного многоугольника, переданного в аргументе contour.

.isClockwise( pts )

pts -- точки, определяющие двумерный многоугольник.

Обратите внимание, что это линейная функция, поэтому необходимо делать отдельные вычисления для x и y компонентов многоугольника.
Используется внутри three.js классами Path, ExtrudeGeometry и ShapeGeometry.


т.е. разбиение формы на треугольники')" onmouseout="hide()">.triangulateShape( contour, holes )

contour -- двумерный многоугольник.

holes -- массив дырок.

Используется внутри three.js для вычисления граней в формах с дырками классами ExtrudeGeometry и ShapeGeometry.

Исходники

ShapeUtils.js на github.com

Дополнения к основным элементам three.js

Curve

Абстрактный базовый класс для создания объекта Curve, который содержит методы интерполяции. Массив объектов Curve рассматривается в
curve path - криволинейный путь')" onmouseout="hide()">CurvePath.

Конструктор

Curve( )

Данный конструктор создает новую Curve.

Свойства

.arcLengthDivisions

Значение данного свойства определяет количество частей при вычислении совокупной длины отрезков кривой линии, полученных через getLengths. Если кривая линия очень велика, то для обеспечения точности при использовании методов типа getSpacedPoints, рекомендуется увеличивать значение arcLengthDivisions. Значение по умолчанию равно 200.

Методы


clone - клонировать')" onmouseout="hide()">.clone( )

Создает клон данного экземпляра кривой линии.

.computeFrenetFrames( segments, closed )

Метод генерирует репер Френе. Используется в геометрических элементах вроде TubeGeometry или ExtrudeGeometry.


copy - копировать')" onmouseout="hide()">.copy( 
source - источник, исходник')" onmouseout="hide()">source )

Метод копирует в данный экземпляр другой объект Curve, переданный в аргументе source.


from JSON - из (объекта в формате) JSON')" onmouseout="hide()">.fromJSON( 
текстовый формат описания объекта, основанный на JavaScript')" onmouseout="hide()">json)

Копирует данные из переданного объекта JSON в данный экземпляр кривой.

.getLength( )

Метод получает полную длину дуги кривой.

.getLengths( divisions )

Метод получает список совокупные длины частей кривой.

.getPoint( t, optionalTarget )

t - позиция на кривой. Значение должно быть в диапазоне [ 0, 1 ].

optionalTarget — если аргумент указан, то результат метод будет скопирован в переданный вектор, в противном случае будет создан новый вектор. Дополнительный, необязательный параметр.

Метод возвращает вектор заданного положения на кривой.

.getPointAt( u, optionalTarget )

u - позиция на кривой, соответствующей длине дуги. Значение должно быть в диапазоне [ 0, 1 ].

Метод возвращает вектор заданной позиции на кривой, соответствующей длине дуги.

.getPoints( divisions )

divisions -- количество частей, на которые разделена кривая. Значение по умолчанию равно 5.

Метод, при помощи getPoint( t ) возвращает набор точек из divisions + 1.

.getSpacedPoints( divisions )

divisions -- количество частей, на которые разделена кривая. Значение по умолчанию равно 5.

Метод, при помощи getPointAt( u ) возвращает набор равноразнесенных точек из divisions + 1.

.getTangent( t )

Метод возвращает единичный вектор, касательный к точке t. Returns a unit vector tangent at t. If the derived curve does not implement its tangent derivation, two points a small delta apart will be used to find its gradient which seems to give a reasonable approximation.

.getTangentAt( u )

Возвращает касательную к точке, равноудаленной от концов кривой, из точки, заданной в getTangent.

.getUtoTmapping( u, distance )

Аргумент u задается в диапазоне ( 0 .. 1 ), метод возвращает значение t, также в диапазоне ( 0 .. 1 ). u и t далее могут, с помощью getPoint, использоваться для получения точек, равноудаленных от концов кривой.

.toJSON( )

Метод возвращает объект в формате
текстовый формат описания объекта, основанный на JavaScript')" onmouseout="hide()" target="_blank">JSON, представляющий данный экземпляр Curve.

.updateArcLengths( )

Метод обновляет кэш накопленных размеров частей кривой.

Исходники

Curve.js на github.com

Curve →

CurvePath

Абстрактный базовый класс дальнейшего расширения возможностей
curve - кривая')" onmouseout="hide()">Curve. CurvePath - это просто массив связанных кривых, поддерживающий интрефейс (API) отдельной кривой.

Конструктор

CurvePath( )

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

Свойства

Сведения об общих свойствах смотрите в описании базового класса Curve.

.autoClose

Свойство определяет, будет или нет автоматическое замыкание пути (траектории).

.curves

Массив кривых.

Методы

Сведения об общих методах смотрите в описании базового класса Curve.

.add( 
curve - кривая')" onmouseout="hide()">curve )

Метод добавляет кривую в массив кривых.

.closePath( )

Добавляет LineCurve для замыкания пути (контура).

.getCurveLengths( )

Метод складывает вместе длины кривых в массиве curves.

Исходники

CurvePath.js на github.com

Font

Создает набор форм, представляющий шрифт, загруженный в формате JSON.
Он используется внутри загрузчика шрифта.

Примеры

geometry / text / shapes
shaders / vector

Конструктор

Font( data )

data -- данные в формате JSON, представляющие шрифт.

Данный конструктор создает новый Font, который является массивом форм.

Свойства

.data

Данные в формате JSON, переданные в конструктор.

.isFont

Свойство используется для проверки, является ли данный класс и производные от него шрифтами. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется рендерером (визуализатором) для оптимизации внутри three.js.

Методы

.generateShapes( text, size, divisions )

text -- строка текста.

size -- масштаб форм. Значение по умолчанию равно 100. Дополнительный, необязательный аргумент.

divisions -- число отрезков, на которые будет разделен контур формы. Значение по умолчанию равно 4. Дополнительный, необязательный аргумент.

Метод создает массив форм, представляющий текст данным шрифтом.

Исходники

Font.js на github.com

Interpolations

Здесь рассматриваются методы построения кривых по алгоритму Катмулл-Ром и Безье.

Сплайновые кривые по алгоритму Катмулл-Ром

Сплайн назван в честь авторов: Эдвина Катмулла (Edwin Catmull) и Рафаэля Рома (Raphael Rom). ... читать далее

Как следует из статьи Сплайн Эрмита в Википедии, сплайновая кривая по алгоритму Катмулл-Ром является частным случаем кардинального сплайна, которая, в свою очередь, является видом кубического сплайна Эрмита. и https://www.mvps.org/directx/articles/catmull/ https://ru.wikipedia.org/wiki/%D0%A1%D0%BF%D0%BB%D0%B0%D0%B9%D0%BD https://ru.wikipedia.org/wiki/%D0%A1%D0%BF%D0%BB%D0%B0%D0%B9%D0%BD_%D0%AD%D1%80%D0%BC%D0%B8%D1%82%D0%B0 a Catmull–Rom spline is obtained, being a special case of a cardinal spline. This assumes uniform parameter spacing. The curve is named after Edwin Catmull and Raphael Rom. The principal advantage of this technique is that the points along the original set of points also make up the control points for the spline curve. Two additional points are required on either end of the curve. По умолчанию выполнение алгоритма Catmull–Rom может создавать циклы и самопересечения. The default implementation of the Catmull–Rom algorithm can produce loops and self intersections. The chordal and centripetal Catmull–Rom implementations solve this problem, but use a slightly different calculation. In computer graphics, Catmull–Rom splines are frequently used to get smooth interpolated motion between key frames. For example, most camera path animations generated from discrete key-frames are handled using Catmull–Rom splines. They are popular mainly for being relatively easy to compute, guaranteeing that each key frame position will be hit exactly, and also guaranteeing that the tangents of the generated curve are continuous over multiple segments.

Кривая будет рассчитываться по следующей формуле

B(t) = (2P₁ - 2P₂ + V₀ + V₁)t³ + (-3P₁ + 3P₂ - 2V₀ - V₁)t² + V₀t + P₁

где

V₀ = (P₂ - P₀)0.5
V₁ = (P₃ - P₁)0.5

То есть, B(t) - это координаты точек на рассчитываемой кривой B в зависимости от шага t, с которым рассчитывается данная кривая. P₀ - P₃ - координаты заданных точек, определяющих кривую. V₀, V₁ - дополнительные точки, производные от опорных точек, в данном случае это среднеарифметические значения координат предыдущей и последующей точек.

Кривые Безье

Это типы кривых, предложенные в 60-х годах XX века независимо друг от друга Пьером Безье и Полем де Кастельжо. Они являются частным случаем многочленов Бернштейна, описанных Сергеем Натановичем Бернштейном в 1912 году. ... читать далее

Для расчета кривой требуются координаты опорных точек. Их может быть две, три, четыре и т.д. Здесь они подразделяются на начальную, конечную и контрольные точки. Причем в случае с двумя опорными точками, контрольной точки нет. Расчет производится в зависимости от параметра t - интерполяционный вес (шаг, с которым высчитывается положение кривой).

Например, имеется две опорные точки с координатами x₀, y₀ (назовем её P₀) и x₁, y₁ (P₁). Параметр t изменяется в диапазоне от 0 до 1 с шагом 0,02. Для каждого значения t высчитываются координаты кривой по формулам:

x = (1−t)x₀ + t*x₁
y = (1−t)y₀ + t*y₁

Получится вот такая "кривая" Безье. Она называется линейная кривая или кривая первой степени или же первого порядка.
Степень или порядок кривой всегда меньше числа опорных точек на единицу.
Если бы эта кривая размещалась в трехмерном пространстве, тогда точно также была рассчитана и третья координата.

z = (1−t)z₀ + t*z₁

Линейная кривая.

Увеличим число опорных точек до трех и получим квадратичную кривую Безье (или кривую Безье второй степени).
Здесь имеется три опорных точки: начальная P₀, контрольная P₁ и конечная P₂ с соответствующими координатами x и y. Точки Q₀ и Q₁ перемещаются (т.е. их координаты изменяются) по отрезкам P₀-P₁ и P₁-P₂ с шагом t=0.02, т.е. они двигаются по линейным кривым.
Точка B перемещается от Q₀ к Q₁ (также с шагом t=0.02) и описывает квадратичную кривую Безье.
Математически это описывается так:

x = (1−t)²x₀ + 2(1−t)t*x₁ + t²x₂
y = (1−t)²y₀ + 2(1−t)t*y₁ + t²y₂

Для трехмерного варианта добавился бы расчет третьей координаты

z = (1−t)²z₀ + 2(1−t)t*z₁ + t²z₂

Квадратичная кривая.

Анимация построения квадратичной кривой Безье.

При добавлении второй контрольной точки получится кубическая кривая Безье или кривая третьего порядка.
Итак, имеются четыре опорных точки: начальная (P₀), две контрольных (P₁, P₂) и конечная - (P₃) с соответствующими координатами x и y.
Точки Q₀, Q₁ и Q₂ перемещаются (т.е. их координаты изменяются) по отрезкам P₀-P₁, P₁-P₂ и P₂-P₃ с шагом t=0.02, т.е. они двигаются по линейным кривым.
Точки R₀ и R₁ перемещаются по отрезкам Q₀-Q₁ и Q₁-Q₂. Они движутся по квадратичным кривым.
А вот по отрезку R₀-R₁ движется точка B (с тем же самым шагом t), которая описывает кривую третьего порядка, т.е. кубическую кривую.

x = (1−t)³x₀ + 3(1−t)²t*x₁ + 3(1−t)t²x₃ + t³x₄
y = (1−t)³y₀ + 3(1−t)²t*y₁ + 3(1−t)t²y₃ + t³y₄

Для трехмерного варианта добавился бы расчет третьей координаты

z = (1−t)³z₀ + 3(1−t)²t*z₁ + 3(1−t)t²z₃ + t³z₄

Кубическая кривая.

Анимация построения кубическая кривой Безье.

Свойства кривой Безье

непрерывность заполнения сегмента между начальной и конечной точками;
кривая всегда располагается внутри фигуры, образованной линиями, соединяющими контрольные точки;
при наличии только двух контрольных точек сегмент представляет собой прямую линию;
прямая линия образуется при коллинеарном (на одной прямой) размещении управляющих точек;
кривая Безье симметрична, то есть обмен местами между начальной и конечной точками (изменение направления траектории) не влияет на форму кривой;
масштабирование и изменение пропорций кривой Безье не нарушает её стабильности, так как она с математической точки зрения «аффинно инвариантна»;
изменение координат хотя бы одной из точек ведет к изменению формы всей кривой Безье;
любой частичный отрезок кривой Безье также является кривой Безье;
степень (порядок) кривой всегда на одну ступень меньше числа контрольных точек. Например, при трех контрольных точках форма кривой — парабола, так как парабола — кривая 2-го порядка;
окружность не может быть описана параметрическим уравнением кривой Безье;
невозможно создать параллельные кривые Безье, за исключением тривиальных случаев (прямые линии и совпадающие кривые), хотя существуют алгоритмы, строящие приближённую параллельную кривую Безье с приемлемой для практики точностью.

сведения из Википедии и сайта javascript.ru

Методы

.CatmullRom( t, p0, p1, p2, p3 )

t -- интерполяционный вес (значение) (шаг, с которым высчитывается положение кривой).

p0, p1, p2, p3 -- точки, определяющие сплайновую кривую.

Используется внутри функции SplineCurve.

.QuadraticBezier( t, p0, p1, p2 )

t -- интерполяционный вес (значение) (шаг, с которым высчитывается положение кривой).

p0, p1, p2 -- начальная, контрольная и конечная точки, определяющие кривую.

Используется внутри классов QuadraticBezierCurve3, QuadraticBezierCurve и Font.

.CubicBezier( t, p0, p1, p2, p3 )

t -- интерполяционный вес (значение) (шаг, с которым высчитывается положение кривой).

p0, p1, p2, p3 -- начальная, две контрольных и конечная точки, определяющие кривую.

Используется внутри классов CubicBezierCurve3, CubicBezierCurve и Font.

Исходники

Interpolations.js на github.com

CurvePath →

Path

Представление двумерного пути или контура. Данный класс предоставляет методы создания путей и контуров двумерных фигур, аналогичных создаваемым с помощью 2D Canvas API.

Пример

var path = new THREE.Path();

  path.lineTo( 0, 0.8 );
  path.quadraticCurveTo( 0, 1, 0.2, 1 );
  path.lineTo( 1, 1 );

  var points = path.getPoints();

  var geometry = new THREE.BufferGeometry().setFromPoints( points );
  var material = new THREE.LineBasicMaterial( { color: 0xffffff } );

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

Конструктор

Path( points )

points -- массив двумерных векторов, (дополнительный, необязательный аргумент).

Создает Path по заданным точкам. Первая точка в массиве points определяет смещение (т.е. это значение свойства currentPoint), затем последующие точки добавляются в массив curves как линейные кривые.
Если точки не указаны (т.е. аргумент points отсутствует), создается пустой путь, а текущей точкой (т.е. значением свойства currentPoint) устанавливается начало координат.

Свойства

Сведения об общих свойствах смотрите в описании базового класса CurvePath.

.currentPoint

Значение этого свойства определяет смещение данного пути. Любая вновь добавляемая кривая будет начинаться отсюда.

Методы

Сведения об общих методах смотрите в описании базового класса CurvePath.


center of the) arc - абсолютный центр дуги')" onmouseout="hide()">.absarc( x, y, radius, startAngle, endAngle, clockwise )

x, y -- координаты абсолютного центра дуги.

radius -- радиус дуги.

startAngle -- начальный угол, в радианах.

endAngle -- конечный угол, в радианах.

clockwise -- проводить ли дугу эллипса по часовой стрелке. Значением по умолчанию является false.

Добавляет к пути полностью позиционированную эллипсовидную кривую.


(positioned) ellipse - полностью позиционированный
эллипс')" onmouseout="hide()">.absellipse( x, y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation )

x, y -- координаты абсолютного центра эллипса.

xRadius -- радиус эллипса по оси x.

yRadius -- радиус эллипса по оси y.

startAngle -- начальный угол, в радианах.

endAngle -- конечный угол, в радианах.

clockwise -- проводить ли дугу по часовой стрелке. Значением по умолчанию является false.

rotation -- угол поворота дуги эллипса в радианах, отсчитываемый от положительной оси X против часовой стрелки. Дополнительный, необязательный аргумент, значение по умолчанию равно 0.

Добавляет к пути полностью позиционированную эллипсовидную кривую.

.arc( x, y, radius, startAngle, endAngle, clockwise )

x, y -- смещение центра дуги, считая от последнего вызова.

radius -- радиус дуги.

startAngle -- начальный угол, в радианах.

endAngle -- конечный угол, в радианах.

clockwise -- проводить ли дугу эллипса по часовой стрелке. Значением по умолчанию является false.

Добавляет к пути эллипсовидную кривую, позиционированную относительно currentPoint.

.bezierCurveTo( 
координата x первой контрольной точки')" onmouseout="hide()">cp1X, 
координата y первой контрольной точки')" onmouseout="hide()">cp1Y, 
координата x второй контрольной точки')" onmouseout="hide()">cp2X, 
координата y второй контрольной точки')" onmouseout="hide()">cp2Y, x, y )

Данный метод создает кривую Безье из currentPoint и двух контрольных точек (координаты первой cp1X и cp1Y, второй cp2X и cp2Y) и обновляет координаты currentPoint до x и y.

.ellipse( x, y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation )

x, y -- смещение центра эллипса, считая от последнего вызова.

xRadius -- радиус эллипса по оси x.

yRadius -- радиус эллипса по оси y.

startAngle -- начальный угол, в радианах.

endAngle -- конечный угол, в радианах.

clockwise -- проводить ли дугу по часовой стрелке. Значением по умолчанию является false.

Добавляет к пути эллипсовидную кривую, позиционированную относительно currentPoint.

.lineTo( x, y )

Метод соединяет линейной кривой от currentPoint до точки на пути с координатами x и y.

.moveTo( x, y )

Метод перемещает currentPoint в точку с координатами x и y.

.quadraticCurveTo( 
- координата x контрольной точки')" onmouseout="hide()">cpX, 
- координата y контрольной точки')" onmouseout="hide()">cpY, x, y )

Метод создает квадратичную кривую из currentPoint и контрольной точки (координаты cpX и cpY) и обновляет координаты currentPoint до x и y.

.setFromPoints( points )

points - массив двумерных векторов.

Метод добавляет точки в массив curves как линейные кривые.

.splineThru( points )

points - массив двумерных векторов.

Подсоединяет к пути новую сплайновую кривую.

Исходники

Path.js на github.com

Path →

Shape

Определяет при помощи путей произвольную двумерную фигурную плоскость с дополнительными отверстиями. Они могут использоваться для получения точек или для получения триангулированных (т.е. разбитых на треугольники) граней в ExtrudeGeometry и ShapeGeometry.

Пример

var heartShape = new THREE.Shape();

heartShape.moveTo( 25, 25 );
heartShape.bezierCurveTo( 25, 25, 20, 0, 0, 0 );
heartShape.bezierCurveTo( 30, 0, 30, 35,30,35 );
heartShape.bezierCurveTo( 30, 55, 10, 77, 25, 95 );
heartShape.bezierCurveTo( 60, 77, 80, 55, 80, 35 );
heartShape.bezierCurveTo( 80, 35, 80, 0, 50, 0 );
heartShape.bezierCurveTo( 35, 0, 25, 25, 25, 25 );

var extrudeSettings = { amount: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };

var geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );

var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );

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

geometry / shapes
geometry / extrude / shapes
geometry / extrude / shapes2

Конструктор

Shape( points )

points -- массив двумерных векторов (дополнительный, необязательный аргумент).

Создает Shape из массива точек. Первая точка определяет смещение, затем последующие точки добавляются к массиву кривых как линейные кривые.
Если точки не предоставлены (аргумент points отсутствует), создается пустая фигура и текущей точкой устанавливается начало координат.

Свойства

Сведения об общих свойствах смотрите в описании базового класса Path.

.holes

Массив путей, определяющих отверстия в форме.


- универсальный уникальный идентификатор')" onmouseout="hide()">.uuid

UUID данного экземпляра. Вот статья Википедии о UUID на русском языке. Он присваивается автоматически и не должен редактироваться.

Методы

Сведения об общих методах смотрите в описании базового класса Path.

.extractPoints( divisions )

divisions -- число отрезков, на которые будет разделен контур фигуры.

Вызывает метод getPoints для фигуры и массива holes и возвращает объект в виде:

{
  shape
  holes
}

где shape и holes являются массивами двумерных векторов.

.getPointsHoles( divisions )

divisions -- число отрезков, на которые будет разделен контур фигуры.

Метод получает массив двумерных векторов, представляющий отверстия в фигуре.

Исходники

Shape.js на github.com

CurvePath →

ShapePath

Этот класс используется для конвертирования ряда фигур в массив путей, например SVG-формы в путь (смотрите пример ниже). Также он используется внутри Font для преобразования шрифта (в формате JSON) в ряд путей.

Пример

geometry / extrude / shapes2

Конструктор

ShapePath( )

Создает новый ShapePath. В отличие от Path, никаких точек не передается, так как ShapePath предназначен для генерации пути уже созданной фигуры.

Свойства

.subPaths

Массив из путей.

.currentPath

Текущий путь, т.е. путь, который создается в настоящий момент.

Методы

.bezierCurveTo( 
- координата X первой контрольной точки')" onmouseout="hide()">cp1X, 
- координата Y первой контрольной точки')" onmouseout="hide()">cp1Y, 
- координата X второй контрольной точки')" onmouseout="hide()">cp2X, 
- координата Y второй контрольной точки')" onmouseout="hide()">cp2Y, x, y )

Метод создает кубическую кривую Безье от смещения текущего пути к точке с координатами, переданными в аргументах x и y, с помощью контрольных точек (с координатами cp1X, cp1Y и cp2X, cp2Y), а затем обновляет смещение текущего пути на значения, переданные в аргументах x и y.

.lineTo( x, y )

Метод создает линию от смещения текущего пути к точке с координатами, переданными в аргументах x и y, а затем обновляет смещение текущего пути на значения, переданные в аргументах x и y.

.moveTo( x, y )

Метод начинает новый путь и вызывает метод Path.moveTo( x, y ) для этого пути. Также указывает currentPath для этого пути.

.quadraticCurveTo( 
- координата X контрольной точки')" onmouseout="hide()">cpX, 
- координата Y контрольной точки')" onmouseout="hide()">cpY, x, y )

Метод создает квадратичную кривую Безье от смещения текущего пути к точке с координатами, переданными в аргументах x и y, с помощью контрольной точки (с координатами cpX и cpY), а затем обновляет смещение текущего пути на значения, переданные в аргументах x и y.

.splineThru( points )

points - массив двумерных векторов.

Присоединяет новую сплайновую кривую к текущему пути.

.toShapes( 
- против часовой стрелки')" onmouseout="hide()">isCCW, noHoles )

isCCW -- изменяет способ генерации основного тела фигуры и отверстий в нем.

noHoles -- определяет, будут или нет генерироваться отверстия.

Метод конвертирует массив вложенных путей в массив форм. По умолчанию, основные тела фигур определяются по часовой стрелке (CW - clockwise), а отверстия в них - против часовой стрелки (CCW - counterclockwise). Если аргумент isCCW установлен как true, то эти направления переворачиваются. Если параметр noHoles установлен как true, то все пути задаются как для основных тел фигур, а аргумент isCCW игнорируется.

Исходники

Path.js на github.com

Дополнения к кривым

EllipseCurve →

ArcCurve

Псевдоним (алиас) для EllipseCurve

Свойства

Сведения об общих методах смотрите в описании базового класса EllipseCurve.

.isArcCurve

Свойство используется для проверки, является ли данный класс и производные от него ArcCurve. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется для оптимизации внутри three.js.

Исходники

ArcCurve.js на github.com

Curve →

CatmullRomCurve3

Создает гладкую трехмерную сплайновую кривую из ряда точек при помощи алгоритма Катмулл-Ром (Catmull-Rom).

Пример

// Create a closed wavey loop
// создаем замкнутый волновой цикл
var curve = new THREE.CatmullRomCurve3( [
	new THREE.Vector3( -10, 0, 10 ),
	new THREE.Vector3( -5, 5, 5 ),
	new THREE.Vector3( 0, 0, 0 ),
	new THREE.Vector3( 5, -5, 5 ),
	new THREE.Vector3( 10, 0, 10 )
] );

var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );

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

// Create the final object to add to the scene
// создаем конечный объект для добавления на сцену
var curveObject = new THREE.Line( geometry, material );

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

geometry / extrude / splines

Конструктор

CatmullRomCurve3( .points, closed, curveType, tension )

points – массив трехмерных векторов - точек, определяющих кривую.

closed – параметр определяет, будет ли замкнута кривая. Значение по умолчанию является false, т.е не замкнута.

curveType – тип кривой. Значением по умолчанию является centripetal (центростремительный).

tension – упругость кривой. Значение по умолчанию равно 0.5.

Свойства

Сведения об общих свойствах смотрите в описании базового класса Curve.

.isCatmullRomCurve3

Свойство используется для проверки, является ли данный класс и производные от него CatmullRomCurve3. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется для оптимизации внутри three.js.

.points

Массив трехмерных векторов - точек, определяющих кривую. Требуется, как минимум, две точки.

.closed

Если это значение установлено как true, кривая будет замкнута на себя (конец кривой будет соединен с её началом).

.curveType

Возможными значениями являются: centripetal (центростремительный), chordal (хордовый) и catmullrom (тип по алгоритму Катмулл-Ром).

.tension

При установке типа как catmullrom, определяет упругость сплайна по алгоритму Катмулл-Ром.

Методы

Сведения об общих методах смотрите в описании базового класса Curve.

Исходники

CatmullRomCurve3.js на github.com

Curve →

CubicBezierCurve

Создает гладкую двумерную кубическую кривую Безье. Статья Википедии о кривых Безье на английском языке. Статья Википедии о кривых Безье на русском языке. Статья о кривых Безье на javascript.ru.

Пример

var curve = new THREE.CubicBezierCurve(
  new THREE.Vector2( -10, 0 ),
  new THREE.Vector2( -5, 15 ),
  new THREE.Vector2( 20, 15 ),
  new THREE.Vector2( 10, 0 )
);

var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );

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

// Create the final object to add to the scene
// создаем конечный объект для добавления на сцену
var curveObject = new THREE.Line( geometry, material );

Конструктор

CubicBezierCurve ( 
v0 - сокращ. англ. слов vector с индексом 0')" onmouseout="hide()">v0, 
v1 - сокращ. англ. слов vector с индексом 1')" onmouseout="hide()">.v1, 
v2 - сокращ. англ. слов vector с индексом 2')" onmouseout="hide()">.v2, 
v3 - сокращ. англ. слов vector с индексом 3')" onmouseout="hide()">.v3 )

v0 – начальная точка.

v1 – первая контрольная точка.

v2 – вторая контрольная точка.

v3 – конечная точка.

Свойства

Сведения об общих свойствах смотрите в описании базового класса Curve.

.isCubicBezierCurve

Свойство используется для проверки, является ли данный класс и производные от него CubicBezierCurve. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется для оптимизации внутри three.js.


v0 - сокращ. англ. слов vector с индексом 0')" onmouseout="hide()">.v0

Начальная точка.


v1 - сокращ. англ. слов vector с индексом 1')" onmouseout="hide()">.v1

Первая контрольная точка.


v2 - сокращ. англ. слов vector с индексом 2')" onmouseout="hide()">.v2

Вторая контрольная точка.


v3 - сокращ. англ. слов vector с индексом 3')" onmouseout="hide()">.v3

Конечная точка.

Методы

Сведения об общих методах смотрите в описании базового класса Curve.

Исходники

CubicBezierCurve.js на github.com

Curve →

CubicBezierCurve3

Создает гладкую трехмерную кубическую кривую Безье. Статья Википедии о кривых Безье на английском языке. Статья Википедии о кривых Безье на русском языке.

Пример

var curve = new THREE.CubicBezierCurve3(
  new THREE.Vector3( -10, 0, 0 ),
  new THREE.Vector3( -5, 15, 0 ),
  new THREE.Vector3( 20, 15, 0 ),
  new THREE.Vector3( 10, 0, 0 )
);

var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );

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

// Create the final object to add to the scene
// создаем конечный объект для добавления на сцену
var curveObject = new THREE.Line( geometry, material );

Конструктор

CubicBezierCurve3 ( 
v0 - сокращ. англ. слов vector с индексом 0')" onmouseout="hide()">v0, 
v1 - сокращ. англ. слов vector с индексом 1')" onmouseout="hide()">.v1, 
v2 - сокращ. англ. слов vector с индексом 2')" onmouseout="hide()">.v2, 
v3 - сокращ. англ. слов vector с индексом 3')" onmouseout="hide()">.v3 )

v0 – начальная точка.

v1 – первая контрольная точка.

v2 – вторая контрольная точка.

v3 – конечная точка.

Свойства

Сведения об общих свойствах смотрите в описании базового класса Curve.

.isCubicBezierCurve3

Свойство используется для проверки, является ли данный класс и производные от него CubicBezierCurve3. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется для оптимизации внутри three.js.


v0 - сокращ. англ. слов vector с индексом 0')" onmouseout="hide()">.v0

Начальная точка.


v1 - сокращ. англ. слов vector с индексом 1')" onmouseout="hide()">.v1

Первая контрольная точка.


v2 - сокращ. англ. слов vector с индексом 2')" onmouseout="hide()">.v2

Вторая контрольная точка.


v3 - сокращ. англ. слов vector с индексом 3')" onmouseout="hide()">.v3

Конечная точка.

Методы

Сведения об общих методах смотрите в описании базового класса Curve.

Исходники

CubicBezierCurve3.js на github.com

Curve →

EllipseCurve

Создает двумерную кривую в виде эллипса. При установке параметров xRadius и yRadius равными, получится окружность.

Пример

var curve = new THREE.EllipseCurve(
	0,  0,            // ax, aY
	10, 10,           // xRadius, yRadius
	0,  2 * Math.PI,  // aStartAngle, aEndAngle
	false,            // aClockwise
	0                 // aRotation
);

var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );

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

// Create the final object to add to the scene
// создаем конечный объект для добавления на сцену
var ellipse = new THREE.Line( geometry, material );

Конструктор

EllipseCurve( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation )

aX – координата X центра эллипса. Значение по умолчанию равно 0.

aY – координата Y центра эллипса. Значение по умолчанию равно 0.

xRadius – радиус эллипса по горизонтали (по оси x). Значение по умолчанию равно 1.

yRadius – радиус эллипса по вертикали (по оси y). Значение по умолчанию равно 1.

aStartAngle – начальный угол кривой (в радианах), отсчитываемый от середины правой стороны, т.е. от положения на 3 часа. Значение по умолчанию равно 0.

aEndAngle – конечный угол кривой (в радианах), отсчитываемый от середины правой стороны, т.е. от положения на 3 часа. Значением по умолчанию является 2×Math.PI.

aClockwise – рисовать ли эллипс в направлении по часовой стрелке. Значением по умолчанию является false.

aRotation – угол поворота эллипса (в радианах), отсчитываемый против часовой стрелки от положительной ветви оси X. Дополнительный, необязательный параметр. Значение по умолчанию равно 0.

Примечание: При движении против часовой стрелки (параметр aClockwise = true, лучше установить начальный угол (aStartAngle) как (Math.PI * 2) и затем работать в направлении меньших чисел.

Свойства

Сведения об общих свойствах смотрите в описании базового класса Curve.

.aX

Координата X центра эллипса.

.aY

Координата Y центра эллипса.

.xRadius

Радиус эллипса по горизонтали (по оси x). Значение по умолчанию равно 1.

.yRadius

Радиус эллипса по вертикали (по оси y). Значение по умолчанию равно 1.

.aStartAngle

Начальный угол кривой (в радианах), отсчитываемый от середины правой стороны, т.е. от положения на 3 часа. Значение по умолчанию равно 0.

.aEndAngle

Конечный угол кривой (в радианах), отсчитываемый от середины правой стороны, т.е. от положения на 3 часа. Значением по умолчанию является 2×Math.PI.

.aClockwise

Свойство определяет, рисовать ли эллипс в направлении по часовой стрелке. Значением по умолчанию является false.

.aRotation

Угол поворота эллипса (в радианах), отсчитываемый против часовой стрелки от положительной ветви оси X. Дополнительный, необязательный параметр. Значение по умолчанию равно 0.


т.е. эллиптической кривой')" onmouseout="hide()">.isEllipseCurve

Свойство используется для проверки, является ли данный класс и производные от него EllipseCurve. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется для оптимизации внутри three.js.

Методы

Сведения об общих методах смотрите в описании базового класса Curve.

Исходники

EllipseCurve.js на github.com

Curve →

LineCurve

Кривая, представляющая отрезок линии в двумерном пространстве.

Конструктор

LineCurve( 
v1 - сокращ. англ. слова vector с индексом 1')" onmouseout="hide()">v1, 
v2 - сокращ. англ. слова vector с индексом 2')" onmouseout="hide()">v2 )

v1 – начальная точка.

v2 - конечная точка.

Свойства

Сведения об общих свойствах смотрите в описании базового класса Curve.

.isLineCurve

Свойство используется для проверки, является ли данный класс и производные от него LineCurve. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется для оптимизации внутри three.js.


v1 - сокращ. англ. слова vector с индексом 1')" onmouseout="hide()">.v1

Начальная точка.


v2 - сокращ. англ. слова vector с индексом 2')" onmouseout="hide()">.v2

Конечная точка.

Методы

Сведения об общих методах смотрите в описании базового класса Curve.

Исходники

LineCurve.js на github.com

Curve →

LineCurve3

Кривая, представляющая отрезок линии в трехмерном пространстве.

Конструктор

LineCurve3( 
v1 - сокращ. англ. слова vector с индексом 1')" onmouseout="hide()">v1, 
v2 - сокращ. англ. слова vector с индексом 2')" onmouseout="hide()">v2 )

v1 – начальная точка.

v2 - конечная точка.

Свойства

Сведения об общих свойствах смотрите в описании базового класса Curve.

.isLineCurve3

Свойство используется для проверки, является ли данный класс и производные от него LineCurve3. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется для оптимизации внутри three.js.


v1 - сокращ. англ. слова vector с индексом 1')" onmouseout="hide()">.v1

Начальная точка.


v2 - сокращ. англ. слова vector с индексом 2')" onmouseout="hide()">.v2

Конечная точка.

Методы

Сведения об общих методах смотрите в описании базового класса Curve.

Исходники

LineCurve3.js на github.com

Curve →

QuadraticBezierCurve

Создает гладкую двумерную квадратичную кривую Безье.
Статья Википедии о кривых Безье на английском языке. Статья Википедии о кривых Безье на русском языке.

Пример

var curve = new THREE.QuadraticBezierCurve(
  new THREE.Vector2( -10, 0 ),
  new THREE.Vector2( 20, 15 ),
  new THREE.Vector2( 10, 0 )
);

var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );

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

// Create the final object to add to the scene
// создаем конечный объект для добавления на сцену
var curveObject = new THREE.Line( geometry, material );

Конструктор

QuadraticBezierCurve( 
v0 - сокращ. англ. слова vector с индексом 0')" onmouseout="hide()">v0, 
v1 - сокращ. англ. слова vector с индексом 1')" onmouseout="hide()">v1, 
v2 - сокращ. англ. слова vector с индексом 2')" onmouseout="hide()">v2 )

v0 – начальная точка.

v1 – контрольная точка.

v2 – конечная точка.

Свойства

Сведения об общих свойствах смотрите в описании базового класса Curve.

.isQuadraticBezierCurve

Свойство используется для проверки, является ли данный класс и производные от него QuadraticBezierCurve. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется для оптимизации внутри three.js.


v0 - сокращ. англ. слова vector с индексом 0')" onmouseout="hide()">.v0

Начальная точка.


v1 - сокращ. англ. слова vector с индексом 1')" onmouseout="hide()">.v1

Контрольная точка.


v2 - сокращ. англ. слова vector с индексом 2')" onmouseout="hide()">.v2

Конечная точка.

Методы

Сведения об общих методах смотрите в описании базового класса Curve.

Исходники

QuadraticBezierCurve.js на github.com

Curve →

QuadraticBezierCurve3

Создает гладкую трехмерную квадратичную кривую Безье.
Статья Википедии о кривых Безье на английском языке. Статья Википедии о кривых Безье на русском языке.

Пример

var curve = new THREE.QuadraticBezierCurve3(
  new THREE.Vector3( -10, 0, 0 ),
  new THREE.Vector3( 20, 15, 0 ),
  new THREE.Vector3( 10, 0, 0 )
);

var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );

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

// Create the final object to add to the scene
// создаем конечный объект для добавления на сцену
var curveObject = new THREE.Line( geometry, material );

Конструктор

QuadraticBezierCurve3( 
v0 - сокращ. англ. слова vector с индексом 0')" onmouseout="hide()">v0, 
v1 - сокращ. англ. слова vector с индексом 1')" onmouseout="hide()">v1, 
v2 - сокращ. англ. слова vector с индексом 2')" onmouseout="hide()">v2 )

v0 – начальная точка.

v1 – средняя контрольная точка.

v2 – конечная точка.

Свойства

Сведения об общих свойствах смотрите в описании базового класса Curve.

.isQuadraticBezierCurve3

Свойство используется для проверки, является ли данный класс и производные от него QuadraticBezierCurve3. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется для оптимизации внутри three.js.


v0 - сокращ. англ. слова vector с индексом 0')" onmouseout="hide()">.v0

Начальная точка.


v1 - сокращ. англ. слова vector с индексом 1')" onmouseout="hide()">.v1

Контрольная точка.


v2 - сокращ. англ. слова vector с индексом 2')" onmouseout="hide()">.v2

Конечная точка.

Методы

Сведения об общих методах смотрите в описании базового класса Curve.

Исходники

QuadraticBezierCurve3.js на github.com

Curve →

SplineCurve

Создает гладкую сплайновую кривую из ряда точек. Для создания кривой внутри этой функции используется Interpolations.CatmullRom.

Пример

// Create a sine-like wave
// создаем синусоиду
var curve = new THREE.SplineCurve( [
  new THREE.Vector2( -10, 0 ),
  new THREE.Vector2( -5, 5 ),
  new THREE.Vector2( 0, 0 ),
  new THREE.Vector2( 5, -5 ),
  new THREE.Vector2( 10, 0 )
] );

var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );

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

// Create the final object to add to the scene
// создаем конечный объект для добавления на сцену
var splineObject = new THREE.Line( geometry, material );

Конструктор

SplineCurve( points )

points – массив точек (Vector2), определяющих кривую.

Свойства

Сведения об общих свойствах смотрите в описании базового класса Curve.

.isSplineCurve

Свойство используется для проверки, является ли данный класс и производные от него SplineCurve. Значением по умолчанию является true.
Не нужно его изменять, так как оно используется для оптимизации внутри three.js.

.points

Массив точек (Vector2), определяющих кривую.

Методы

Сведения об общих методах смотрите в описании базового класса Curve.

Исходники

SplineCurve.js на github.com

Дополнения к объектам

Object3D →

ImmediateRenderObject

Базовый класс для немедленной визуализации объектов.

Конструктор

ImmediateRenderObject( )

Конструктор создает новый ImmediateRenderObject.

Методы

.render( renderCallback )

renderCallback -- функция для визуализации сгенерированного объекта.

Данная функция должна быть переопределена для запуска создания объекта и по завершении создания объекта должна вызывать функцию обратного вызова renderCallback.

Исходники

ImmediateRenderObject.js на github.com

previous page start next page