Видимость, слои (layers) и маски

В Three.js управление видимостью объектов осуществляется через свойство visible. Любой объект сцены — будь то Mesh, Group или Object3D — имеет булевое свойство visible. При установке его в false объект и все его потомки не будут отрисовываться, но при этом остаются частью сцены, участвуют в вычислениях трансформаций и могут быть использованы для логики или взаимодействия.

const cube = new THREE.Mesh(geometry, material);
cube.visible = false; // куб не будет отображаться
scene.add(cube);

Важно понимать, что свойство visible действует рекурсивно: если объект скрыт, все дочерние объекты также становятся невидимыми, даже если у них visible = true.

Слои (Layers)

Three.js предоставляет систему слоев (THREE.Layers), которая позволяет группировать объекты и управлять их видимостью для конкретной камеры или рендерера. Каждый объект имеет свойство layers — экземпляр THREE.Layers. Камера также имеет свой объект layers, который определяет, какие слои она видит.

  • Каждый слой представлен числом от 0 до 31.
  • По умолчанию все объекты и камера находятся на слое 0.
  • Можно использовать несколько слоев одновременно, комбинируя их с помощью битовой маски.
// Установка объекта на слой 1
cube.layers.set(1);

// Камера будет видеть только слой 1
camera.layers.enable(1);  
camera.layers.disable(0); // если нужно отключить слой 0

Система слоев полезна для:

  • Отдельной отрисовки интерфейсов (HUD), частиц или эффектов.
  • Разделения сцены на “видимые” и “невидимые” для конкретной камеры.
  • Эффектов многокамерной визуализации, где разные камеры видят разные объекты.

Маски (Masking)

Маски в Three.js тесно связаны со слоями и позволяют более гибко управлять видимостью объектов в рендеринге. Каждая камера и объект имеют битовую маску слоев. Рендерер отображает объект только если маска камеры и маска объекта пересекаются.

// Объект на слое 2
mesh.layers.set(2);

// Камера видит слои 0 и 2
camera.layers.enable(0);
camera.layers.enable(2);

// Объект будет виден, так как слой 2 камеры совпадает с объектом

Маски обеспечивают высокий контроль без необходимости менять свойство visible для большого количества объектов, что особенно полезно при сложной сцене с множеством слоев.

Практическое применение слоев и масок

Пример 1: UI и сцена

Можно разделить основную сцену и элементы интерфейса:

const uiObject = new THREE.Mesh(uiGeometry, uiMaterial);
uiObject.layers.set(1);

const mainCamera = new THREE.PerspectiveCamera(...);
mainCamera.layers.enable(0); // видит сцену
mainCamera.layers.disable(1);

const uiCamera = new THREE.PerspectiveCamera(...);
uiCamera.layers.enable(1); // видит только UI

Так рендерер сможет рисовать сначала сцену, а затем интерфейс, не мешая друг другу.

Пример 2: Скрытие объектов для конкретной камеры

cube.layers.set(2); // объект скрыт от основной камеры
mainCamera.layers.enable(0); // видит слой 0
mainCamera.layers.disable(2); // слой 2 не виден

Такой подход используется для “невидимых коллайдеров”, эффектов частиц или специальных рендеров (например, тени или отражения).

Взаимодействие видимости, слоев и масок

  • visible отключает отрисовку полностью для всех камер и слоев.
  • Слои и маски контролируют видимость для конкретной камеры.
  • Можно комбинировать их для создания сложных сцен с множественными камерами, эффектами и интерфейсными элементами.

Рекомендации по использованию:

  1. Использовать visible для временного скрытия объектов.
  2. Слои применять для разделения объектов по категориям рендеринга.
  3. Маски использовать для управления тем, какие объекты видны конкретной камере, особенно при мультикамерной визуализации.

Встроенные методы работы со слоями

  • object.layers.set(n) — установить слой n.
  • object.layers.enable(n) — добавить слой n к текущему.
  • object.layers.disable(n) — убрать слой n.
  • camera.layers.test(object.layers) — проверка видимости объекта для камеры.

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

Оглавление