Three.js

Вспомогательные элементы three.js

Object3D →

ArrowHelper

Объект трехмерной (3D) стрелки для визуализации направлений.

Пример

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

// normalize the direction vector (convert to vector of length 1)
// нормализуем вектор направления (конвертируем в вектор единичной длины)
dir.normalize();

var origin = new THREE.Vector3( 0, 0, 0 );
var length = 1;
var hex = 0xffff00;

var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
scene.add( arrowHelper );

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

WebGL / geometries
WebGL / geometry / normals
WebGL / shadowmesh

Конструктор

ArrowHelper( 
dir - сокращ. англ. слова direction - направление');" onmouseout="hide()">dir, 
origin - начало, источник');" onmouseout="hide()">origin, length, hex, headLength, headWidth )

Свойства

Для информации об общих свойствах посмотрите базовый класс Object3D.

Методы

Для информации об общих методах посмотрите базовый класс Object3D.

Исходники

LineSegments →

AxesHelper

Объект для визуализации трех осей координат простым способом.
Ось X красного цвета, ось Y - зеленая, ось Z - синяя.

Пример

var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

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

WebGL / geometries
WebGL / geometries2
WebGL / geometry / convex
WebGL / geometry / spline / editor

Конструктор

AxesHelper( size )

Свойства

Для информации об общих свойствах посмотрите базовый класс LineSegments.

Методы

Для информации об общих методах посмотрите базовый класс LineSegments.

Исходники

LineSegments →

BoxHelper

Вспомогательный объект для отображения вокруг какого-либо объекта ограничительного каркаса из линий, сориентированного по осям мира.
Обратите внимание, для того чтобы это работало, объект должен иметь либо Geometry, либо BufferGeometry, так что со спрайтами он не будет работать.

Пример

var sphere = new THREE.SphereGeometry();
var object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
var box = new THREE.BoxHelper( object, 0xffff00 );
scene.add( box );

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

WebGL / helpers
WebGL / loader / nrrd
advanced / buffergeometry / drawcalls

Конструктор

BoxHelper( object, 
color - цвет');" onmouseout="hide()">color )

Создает новый каркас, ограничивающий переданный объект. Внутри, для вычисления размеров, используется метод Box3.setFromObject. Обратите внимание на то, что при этом в каркас включаются все дочерние объекты.

Свойства

Для информации об общих свойствах посмотрите базовый класс LineSegments.

Методы

Для информации об общих методах посмотрите базовый класс LineSegments.

Исходники

LineSegments →

Box3Helper

вспомогательный элемент для визуализации объекта Box3 - прямоугольный параллелепипед или куб в трехмерном пространстве.

Пример

var box = new THREE.Box3();
box.setFromCenterAndSize( new THREE.Vector3( 1, 1, 1 ), new THREE.Vector3( 2, 1, 3 ) );

var helper = new THREE.Box3Helper( box, 0xffff00 );
scene.add( helper );

Конструктор

Box3Helper( 
box - ')" onmouseout="hide()">box, 
color - цвет');" onmouseout="hide()">color )

Создает новый каркасный параллелепипед, представляющий переданный Box3.

Свойства

Для информации об общих свойствах посмотрите базовый класс LineSegments.

Методы

Для информации об общих методах посмотрите базовый класс LineSegments.

Исходники

LineSegments →

CameraHelper

Этот вспомогательный объект для определения того, что попадает в объем усеченной пирамиды, который будет видим камере.
Он показывает эту область видимости камеры при помощи LineSegments.

Пример

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var helper = new THREE.CameraHelper( camera );
scene.add( helper );

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

WebGL / camera
WebGL / extrude / splines

Конструктор

CameraHelper( 
camera - камера');" onmouseout="hide()">camera )

Создает новый CameraHelper для указанной камеры.

Свойства

Для информации об общих свойствах посмотрите базовый класс LineSegments.

Методы

Для информации об общих методах посмотрите базовый класс LineSegments.

Исходники

Object3D →

DirectionalLightHelper

Вспомогательный объект для помощи с отображением на сцене эффекта DirectionalLight, т.е. направленного света.
Он состоит из плоскости и линии, представляющих положение и направление света.

Пример

var light = new THREE.DirectionalLight( 0xFFFFFF );
var helper = new THREE.DirectionalLightHelper( light, 5 );
scene.add( helper );

Конструктор

DirectionalLightHelper( 
light - свет');" onmouseout="hide()">light, size, color )

Свойства

Для информации об общих свойствах посмотрите базовый класс Object3D.

Методы

Для информации об общих методах посмотрите базовый класс Object3D.

Исходники

LineSegments →

FaceNormalsHelper

Показывает стрелки для визуализации нормалей граней объекта. Требуется, чтобы нормали граней были указаны для всех граней или были вычислены с помощью метода computeFaceNormals.
Обратите внимание, что этот вспомогательный объект работает только с объектами, чья геометрия является экземпляром Geometry. Для BufferGeometry вместо него используйте VertexNormalsHelper.

Пример

geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
box = new THREE.Mesh( geometry, material );

helper = new THREE.FaceNormalsHelper( box, 2, 0x00ff00, 1 );

scene.add( box );
scene.add( helper );

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

WebGL / helpers

Конструктор

FaceNormalsHelper( 
object - объект');" onmouseout="hide()">object, size, color, linewidth )

Свойства

Для информации об общих свойствах посмотрите базовый класс LineSegments.

Методы

Для информации об общих методах посмотрите базовый класс LineSegments.

Исходники

Line →

GridHelper

GridHelper - это объект для установки сеток. Сетка является двумерным массивом линий.

Пример

var size = 10;
var divisions = 10;

var gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );

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

Пример использования различных вспомогательных элементов

Конструктор

GridHelper( size, divisions, colorCenterLine, colorGrid )

Создает новый GridHelper размером size с divisions ячеек с каждой стороны. Цвета являются необязательными аргументами.

Исходники

Object3D →

HemisphereLightHelper

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

Пример

var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
var helper = new THREE.HemisphereLightHelper( light, 5 );
scene.add( helper );

Конструктор

HemisphereLightHelper( 
light - свет, освещение');" onmouseout="hide()">light, sphereSize, color )

Свойства

Для информации об общих свойствах посмотрите базовый класс Object3D.

Методы

Для информации об общих методах посмотрите базовый класс Object3D.

Исходники

LineSegments →

PlaneHelper

Вспомогательный элемент для визуализации объекта Plane - плоскости в трехмерном пространстве.

Пример

var plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
var helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
scene.add( helper );

Конструктор

PlaneHelper( 
plane - плоскость')" onmouseout="hide()">plane, size, 
color - цвет');" onmouseout="hide()">color )

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

Свойства

Для информации об общих свойствах посмотрите базовый класс LineSegments.

Методы

Для информации об общих методах посмотрите базовый класс LineSegments.

Исходники

Mesh →

PointLightHelper

Создает видимый вспомогательный элемент, состоящий из сферической сетки для отображения зоны освещения от PointLight - точечного освещения.

Пример

var pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
pointLight.position.set( 10, 10, 10 );
scene.add( pointLight );

var sphereSize = 1;
var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );

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

WebGL /  helpers

Конструктор

PointLightHelper( 
light - свет, освещение');" onmouseout="hide()">light, sphereSize, color )

Свойства

Для информации об общих свойствах посмотрите базовый класс Mesh.

Методы

Для информации об общих свойствах посмотрите базовый класс Mesh.

Исходники

Line →

PolarGridHelper

PolarGridHelper - это объект для установки полярных сеток. Сетка является двумерным массивом линий.

Пример

var radius = 10;
var radials = 16;
var circles = 8;
var divisions = 64;

var helper = new THREE.PolarGridHelper( radius, radials, circles, divisions );
scene.add( helper );

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

Пример использования разных вспомогательных элементов

Конструктор

PolarGridHelper( radius, radials, circles, divisions, color1, color2 )

Создает новый PolarGridHelper с радиусом, определенным в параметре radius, числом лучей (радиалов), указанных в параметре radials, и числом окружностей, переданных в circles, где каждая окружность состоит из отрезков, число которых указано в divisions. Аргументы со значениями цвета являются дополнительными, необязательными.

Исходники

Object3D →

RectAreaLightHelper

Создает видимый вспомогательный элемент для отображения зоны освещения от RectAreaLight.

Пример

var light = new THREE.RectAreaLight( 0xffffbb, 1.0, 5, 5 );
var helper = new THREE.RectAreaLightHelper( light );
scene.add( helper );

Конструктор

RectAreaLightHelper( 
light - свет, освещение');" onmouseout="hide()">light, color )

Свойства

Для информации об общих свойствах посмотрите базовый класс Object3D.

Методы

Для информации об общих методах посмотрите базовый класс Object3D.

Исходники

Object3D →   Line →   LineSegments →

SkeletonHelper

Вспомогательный объект для помощи с визуализацией объекта Skeleton. Визуализация производится при помощи LineBasicMaterial.

Пример

var helper = new THREE.SkeletonHelper( mesh );
helper.material.linewidth = 3;
scene.add( helper );

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

animation / skinning / blending
animation / skinning / morph
loader / bvh

Конструктор

SkeletonHelper( object )

Свойства

Исходники

Object3D →

SpotLightHelper

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

Пример

var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 10, 10, 10 );
scene.add( spotLight );

var spotLightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( spotLightHelper );

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

lights / spotlights

Конструктор

SpotLightHelper( 
light - освещение');" onmouseout="hide()">light, color )

Свойства

Для информации об общих свойствах посмотрите базовый класс Object3D.

Методы

Для информации об общих методах посмотрите базовый класс Object3D.

Исходники

Line →

VertexNormalsHelper

Отображает стрелки для визуализации векторов нормалей к вершинам объекта. Требуется, чтобы нормали были указаны в специальном атрибуте или были вычислены с помощью метода computeVertexNormals.
В отличие от FaceNormalsHelper, данный класс работает с BufferGeometry.

Пример

var geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var box = new THREE.Mesh( geometry, material );

var helper = new THREE.VertexNormalsHelper( box, 2, 0x00ff00, 1 );

scene.add( box );
scene.add( helper );

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

WebGL / helpers

Конструктор

VertexNormalsHelper( 
object - объект');" onmouseout="hide()">object, size, color, linewidth )

Свойства

Для информации об общих свойствах посмотрите базовый класс LineSegments.

Методы

Для информации об общих методах посмотрите базовый класс LineSegments.

Исходники