Обновление света в three.js?

Question

[Tereverda]

three.js в обновлении изменил параметры света, не понимаю, как исправить, так, чтобы вернуть прежнее освещение.

Было


Стало

// Размеры коробки
// width: "600"
// depth: "400"
// height: "400"
// position 0,0,0, - центр

const ambientLight = new THREE.AmbientLight(0x222222, 1); // без правок

// на сцене несколько светительников с одинаковыми настройками ниже, только расположение разное
const light1 = new THREE.PointLight(0xffffff, 0.4); // было
const light1 = new THREE.PointLight(0xffffff, 1, 0, 0); // стало

// Ориентация одной из камер с 4 сторон
// position: 
// x: -618750
// y: 618750
// z: 618750

new THREE.PointLight(0xffffff, 1, 0, 0); - если в конструкторе менять последние три значения, то коробка становится черной, исчезает освещение.

Не понимаю, как вернуть отображение фактур к прежнему, насыщенному цвету.
Весь остальной код остался прежним при обновлении.

Пишут, что свет стал более реальным, привязанным к размерам, я так понял.

Comments

[Антон Горецкий]

четыре параметра:
color - (optional) hexadecimal color of the light. Default is 0xffffff (white).
intensity - (optional) numeric value of the light's strength/intensity. Default is 1.
distance - Maximum range of the light. Default is 0 (no limit).
decay - The amount the light dims along the distance of the light. Default is 2.
крутите и подберите нужные

Answer 1

[Ivan Bogachev]

const light1 = new THREE.PointLight(0xffffff, 0.4); // было
const light1 = new THREE.PointLight(0xffffff, 1, 0, 0); // стало

Пишут, что свет стал более реальным, привязанным к размерам, я так понял.

Все ровно наоборот. Но чем гадать, лучше посмотреть документацию PointLight, чтобы понять смысл параметров.

Последний параметр decay, затухание, непосредственно связан как раз с физикой распространения света. Обычно мы стараемся его никогда не трогать, потому что меняя физику мы себе усложняем дальнейшую разработку в 99% случаев. По умолчанию этот параметр равен 2. Не 0.

Предпоследний параметр distance - расстояние, на котором рассчитывается свет. Если оно равно 0, как по умолчанию, то все рассчитывается без ограничений на расстояния, используя физически корректное затухание. Если его поменять, то в каком-то месте свет будет обрезаться. Это иногда полезно для оптимизаций, но физика будет сломана. Поэтому в целом этот параметр имеет смысл трогать только если мы что-то оптимизируем и понимаем, что и зачем. В остальных случаях можно оставить его в покое.

В подавляющем большинстве случаев достаточно менять только второй параметр - интенсивность. Измеряется в канделах. Реалистичные значения для бытовых источников света - от 0 до нескольких сотен.

Если у вас с реалистичными значениями получается что-то не то - стоит уточнить размеры объектов. Чтобы физика работала, у нас 1 условная единица пространства WebGL должна соответствовать 1 метру. Если вы случайно сделали себе размер коробки в 600 метров, а не 0.6, то физика могла дать не тот визуальный эффект, который вы ожидали. Позиция камеры на расстоянии в сотни километров от коробки тоже намекает на то, что нужно проверить размеры.

Comments

[Tereverda]

Ivan Bogachev

Размеры объекта 600-400-400 - это важно, чтобы не переходить в дробные числа

let distance = 825 диагональ коробки * 2 = 1650;

по идее и decay нужно менять, чтобы затухало не в двух метрах, а distance * 1.2 например
let decay = distance * 1.2 = 1 980;

new THREE.PointLight(0xffffff, distance, 0, decay )
PointLight position делаю distance * 1.5 чтобы на отдалении были от объекта = 2475

Не могу уловить логику пропорций, по идее свет должен затухать чуть дальше, чем объект по этому
distance = 1650
decay = 1 980
должно работать, но нет ((

[Ivan Bogachev]

Tereverda,

по идее и decay нужно менять, чтобы затухало не в двух метрах, а distance * 1.2 например
let decay = distance * 1.2 = 1 980;

Вот это не имеет никакого смысла. Затухание, decay - это константа, степень в этой формуле. Она к расстоянию никак не привязана. И изначальное значение 2 взято не с потолка.

должно работать, но нет ((

Разберитесь с физическим смыслом сущностей в вашем коде. Работа станет в разы проще.

[Tereverda]

Ivan Bogachev
1. Сделал положение камер и интенсивность фиксированными, а не вычисляемыми, как раньше
2. 600-400-400 размеры коробки, отдаление камеры 3500, интенсивность 70000000
new THREE.PointLight(0xffffff, 70000000);

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

Тут можно посмотреть живой пример

есть еще new THREE.AmbientLight(0x222222); интенсивность не задавал, чтобы не пересвечивало