Three.js

Освещение

В этой части рассматриваются различные виды освещения и образование тени, при некоторых способах освещения.

Для понимания процесса освещения в компьютерной графике посмотрите следующие статьи:

learnopengl. Урок 2.2 — Основы освещения
Продолжаем изучение OpenGL: освещение по Фонгу
Затенение по Фонгу

Object3D → Light →

AmbientLight

Фоновое освещение глобально и в равной степени освещает все объекты на сцене. Этот свет не может использоваться для создания теней, так как не имеет направления.

Пример

var light = new THREE.AmbientLight( 0x404040 ); // soft white light (мягкий белый свет)
scene.add( light );

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

camera / orthographic
interactive / voxelpainter
materials
sandbox
animation / cloth
animation / skinning / blending

Конструктор

AmbientLight( color, intensity )

color — числовое значение RGB компонентов цвета.

intensity — числовое значение силы/интенсивности света.

Конструктор создает окружающее (общее) освещение с заданными цветом и интенсивностью.

Свойства

Смотрите базовый класс Light для общих свойств.

.castShadow

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

.isAmbientLight

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

Методы

Смотрите базовый класс Light для общих методов.

Исходники

AmbientLight.js на github.com

Object3D → Light →

DirectionalLight

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

Это освещение может отбрасывать тени - подробности смотрите в статье DirectionalLightShadow

Примечание относительно положения, цели и вращения

Общим местом недопонимания с направленным освещением является то, что настройки поворота не оказывают влияния. Это происходит из-за того, что DirectionalLight в three.js равнозначен тому, что в других приложениях зачастую называется Target Direct Light - целенаправленный (адресно направленный) свет.
Это означает, что его направление вычисляется как вектор от места расположения источника освещения к месту, где находится цель (в отличие от Free Direct Light, у которого имеется только компонент вращения).

Примечание переводчика: То есть, если направление Free Direct Light определяется углом в трехмерном пространстве, то DirectionalLight направлен на конкретный объект - цель.

Это сделано для того, чтобы у данного освещения была возможность отбрасывать тени - теневой камере требуется позиция, от которой рассчитываются тени.
Смотрите ниже описание свойства target для подробностей по обновлению цели.

Пример

// White directional light at half intensity shining from the top.
// Направленное освещение белого цвета вполовину интенсивности, светящее сверху.

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );

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

morphtargets / horse
controls / fly
lights / test
cubes
effects / parallaxbarrier
effects / stereo
geometry / extrude / splines
materials / bumpmap
materials / cubemap / balls / reflection

Конструктор

DirectionalLight( hex, intensity )

hex — шестнадцатиричное значение цвета освещения (дополнительный, необязательный параметр). Значение по умолчанию равно 0xffffff (белый).

intensity — числовое значение силы/интенсивности освещения (дополнительный, необязательный параметр). Значение по умолчанию равно 1.

Создает новый DirectionalLight

Свойства

Смотрите базовый класс Light для общих свойств.

.castShadow

Если установлено значение true, освещение будет отбрасывать динамические (движущиеся при перемещении объекта-цели) тени.

Предупреждение: Это довольно затратно и требует настройки для получения правильного отображения теней. Подробнее смотрите в описании DirectionalLightShadow.

Значением по умолчанию является false.

.isDirectionalLight

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


position - положение, позиция');" onmouseout="hide()">.position

Это свойство устанавливается равным Object3D.DefaultUp (0, 1, 0), так что свет светит сверху вниз.


shadow - тень');" onmouseout="hide()">.shadow

Свойство используется в DirectionalLightShadow для расчета теней от данного освещения.


target - цель, мишень, назначение');" onmouseout="hide()">.target

Со своей позиции DirectionalLight направлен на позицию объекта-цели (target.position), которую и определяет данное свойство. Позицией цели по умолчанию является (0, 0, 0).

