Scene: контейнер всех объектов

Сцена в Three.js (THREE.Scene) является центральным контейнером, который хранит все объекты, камеры, источники света и вспомогательные элементы, участвующие в рендеринге 3D-сцены. Она определяет пространство, в котором происходят все взаимодействия, и предоставляет методы для управления иерархией объектов.

Создание сцены

Создание сцены выполняется через конструктор:

const scene = new THREE.Scene();

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

Добавление объектов

Все объекты в Three.js наследуются от класса THREE.Object3D. Это может быть:

  • Геометрия (THREE.Mesh) с материалом (THREE.Material)
  • Камеры (THREE.Camera)
  • Свет (THREE.Light)
  • Контейнеры (THREE.Group) для организации объектов

Пример добавления простого куба:

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

Объекты можно добавлять по одному или группами, используя метод add():

const group = new THREE.Group();
group.add(cube);
scene.add(group);

Иерархия объектов

THREE.Scene поддерживает древовидную структуру объектов. Любой объект может быть родителем для других объектов, что позволяет применять трансформации на уровне группы, а не отдельных элементов:

  • Позиция (position) — перемещение объекта в пространстве сцены.
  • Вращение (rotation) — ориентация объекта по осям X, Y, Z.
  • Масштаб (scale) — размер объекта в пространстве сцены.
  • Матрица трансформации (matrix) — внутреннее представление всех преобразований.

Изменения родительского объекта автоматически влияют на дочерние. Например, вращение группы повернет все её дочерние объекты.

Фон сцены и туман

Сцена может иметь фон и туман:

scene.background = new THREE.Color(0x87ceeb); // Цвет фона
scene.fog = new THREE.Fog(0x87ceeb, 10, 50); // Линейная туманность

Фон может быть цветом, текстурой (THREE.Texture) или кубической текстурой (THREE.CubeTexture) для создания окружения. Туман добавляет глубину и реалистичность, особенно в больших сценах.

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

Свет добавляется как объекты сцены, так же, как геометрия:

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);

Сцена не рендерится без источников света при использовании материалов, требующих освещения (MeshStandardMaterial, MeshLambertMaterial).

Обновление сцены

После добавления объектов и света необходимо обновлять трансформации и анимацию объектов перед рендером:

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

Сцена хранит все объекты, но сама не рендерится — для этого используется объект THREE.WebGLRenderer.

Пользовательские свойства

Сцена допускает хранение произвольных данных, которые могут использоваться для управления логикой игры или приложения:

scene.userData.score = 0;

Это удобно для хранения глобального состояния, связанного с конкретной сценой.

Оптимизация

  • Группировка объектов снижает количество операций трансформации и облегчает управление.
  • Удаление объектов через scene.remove(object) освобождает память.
  • Использование frustum culling (автоматически в Three.js) ускоряет рендер, исключая невидимые объекты.

События сцены

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

Практическая структура

Обычно структура сцены выглядит следующим образом:

scene
├── group (например, "environment")
│   ├── mesh1
│   └── mesh2
├── mesh (например, "player")
├── camera
├── lights
└── дополнительные элементы (particles, helpers)

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

Оглавление