title

Теория

Свет в 3D влияет на то, как воспринимается форма. Один и тот же объект без освещения может выглядеть плоским, а при появлении света начинает ощущаться как объёмный.Текстурыдобавляют поверхности детали, но без света даже они не раскрываются полностью. Поэтому освещение — это один из главных инструментов визуальной глубины.

В Three.jsсвет — это отдельный объект сцены. Он не просто делает изображение ярче, а помогает увидеть объём, направление граней и глубину пространства. Без света часть материалов выглядит одинаково со всех сторон, и форма теряет выразительность. Именно поэтому свет становится важным шагом после сборки геометрии и материала.

Не все материалы реагируют на свет одинаково. Например,MeshBasicMaterialпоказывает только цвет и не учитывает освещение. АMeshStandardMaterialили MeshPhongMaterialуже позволяют увидеть, как свет моделирует поверхность. Получается, что визуальная глубина рождается не только из света, но и из того, как материал умеет с ним работать.

Текстура — это изображение, которое накладывается на поверхность объекта. Она помогает добавить детали без изменения самой геометрии. В этом уроке текстуры ещё не становятся главной темой, но важно понять, что они работают вместе со светом, а не отдельно от него. Освещение позволяет поверхности выглядеть более убедительно.

const light = new THREE.DirectionalLight(0xffffff, 1.4); // источник света
light.position.set(2, 2, 3); // положение света в сцене
scene.add(light); // добавляем свет в сцену

Здесь создаётся источник света и помещается в сцену. Важен не только сам  свет, но  и его положение: от него зависит, какие части объекта будут освещены сильнее, а какие уйдут в тень. Когда свет начинает взаимодействовать с материалом, форма становится читаемее. Именно так 3D-объект получает ощущение объёма.

Ниже ты соберёшь сцену с освещением шаг за шагом. Сначала объект будет выглядеть почти плоским, потом появится материал, который реагирует на свет, а затем — сам источник света. Так будет понятно, как именно рождается визуальная глубина.

Задача

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

В финальном варианте на экране находится вращающийся объект на светлом фоне. Благодаря освещению одна часть поверхности выглядит ярче, а другая уходит в тень. За счёт этого сцена начинает восприниматься глубже, чем в предыдущих уроках.

Здесь объект уже собран не только из геометрии и материала, но и освещён источником света. Материал учитывает освещение, поэтому поверхность реагирует на положение лампы. Вращение помогает увидеть, как свет по-разному ложится на грани. Это делает сцену более убедительной и трёхмерной.

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

Здесь используется материал, который просто показывает цвет. Форма видна, но освещение на неё ;не влияет. Поэтому сцена остаётся очень базовой по восприятию.

Теперь меняется материал. Он начинает учитывать свет, но самого света в сцене ещё нет. Это важный промежуточный шаг: объект уже готов к освещению, но пока не раскрывается.

const width = app.clientWidth;
const height = app.clientHeight;

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf8f8f8);

const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
camera.position.z = 3;
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

app.innerHTML = "";
app.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x858585 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

renderer.render(scene, camera);

Этот этап важен концептуально, но визуально почти ничего не показывает. Поэтому здесь лучше смотреть именно на код и логику сборки сцены, а не на результат на экране.

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

Здесь свет и материал начинают работать вместе. Грани объекта читаются лучше, и форма выглядит не просто геометрической, а пространственной. Это уже почти финальная сцена.

Вывод

1. Свет влияет на восприятие объёма и глубины
2. Материал должен уметь реагировать на свет, иначе сцена останется плоской
3. Даже простой источник света заметно меняет впечатление от объекта
4. Текстуры работают особенно убедительно именно вместе с освещением

Задание

Попробуй улучшить сцену самостоятельно. В коде ниже уже подготовлены апгрейды: можно поменять силу света, изменить цвет материала и сделать поверхность более выразительной. Раскомментируй строки по одной и сравни, как меняется ощущение глубины.

1. Раскомментируй более яркий источник света и сравни мягкое и сильное освещение
2. Попробуй изменить цвет материала и посмотреть, как он взаимодействует со светом
3. Добавь второй слабый свет, чтобы сцена стала мягче
4. Попробуй заменить куб на шар и посмотреть, как свет читается на более плавной форме