Примечание: Чтобы изменить позицию объекта-цели на что-либо другое, кроме значения по умолчанию, он должен быть добавлен на сцену при помощи

scene.add( light.target );

Так что matrixWorld цели станет автоматически обновляться с каждым кадром.
Также возможно установить в качестве цели другой объект на сцене (что-нибудь со свойством position), вот так:

var targetObject = new THREE.Object3D();
  scene.add(targetObject);

  light.target = targetObject;

Теперь directionalLight будет отслеживать целевой объект.

Методы

Смотрите базовый класс Light для общих методов.


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

Копирует значение всех свойств из source в данный объект DirectionalLight.

Исходники

DirectionalLight.js на github.com

LightShadow →

DirectionalLightShadow

Этот класс используется внутри для расчета теней от DirectionalLight. В отличие от других классов тени, данный класс для вычисления теней использует OrthographicCamera, а не PerspectiveCamera. Это делается потому, что лучи света от DirectionalLight параллельны.

Пример

// Create a WebGLRenderer and turn on shadows in the renderer
// создаем WebGLRenderer и включаем тени в визуализаторе
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
                                                  // (по умолчанию THREE.PCFShadowMap)

// Create a DirectionalLight and turn on shadows for the light
// создаем DirectionalLight и включаем тени от него
var light = new THREE.DirectionalLight( 0xffffff, 1, 100 );
light.position.set( 0, 1, 0 ); // default; light shining from top
                               // (по умолчанию; свет светит сверху)
light.castShadow = true;       // default false (по умолчанию - false)
scene.add( light );

// Set up shadow properties for the light
// установка свойств тени для этого освещения
light.shadow.mapSize.width = 512;  // default (значение по умолчанию)
light.shadow.mapSize.height = 512; // default (значение по умолчанию)
light.shadow.camera.near = 0.5;    // default (значение по умолчанию)
light.shadow.camera.far = 500      // default (значение по умолчанию)

// Create a sphere that cast shadows (but does not receive them)
// создаем сферу, отбрасывающую тени (но не принимающую их)
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true;     // default is false (по умолчанию - false)
sphere.receiveShadow = false; // default (значение по умолчанию)
scene.add( sphere );

// Create a plane that receives shadows (but does not cast them)
// Создаем плоскость, принимающую тени (но не отбрасывающую их)
var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );

// Create a helper for the shadow camera (optional)
// создаем вспомогательный элемент для камеры теней (необязательно)
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );

Конструктор

DirectionalLightShadow( )

Создает новый DirectionalLightShadow. Конструктор не предназначен для непосредственного вызова - он вызывается внутри three.js, посредством DirectionalLight.

Свойства

Смотрите базовый класс LightShadow для общих свойств.


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

Свойство представляет освещенную область виртуального мира. Она используется для создания карты глубины сцены; объекты, находящиеся позади других объектов, с точки зрения освещения будут в тени.
По умолчанию это OrthographicCamera с параметрами left и bottom установленными как -5, right и top установленными как 5, параметр near (ближняя плоскость отсечения) установлен как 0.5, а параметр far (дальняя плоскость отсечения) установлен как 500.

Методы

Смотрите базовый класс LightShadow для общих методов.

Исходники

DirectionalLightShadow.js на github.com

Object3D → Light →

HemisphereLight

Источник света, расположенный непосредственно над сценой, с затуханием цвета от цвета неба до цвета земли.
Это освещение не может использоваться для отбрасывания теней.

Пример

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

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

lights / hemisphere
controls / pointerlock
decals
loader / collada / kinematics
materials / lightmap
shaders / ocean

Конструктор

HemisphereLight( skyColor, groundColor, intensity )

skyColor — шестнадцатиричное значение цвета неба, по умолчанию равно 0xffffff. Дополнительный, необязательный аргумент.

groundColor — шестнадцатиричное значение цвета земли, по умолчанию равно 0xffffff. Дополнительный, необязательный аргумент.

