Управление светом

Нажмите 1, 2 или 3, чтобы включить/отключить прожектор, точечный и направленный свет соответственно.

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

Также важно знать о различных ограничениях для разных свойств света, например, значения красного, зеленого и синего устанавливаются между 0 и 1, но интенсивность достигает от 0 до 10. Кроме того, некоторые источники света имеют свойства, уникальные для них, например, углы конуса для прожектора.

Команды освещения

if (app.keyboard.wasPressed(pc.KEY_1)) {
    this.spot.light.enabled = !this.spot.light.enabled;
}

Эта строка включает и выключает компонент света в 'spot' Entity.

this.color1 = new pc.Color(1, 1, 1);

Объявлен новый массив цветов, первые три значения влияют на значения красного, зеленого и синего соответственно.

var s = Math.abs(Math.sin(1 + this.timer));
var r = 1-s/2;
var g = s-0.2;
var b = 0.55+s/2;
this.color1.set(r, g, b);
this.spot.light.color = this.color1;
this.spot.light.intensity = 10*s;

Эти строки назначают значения переменным r, g и b на основе синусоидальной волны, а затем назначают эти значения ранее объявленному массиву цветов через color1.set(x, y, z) и затем на свойство света. Интенсивность устанавливается так, чтобы варьироваться синусоидально от максимального значения интенсивности света 10 до 0.

Использование `entity.light.color.r` для доступа и изменения красного значения цвета света не сработает. Обнаруживаются только изменения свойства света `color`, поэтому вы должны назначить полный `pc.Color` для свойства, например, `entity.light.color = new pc.Color(1, 1, 1);`.

Общая настройка

Мы добавили прожектор (прикрепленный к родительской сборке базовой модели факела), всенаправленный свет, прикрепленный к родительской модели сферы, в дополнение к стандартному направленному свету, который создается для каждой новой сцены. Контролирующий скрипт был прикреплен к корневой сущности. Сфера и факел были сделаны дочерними элементами пустой сущности, находящейся в центре сцены, чтобы обеспечить легкое вращение. Полная сцена редактора и скрипты доступны здесь в сцене "controllingLights".

Полный код, использованный для вышеуказанного приложения PlayCanvas, приведен ниже.

var LightHandler = pc.createScript('lightHandler');

// инициализация кода, вызываемого один раз для каждой сущности
LightHandler.prototype.initialize = function() {
    var app = this.app;

    this.spot = app.root.findByName("SpotLight");
    this.point = app.root.findByName("PointLight");
    this.directional = app.root.findByName("DirectionalLight");
    this.pivot1 = app.root.findByName("Pivot1");
    this.pivot2 = app.root.findByName("Pivot2");
    this.timer = 0;
    this.color1 = new pc.Color(1, 1, 1);
    this.color2 = new pc.Color(1, 1, 1);
    this.color3 = new pc.Color(1, 1, 1);
};

// код обновления, вызываемый каждый кадр
LightHandler.prototype.update = function(dt) {
    var app = this.app;

    this.pivot();

    if (app.keyboard.wasPressed(pc.KEY_1)) {
        this.spot.light.enabled = !this.spot.light.enabled;
    }
    if (app.keyboard.wasPressed(pc.KEY_2)) {
        this.point.light.enabled = !this.point.light.enabled;
    }
    if (app.keyboard.wasPressed(pc.KEY_3)) {
        this.directional.light.enabled = !this.directional.light.enabled;
    }

    // счетчик, который используется как вход для функций sin, определяющих свойства света для всех источников света.
    this.timer += dt;

    // эти 3 блока кода назначают цветовые и интенсивные значения, которые изменяются в соответствии с функцией sin
    // все входы sin в радианах
    var s = Math.abs(Math.sin(1 + this.timer));
    var r = 1-s/2;
    var g = s-0.2;
    var b = 0.55+s/2;
    this.color1.set(r, g, b);
    this.spot.light.color = this.color1;
    this.spot.light.intensity = 10*s;

    s = Math.abs(Math.sin(2 + this.timer));
    r = s/2;
    g = 0.25+s/2;
    b = 1.0-s;
    this.color2.set(r, g, b);
    this.point.light.color = this.color2;
    this.point.light.intensity = 10*s;

    s = Math.abs(Math.sin(3 + this.timer));
    r = 0.25+s/2;
    g = 0.75-s/2;
    b = 0.25+s/2;
    this.color3.set(r, g, b);
    this.directional.light.color = this.color3;
    this.directional.light.intensity = 3*(1-s);
};

// эта функция вращает все три источника света вокруг их родительских сущностей (все в центре сцены) для легкого создания кругового движения.
LightHandler.prototype.pivot = function () {
    this.pivot1.rotate(0, 2, 0);
    this.pivot2.rotate(0, -3, 0);
};

Управление светом

В этом руководстве вы узнаете, как управлять светом в вашей сцене.

Tutorial Thumbnail

Создание источника света

Сначала создайте источник света. Вам нужно создать новый Entity и добавить к нему компонент Light. Вы можете сделать это в редакторе, как показано ниже, или с помощью кода:

var light = new pc.Entity();
light.addComponent("light");
app.root.addChild(light);