Цвет фона и прозрачный фон

В Three.js фон сцены управляется через объект Scene и параметры рендерера. Цвет фона и прозрачность могут значительно влиять на визуальное восприятие сцены, поэтому правильная конфигурация этих параметров необходима для реализации качественной графики.

Установка цвета фона сцены

Цвет фона сцены задаётся свойством scene.background. Это может быть:

  • Цвет (Color) – используется объект THREE.Color или строковое представление цвета.
  • Текстура (Texture) – фоновое изображение.
  • CubeTexture – для создания эффектов окружения.

Пример установки однотонного цвета:

import * as THREE from 'three';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1e1e1e); // тёмно-серый фон

Цвет можно задавать в шестнадцатеричной форме, в CSS-формате ("red", "rgb(255,0,0)") или через объект THREE.Color с методами .set():

scene.background = new THREE.Color();
scene.background.set('skyblue'); // установка цвета по имени

Прозрачный фон

Для прозрачного фона используется свойство alpha при создании рендерера и значение null для scene.background:

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);

const scene = new THREE.Scene();
scene.background = null; // фон прозрачный

Особенности прозрачного фона:

  • Рендерируемая сцена накладывается на элемент HTML, под которым находится фон веб-страницы.
  • Если требуется полупрозрачность, можно использовать объект THREE.Color с альфа-компонентом при композитировании, но рендерер должен поддерживать альфа-канал.

Комбинирование прозрачности и цвета фона

Можно добиться эффекта полупрозрачного фона, комбинируя цвет и альфа-канал через WebGLRenderer и шейдеры:

renderer.setClearColor(new THREE.Color(0x000000), 0.5); // цвет с прозрачностью 50%

Параметры метода setClearColor:

  • color – объект THREE.Color или числовое значение.
  • alpha – значение прозрачности от 0 до 1.

При alpha < 1 сцена будет частично просвечивать сквозь родительский DOM-элемент.

Фоновая текстура

Для установки текстуры в качестве фона используется объект THREE.TextureLoader:

const loader = new THREE.TextureLoader();
loader.load('textures/sky.jpg', function(texture) {
    scene.background = texture;
});

Особенности:

  • Текстура автоматически масштабируется под размер сцены.
  • Можно использовать CubeTexture для создания 360° окружения.

Пример создания кубического фона:

const loader = new THREE.CubeTextureLoader();
const textureCube = loader.load([
    'px.jpg', 'nx.jpg',
    'py.jpg', 'ny.jpg',
    'pz.jpg', 'nz.jpg'
]);
scene.background = textureCube;

Изменение фона динамически

Фон можно менять во время работы приложения, что полезно для анимаций или смены тем:

scene.background = new THREE.Color(Math.random() * 0xffffff);

Для плавной анимации цвета можно использовать интерполяцию:

const startColor = new THREE.Color(0xff0000);
const endColor = new THREE.Color(0x0000ff);
const t = 0.5; // значение от 0 до 1
scene.background = startColor.clone().lerp(endColor, t);

Взаимодействие с постобработкой

При использовании EffectComposer фон сцены и прозрачность должны быть учтены:

  • Если рендерить на прозрачный canvas, нужно включить alpha: true.
  • Фон сцены может быть отключён для смешивания с эффектами, например, bloom или filmPass.

Советы по производительности

  • Однотонный фон рендерится быстрее, чем текстура или кубический фон.
  • Для прозрачного фона избегать сложных шейдеров, чтобы не снижать FPS.
  • Использование CubeTexture рекомендуется только при необходимости окружения, иначе достаточно однотонного цвета.

Эти механизмы позволяют гибко управлять визуальным представлением сцены в Three.js, создавая как полностью прозрачные сцены для наложения на веб-страницы, так и насыщенные фоны с текстурами и эффектами окружения.

Оглавление