intensity — числовое значение силы/интенсивности света, по умолчанию равно 1. Дополнительный, необязательный аргумент.

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

Свойства

Смотрите базовый класс Light для общих свойств.

.castShadow

Это свойство в конструкторе устанавливается как undefined, так как освещение полусферой не может отбрасывать тени.

.color

Цвет освещения неба, какой передан в конструктор. Значение по умолчанию для нового цвета устанавливается как (0xffffff) - белый.

.groundColor

Цвет освещения земли, какой передан в конструктор. Значение по умолчанию для нового цвета устанавливается как (0xffffff) - белый.

.isHemisphereLight

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


position - позиция, положение');" onmouseout="hide()">.position

Это свойство устанавливается равным Object3D.DefaultUp (0, 1, 0), так что свет светит сверху вниз.

Методы

Смотрите базовый класс Light для общих методов.


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

Копирует значение параметров color, intensity и groundColor из source освещения в этот.

Исходники

HemisphereLight.js на github.com

Object3D →

Light

Абстрактный базовый класс освещения - все другие типы освещения наследуют описанные здесь свойства и методы.

Конструктор

Light( color, intensity )

color — шестнадцатиричное значение цвета освещения (дополнительный, необязательный параметр). Значением по умолчанию является 0xffffff (белый).

intensity — числовое значение силы/интенсивности света (дополнительный, необязательный параметр). Значение по умолчанию равно 1.

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

Свойства

Смотрите базовый класс Object3D для общих свойств.


color - цвет');" onmouseout="hide()">.color

Цвет освещения. По умолчанию, если это не передается в конструкторе, новый Color устанавливается белым (0xffffff).

.intensity

Интенсивность (сила) света.
В режиме, правильном с точки зрения физики, произведение color * intensity интерпретируется как интенсивность (сила) света, измеряемая в канделах (candela).
Значение по умолчанию равно 1.0.

.isLight

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

Методы

Смотрите базовый класс Object3D для общих методов.


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

Метод копирует значение из source в данный объект Light.

.toJSON( 
это цель, конечный пункт, предел, а метаданные - информация о другой
информации, или данные, относящиеся к дополнительной информации о
содержимом или объекте. Метаданные раскрывают сведения о признаках
и свойствах, характеризующих какие-либо сущности, которые позволяют
автоматически искать и управлять ими в больших информационных
потоках.');" onmouseout="hide()">meta )

Возвращает данные Light в JSON-формате.

Исходники

Light.js на github.com

LightShadow

Этот класс используется для расчета теней внутри PointLight, а также служит базовым классом для других классов теней.

Пример

// Create a WebGLRenderer and turn on shadows in the renderer
// Создаем WebGLRenderer и включаем в нем тени
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
                                                  // по умолчанию THREE.PCFShadowMap

// Create a PointLight and turn on shadows for the light
// Создаем PointLight и включаем тени от него
var light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 0, 10, 0 );
light.castShadow = true;           // default false (значение по умолчанию false )
scene.add( light );

// Set up shadow properties for the light
// Устанавливаем свойства тени
light.shadow.mapSize.width = 512;  // default (по умолчанию)
light.shadow.mapSize.height = 512; // default (по умолчанию)
light.shadow.camera.near = 0.5;    // default (по умолчанию)
light.shadow.camera.far = 500      // default (по умолчанию)

// Create a sphere that cast shadows (but does not receive them)
// Создаем сферу, отбрасывающую тени (но не принимающую их)
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true;     // default is false (по умолчанию равно false)
sphere.receiveShadow = false; // default (по умолчанию)
scene.add( sphere );

// Create a plane that receives shadows (but does not cast them)
// Создаем плоскость, которая принимает тени (но не отбрасывает их)
var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );

// Create a helper for the shadow camera (optional)
// Создаем вспомогательный элемент для теневой камеры (необязательно)
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );

Конструктор

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

camera - камера');" onmouseout="hide()">camera — The shadow's view of the world.

Конструктор создает новый LightShadow. Он не предназначен для вызова непосредственно - конструктор вызывается внутри PointLight или используется в качестве базового класса при построении теней от других источников света.

Свойства


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

The shadow's view of the world.

.bias

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


map - карта');" onmouseout="hide()">.map

Карта глубины создается при помощи внутренней камеры; расположение вне пределов пиксельной глубины находится в тени. The depth map generated using the internal camera; a location beyond a pixel's depth is in shadow. Вычисляется внутри класса, во время визуализации (рендеринга).


map size - размер карты');" onmouseout="hide()">.mapSize

Vector2 определяющий ширину и высоту теневой карты.
Более высокие значения дают более качественные тени за счет увеличения времени вычисления. Значения должны быть степенями двойки, вплоть до значения свойства WebGLRenderer.capabilities.maxTextureSize данного устройства, причем ширина и высота могут быть неодинаковыми (так например, (512, 1024) вполне допустимо). Значением по умолчанию является ( 512, 512 ).


matrix - матрица');" onmouseout="hide()">.matrix

Модель пространства теневой камеры, для расчета местоположения и глубины в теневой карте. Хранится в Matrix4. Значение свойства вычисляется внутренне в процессе визуализации (рендеринга).

.radius

Установка значения больше 1 вызовет размытие краев тени. Более высокие значения будут вызывать нежелательный эффект полосатости в тенях - большие значения свойства mapSize позволят использовать высокие значения данного свойства, прежде чем этот эффект станет видимым.
Обратите внимание, что это свойство не оказывает никакого влияния, если свойство WebGLRenderer.shadowMap.type установлено как BasicShadowMap.

Методы


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

Метод копирует значения всех свойств из source - исходник');" onmouseout="hide()">source в данный SpotLight.


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

Возвращает новый LightShadow с теми же свойствами что и у данного.

.toJSON( )

Сериализует данный LightShadow.

Исходники

LightShadow.js на github.com

Object3D → Light →

PointLight

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

Пример

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

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

lights / pointlights
lights / pointlights
lights / pointlights2
animation
effects / anaglyph
geometry / text
lensflares

Конструктор

PointLight( color, intensity, distance, decay )

color — шестнадцатиричное значение цвета освещения, по умолчанию 0xffffff (белый). Дополнительный, необязательный аргумент.

intensity — числовое значение силы/интенсивности света. Значение по умолчанию равно 1. Дополнительный, необязательный аргумент.

distance - расстояние от источника света, при котором интенсивность света становится равной 0. When set to 0, then the light never stops. Значение по умолчанию равно 0.

decay - значение, на которое уменьшается интенсивность света с увеличением расстояния от источника.

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

Свойства

Смотрите базовый класс Light для общих свойств.

.decay

Значение, на которое уменьшается интенсивность света с увеличением расстояния от источника.
В режиме, правильном с точки зрения физики, decay = 2 приводит к физически реалистичному уменьшению освещенности. Значение по умолчанию равно 1.

.distance

При ненулевом значении свет будет уменьшаться линейно от максимальной интенсивности (в расположении источника света) до нуля (на расстоянии от источника света, задаваемым данным свойством). Значение по умолчанию равно 0.0.

.isPointLight

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

.power

Сила света. (По-русски это будет световой поток.)
В режиме, правильном с точки зрения физики, световой поток измеряется в люменах. Значением по умолчанию является 4Math.PI.
Он напрямую связан с интенсивностью (intensity) соотношением

power = intensity * 4π

и его изменение также приведет к изменению интенсивности.


shadow - тень');" onmouseout="hide()">.shadow

Для вычисления теней при данном освещении используется класс LightShadow.
Камерой LightShadow устанавливается камера с перспективной проекцией и параметрами: fov равен 90 градусов, aspect равен 1, ближняя плоскость отсечения near равна 0.5 и дальняя плоскость отсечения far равна 500.

Методы

Смотрите базовый класс Light для общих методов.


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

Метод копирует значения всех свойств из source - исходник');" onmouseout="hide()">source в данный PointLight.

Исходники

PointLight.js на github.com

Object3D → Light →

RectAreaLight

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

Примечание: этот класс в настоящее время находится в активной разработке и пока ещё не готов к полноценному использованию (начиная с версии r83). Вернитесь сюда через месяц или два! И в тоже время не стесняйтесь попробовать его в работе.

Пример

var width = 2;
var height = 10;
var rectLight = new THREE.RectAreaLight( 0xffffff, undefined,  width, height );
rectLight.intensity = 70.0;
rectLight.position.set( 5, 5, 0 );
scene.add( rectLight )

rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );

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

lights / rectarealight

Конструктор

RectAreaLight( color, intensity, width, height )

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

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

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

Свойства

Смотрите базовый класс Light для общих свойств.

castShadow

Примечание: это свойство для этого типа освещения пока ещё не реализовано! (версия three.js r83).

.decay

Примечание: это свойство для этого типа освещения пока ещё не реализовано! (версия three.js r83).

.distance

Примечание: это свойство для этого типа освещения пока ещё не реализовано! (версия three.js r83).


освещением от прямоугольной области');" onmouseout="hide()">.isRectAreaLight

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


position - позиция, положение');" onmouseout="hide()">.position

Это свойство устанавливается равным Object3D.DefaultUp (0, 1, 0), так что свет светит сверху вниз.


target - цель, назначение');" onmouseout="hide()">.target

Свет RectAreaLight направлен из своего местоположения (свойство position) в целевую позицию, определяемую данным свойством. По умолчанию target будет равен (0, 0, 0).

Примечание: чтобы изменить целевую позицию на что-либо другое кроме положения по умолчанию, её нужно добавить к сцене при помощи

scene.add( light.target );

Это делается для того, чтобы matrixWorld целевой позиции автоматически обновлялся с каждым кадром.
Также возможно установить целью другой объект на сцене (любой объект со свойством position), вот так:

var targetObject = new THREE.Object3D();
scene.add(targetObject);

light.target = targetObject;

Теперь RectAreaLight будет отслеживать целевой объект.

Методы

Смотрите базовый класс Light для общих методов.


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

Метод копирует значения всех свойств из source - исходник');" onmouseout="hide()">source в данный RectAreaLight.

Исходники

RectAreaLight.js на github.com

Object3D → Light →

SpotLight

Данный свет излучается из одной точки в одном направлении, вдоль конуса, расширяемого по мере удаления от источника света. Это освещение может отбрасывать тени - подробности смотрите в описании SpotLightShadow.

Пример

// white spotlight shining from the side, casting shadow
// белый прожектор светит со стороны, отбрасывает тень

var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );

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

lights / spotlights
interactive / cubes / gpu
interactive / draggablecubes
materials / bumpmap / skin
materials / cubemap / dynamic
loader / md2
shading / physical
shadowmap
shadowmap / performance
shadowmap / viewer

Конструктор

SpotLight( color, intensity, distance, angle, penumbra, decay )

distance - максимальное расстояние от источника, где свет будет светить с интенсивностью, которая будет линейно уменьшаться по мере удаления от источника.

angle - максимальный угол рассеяния света по его направлению, верхней границей которого является угол Math.PI/2.

penumbra - процент от конуса света прожектора, в котором интенсивность света ослабляется из-за полутени. Принимает значения от нуля до единицы. Значение по умолчанию равно нулю.

decay - значение, на которое уменьшается интенсивность света с увеличением расстояния от источника.

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

Свойства

Смотрите базовый класс Light для общих свойств.

.angle

Maximum extent of the spotlight, in radians, from its direction. Should be no more than Math.PI/2. Значением по умолчанию является Math.PI/3.

.castShadow

Если задано значение true, то свет будет отбрасывать динамические тени.

Предупреждение: Это затратно по ресурсам и для правильного отображения теней требуется подстройка.

Значением по умолчанию является false.

.decay

.distance

.isSpotLight

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

.penumbra

Процент от конуса света прожектора, в котором интенсивность света ослабляется из-за полутени. Принимает значения от 0 до 1. Значение по умолчанию равно 0.0.


position - положение, позиция');" onmouseout="hide()">.position

Значение свойства устанавливается равным Object3D.DefaultUp (0, 1, 0), так что свет светит сверху вниз.

.power

power = intensity * π

и его изменение также приведет к изменению интенсивности.


shadow - тень');" onmouseout="hide()">.shadow

Для вычисления теней при данном освещении используется класс SpotLightShadow.


target - цель, мишень, назначение');" onmouseout="hide()">.target

Со своей позиции Spotlight направлен на позицию объекта-цели (target.position), которую и определяет данное свойство. Позицией цели по умолчанию является (0, 0, 0).

scene.add( light.target );

var targetObject = new THREE.Object3D();
  scene.add(targetObject);

  light.target = targetObject;

Теперь Spotlight будет отслеживать целевой объект.

Методы

Смотрите базовый класс Light для общих методов.


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

Метод копирует значения всех свойств из source - исходник');" onmouseout="hide()">source в данный SpotLight.

Исходники

SpotLight.js на github.com

LightShadow →

SpotLightShadow

Данный класс используется для расчета теней внутри класса SpotLight.

Пример

// Create a WebGLRenderer and turn on shadows in the renderer
// создаем WebGLRenderer и включаем тени в визуализаторе
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
                                                  // (по умолчанию THREE.PCFShadowMap)

// Create a SpotLight and turn on shadows for the light
// создаем SpotLight и включаем тени от него
var light = new THREE.SpotLight( 0xffffff );
light.castShadow = true;            // default false (по умолчанию - false)
scene.add( light );

// Set up shadow properties for the light
// установка свойств тени для этого освещения
light.shadow.mapSize.width = 512;  // default (значение по умолчанию)
light.shadow.mapSize.height = 512; // default (значение по умолчанию)
light.shadow.camera.near = 0.5;    // default (значение по умолчанию)
light.shadow.camera.far = 500      // default (значение по умолчанию)

// Create a sphere that cast shadows (but does not receive them)
// создаем сферу, отбрасывающую тени (но не принимающую их)
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true;     // default is false (по умолчанию - false)
sphere.receiveShadow = false; // default (значение по умолчанию)
scene.add( sphere );

// Create a plane that receives shadows (but does not cast them)
// Создаем плоскость, принимающую тени (но не отбрасывающую их)
var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );

// Create a helper for the shadow camera (optional)
// создаем вспомогательный элемент для камеры теней (необязательно)
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );

Конструктор

Конструктор создает PerspectiveCamera для управления отображением теней в представляемом мире.

Свойства

Смотрите базовый класс LightShadow для общих свойств.


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

Представление освещения в мире. Свойство используется для построения карты глубины сцены; объекты позади других объектов исходя из распространения света будут находиться в тени.
По умолчанию это камера с перспективной проекцией с ближней плоскостью отсечения near равной 0.5. Свойство fov будет отслеживать свойство angle имеющегося SpotLight с помощью метода update. Аналогично, свойство aspect будет отслеживать размеры сторон из mapSize. Если установлено свойство distance освещения, дальняя плоскость отсечения far будет отслеживать его, в противном случае она по умолчанию будет установлена как 500.

.isSpotLightShadow

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

Методы

Смотрите базовый класс LightShadow для общих методов.


update - обновление');" onmouseout="hide()">.update( light )

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

Исходники

SpotLightShadow.js на github.com

previous page start next page