Three.js: Руководство по основным компонентам

Three.js – это мощный JavaScript библиотека для создания интерактивных 3D-графиков. Она предлагает множество удобных инструментов для создания реалистичных 3D-сцен, в том числе анимаций. В этой статье мы рассмотрим основные компоненты, необходимые для создания 3D-визуализаций с помощью Three.js. Мы будем обсуждать Scene, Camera, Render, Geometry, Material, Mesh, animate, Light, AmbientLight, SpotLight, Raycaster, OrbitControls, TextGeometry, Loaders, Materials и Animations, AnimationMixer, приведены примеры кода и подробное описание работы каждого из элементов.

Scene

Сцена – это часть библиотеки Three.js и представляет собой 3D сцену в виртуальном мире, это контейнер, который содержит все объекты и источники света в вашем 3D-мире. Он используется для хранения и отображения всех объектов, таких как камера, свет и меши.

Основные методы и свойства Scene:

• add( object ) – добавляет объект в сцену
• remove( object ) – удаляет объект из сцены
• background – устанавливает цвет фона сцены

Пример использования:

// создаем экземпляр сцены
const scene = new THREE.Scene();

// создаем куб и добавляем его в сцену
const cube = new THREE.Mesh(
    new THREE.BoxGeometry( 1, 1, 1 ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00 } )
);

scene.add( cube );

// устанавливаем цвет фона сцены
scene.background = new THREE.Color( 0xffffff );

В данном примере создается экземпляр сцены Scene используя new THREE.Scene().

Затем создается куб с помощью Mesh и его геометрией BoxGeometry и материалом MeshBasicMaterial. Объект куба добавляется в сцену с помощью метода add( object ).

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

После выполнения этого кода в сцене будет один куб с зеленым цветом и белым фоном.

Camera

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

const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );

PerspectiveCamera – это тип камеры в Three.js, который представляет собой перспективную камеру. Она используется для визуализации трехмерного пространства и для определения того, как объекты в сцене выглядят для пользователя.

• fov (угол обзора) – это угол обзора камеры в градусах.
• aspect (соотношение сторон) – это соотношение ширины к высоте окна просмотра.
• near (близко) – минимальное расстояние, на котором объекты могут быть видны.
• far (далеко) – максимальное расстояние, на котором объекты могут быть видны.

Пример:

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

В этом примере создается экземпляр перспективной камеры с углом обзора 75 градусов, сотношением сторон окна вида aspect = window.innerWidth / window.innerHeight и ближней и дальней плоскостью отсечения near = 0.1, far = 1000.

Render

Рендеринг используется для рендеринга 3D-сцены в веб-браузере. Вы можете создать новый рендерер, используя следующий код:

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

WebGLRenderer – это функция в Three.js, которая отвечает за рендеринг 3D сцены на веб-странице с использованием WebGL.

Она принимает следующие параметры:

• options: объект, содержащий различные опции рендерера, такие как белый цвет фона, поддержка антиалиасинга и т.д.
  • alpha: включает или отключает прозрачность.
  • antialias: включает или отключает сглаживание.
  • preserveDrawingBuffer: устанавливает сохранение буфера рисования.

const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

В этом примере создается экземпляр WebGLRenderer с включенным антиалиасингом. Размер рендерера устанавливается равным ширине и высоте окна браузера, а элемент canvas, сгенерированный рендерером, добавляется в body HTML-документа.

Geometry

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

const geometry = new THREE.BoxGeometry( 1, 1, 1 );

BoxGeometry – это функция, которая создает геометрию куба в Three.js.

Параметры:

• width (ширина) – размер по оси x
• height (высота) – размер по оси y
• depth (глубина) – размер по оси z

В этом примере создается геометрия куба с размером 1x1x1.

Material

Материал определяет внешний вид объекта в 3D-сцене. Вы можете создать новый материал, используя следующий код:

const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

MeshBasicMaterial – это тип материала в Three.js, который позволяет отображать геометрию объекта без затенения или освещения.

Он принимает несколько параметров, таких как:

• color (цвет) – цвет материала, задается в формате RGB или HEX.
• wireframe (сетка) – показывает/скрывает сетку объекта.

Пример использования:

const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  wireframe: true
});

В этом примере создается экземпляр материала типа MeshBasicMaterial с красным цветом и включенным отображением сетки.

Mesh

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

const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

Mesh – это функция в Three.js, которая представляет собой меш, который соединяет геометрию (например, тело или фигуру) и материал (например, цвет или текстуру). Функция Mesh принимает 2 параметра:

1. geometry: геометрия, которая будет использоваться для определения формы меша. Например, BoxGeometry или SphereGeometry.
2. material: материал, который будет использоваться для задания цвета или текстуры меша. Например, MeshBasicMaterial или MeshLambertMaterial.

Пример использования:

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

В этом примере создается куб с размером 1x1x1 и зеленым цветом, используя BoxGeometry для геометрии и MeshBasicMaterial для материала.

animate

animate – это функция, которая используется для анимирования 3D сцены в Three.js. Она принимает два параметра: функцию render и объект options.

render – функция, которая описывает, как должна выглядеть анимация. Она обычно вызывается несколько раз в секунду, чтобы перерисовывать сцену.

options – объект, который содержит настройки для анимации. Он может содержать следующие свойства:

• duration – длительность анимации в миллисекундах.
• easing – функция, которая используется для управления скоростью анимации.

Пример использования animate:

const animate = () => {
  requestAnimationFrame(animate);
  box.rotation.x += 0.01;
  box.rotation.y += 0.01;
  renderer.render(scene, camera);
};

animate();

В этом примере вызывается функция animate, которая в свою очередь вызывает requestAnimationFrame(animate). Это означает, что функция animate будет вызываться постоянно. requestAnimationFrame(animate) – это функция, которая используется для плавной анимации в веб-приложениях. Она позволяет браузеру отслеживать частоту кадров и выполнять анимацию в соответствии с этим. Она принимает один параметр – имя функции, которая будет выполняться в качестве анимации. box (который является экземпляром класса Mesh) вращается вокруг оси X и Y на каждом кадре анимации на величину 0.01 радиана. Затем рендерер renderer выполняет рендеринг сцены scene с использованием камеры camera.

Light

Источники света используются для освещения 3D-сцены. Вы можете создать новый источник света, используя следующий код:

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 50);
scene.add(light);

В этом примере создается экземпляр точечного источника света с белым цветом (0xffffff) и интенсивностью 1. Источник света расположен в точке (0, 0, 50) и имеет максимальную дистанцию 100.

PointLight – это функция, которая описывает источник света в трехмерной сцене. Он имеет позицию в пространстве и цвет, и он светит во все стороны, создавая иллюзию точечного источника света.

Параметры, которые принимает PointLight:

• color: цвет источника света
• intensity: интенсивность света
• distance: максимальное расстояние, на котором свет имеет полную интенсивность
• decay: уменьшение яркости света с удалением от источника

AmbientLight

AmbientLight – это функция в Three.js, которая создает всеобщее освещение для сцены. Она принимает один параметр цвета, который определяет цвет освещения.

Пример:

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

В этом примере создается экземпляр AmbientLight с белым цветом (0xffffff) и добавляется в сцену.

SpotLight

SpotLight – это функция в Three.js, которая создает источник света с узким углом и определенным фокусом. Он принимает следующие параметры:

• color: цвет света, указывается в формате RGB,
• intensity: интенсивность света,
• distance: максимальное расстояние, на котором свет может достигать объектов,
• angle: угол излучения света,
• penumbra: тень, которую создает свет,
• decay: уменьшение яркости света по мере удаления от источника,
• castShadow: определяет, будут ли созданы тени от данного источника света.

Пример:

const spotLight = new THREE.SpotLight(0xffffff, 1, 100, Math.PI / 6, 0.3, 2);
spotLight.position.set(0, 50, 0);
spotLight.castShadow = true;
scene.add(spotLight);

В этом примере создается источник света с цветом 0xffffff (белым), интенсивностью 1, максимальным расстоянием 100, углом излучения Math.PI/6 (30 градусов), penumbra 0.3, decay 2. Позиция источника установлена в (0, 50, 0), а тени в конечной точке источника света помещаются в (0, 0, 0).

Raycaster

Raycaster – это функция в Three.js, которая позволяет производить поиск пересечения луча с объектами сцены. Она принимает два параметра: origin (начальная точка луча) и direction (направление луча).

Пример использования Raycaster:

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// ...

document.addEventListener( 'mousedown', function ( event ) {

  // Преобразование координат мыши в систему координат сцены
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

  // Установка начальной точки и направления луча
  raycaster.setFromCamera( mouse, camera );

  // Поиск пересечения луча с объектами сцены
  const intersects = raycaster.intersectObjects( scene.children );

  // Действие, которое необходимо выполнить при пересечении луча с объектом
  if ( intersects.length > 0 ) {
    intersects[ 0 ].object.material.color.set( 0xff0000 );
  }

}, false );

В этом примере мы создаем экземпляр Raycaster, устанавливаем начальную позицию луча с помощью метода setFromCamera(), а затем используем метод intersectObjects() для получения всех объектов, пересекающихся с лучом. Если есть пересечение, то мы меняем цвет материала пересекаемого объекта.

Raycaster принимает следующие параметры:

• origin: точка, из которой вылетает луч. По умолчанию равен (0, 0, 0).
• direction: направление луча. По умолчанию равно (0, 0, -1).
• near: минимальное расстояние, на котором может быть найдена пересечение с объектом. По умолчанию равно 0.
• far: максимальное расстояние, на котором может быть найдена пересечение с объектом. По умолчанию равно Infinity.

OrbitControls

OrbitControls – это функция в Three.js, которая позволяет управлять камерой в 3D-сцене путем вращения вокруг определенной точки наблюдения.

Функция OrbitControls принимает три параметра:

1. Объект camera, указывающий на текущую камеру в сцене.
2. Объект domElement, указывающий на элемент HTML, в котором будет отображаться сцена.
3. Объект target, указывающий на точку, вокруг которой будет происходить вращение.

Пример использования OrbitControls:

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();

const animate = function () {
  requestAnimationFrame(animate);

  controls.update();
  renderer.render(scene, camera);
};

animate();

В данном коде используется библиотека Three.js для создания веб-графики. Он создает сцену, камеру, объекты и освещение, использует OrbitControls для управления вращением камеры вокруг объектов, и использует функцию requestAnimationFrame для анимации объектов.

• Создается сцена с помощью new THREE.Scene().
• Создается камера с помощью new THREE.PerspectiveCamera().
• Создаются объекты с помощью new THREE.Mesh(), используя геометрию и материалы.
• Создается освещение с помощью new THREE.PointLight().
• Используется OrbitControls для управления вращением камеры вокруг объектов.
• Используется функция requestAnimationFrame для анимации объектов, используя функцию animate.
• Используется renderer.render для отрисовки сцены и объектов.

Этот код является основой для создания 3D-графики в браузере с использованием Three.js.

TextGeometry

TextGeometry – это функция в three.js, которая позволяет создавать 3D текстовые геометрии. Она принимает следующие параметры:

1. text: строка текста, который нужно отобразить.
2. Опциональные параметры: настройки, такие как ширина, высота, глубина, размер шрифта и т.д.

Пример использования:

const text = "Hello, World!";
const textGeometry = new THREE.TextGeometry(text, {
  font: new THREE.Font(font),
  size: 10,
  height: 2
});

const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const textMesh = new THREE.Mesh(textGeometry, textMaterial);

scene.add(textMesh);

В этом примере создается геометрия текста со строкой “Hello, World!”, размером шрифта 10 и высотой 2. Затем материал создается с цветом 0xff0000. И в конце создается сетка и добавляется в сцену.

Loaders

Three.js предоставляет ряд загрузчиков для загрузки 3D-моделей и других ресурсов в сцену. Некоторые из наиболее часто используемых загрузчиков:

Three.js имеет набор загрузчиков, которые позволяют загружать различные типы 3D-моделей и ресурсов, таких как OBJ, STL, Collada, GLTF и т.д.

Основные загрузчики:

• ObjectLoader: Загружает модель формата JSON, созданную с помощью Three.js.
• GLTFLoader: Загружает модель формата GLTF.
• ColladaLoader: Загружает модель формата Collada.
• STLLoader: Загружает модель формата STL.
• MTLLoader: Загружает материалы в формате MTL, которые используются в сочетании с OBJ.
• OBJLoader: Загружает модель формата OBJ.

Пример использования:

const loader = new THREE.GLTFLoader();

loader.load( 'models/gltf/robot.gltf', function ( gltf ) {

  scene.add( gltf.scene );

}, undefined, function ( error ) {

  console.error( error );

} );

В этом примере используется GLTFLoader для загрузки модели формата GLTF и добавления ее в сцену.

Materials

Materials в Three.js – это объекты, которые определяют внешний вид объектов в сцене. Они задают свойства такие как цвет, текстуру, отражение и прозрачность.

В Three.js существует множество различных типов материалов, но среди основных типов можно выделить:

• MeshBasicMaterial: простой материал, который не поддерживает освещение и тени.
• MeshLambertMaterial: материал, который поддерживает рассеянное освещение.
• MeshPhongMaterial: материал, который поддерживает зеркальное освещение.
• LineBasicMaterial: материал, используемый для создания линий.
• PointsMaterial: материал, используемый для создания точечных объектов.
• ShaderMaterial: материал, который использует шейдеры для управления визуальными эффектами.

Пример использования:

const material = new THREE.MeshLambertMaterial({
  color: 0xff0000,
  side: THREE.DoubleSide
});

const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

В этом примере мы создаем объект материала с помощью MeshLambertMaterial и задаем ему цвет в виде шестнадцатеричного числа и устанавливаем флаг side в THREE.DoubleSide, чтобы разрешить видимость с обеих сторон. Затем мы создаем объект Mesh используя геометрию и этот материал, и добавляем его в сцену.

Animations

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

1. Перемещение: анимация перемещения объекта по определенному пути.
2. Вращение: анимация вращения объекта вокруг определенной оси.
3. Масштабирование: анимация изменения размера объекта.
4. Изменение цвета: анимация изменения цвета материала объекта.

Для создания анимаций также можно использовать библиотеку morph target animation, которая позволяет создавать анимацию используя несколько ключевых кадров.

В Three.js анимация может быть реализована с помощью класса AnimationMixer. Этот класс позволяет управлять плейбеком (последовательным воспроизведением) анимационных ключей, таких как поворот, перемещение и масштабирование.

Для создания анимации, сначала необходимо загрузить анимационные данные в формате glTF с помощью GLTFLoader. Затем мы можем создать экземпляр AnimationMixer и вызвать метод .clipAction() с параметром – объектом анимации, который мы загрузили. Этот метод вернет объект, который мы можем использовать для контроля воспроизведения анимации с помощью методов .play(), .stop(), .reset() и т.д.

Ниже приведен пример кода, демонстрирующего использование AnimationMixer:

const loader = new THREE.GLTFLoader();

loader.load( 'path/to/model.gltf', function ( gltf ) {

    const model = gltf.scene;
    scene.add( model );

    const mixer = new THREE.AnimationMixer( model );

    const action = mixer.clipAction( gltf.animations[ 0 ] );
    action.play();

    function update() {
        requestAnimationFrame( update );
        mixer.update( 0.01 );
        renderer.render( scene, camera );
    }

    update();

} );

В этом примере мы используем GLTFLoader для загрузки модели с анимационными данными. После загрузки мы создаем экземпляр AnimationMixer и передаем ему модель, как его цель. Затем мы получаем действие анимации с помощью mixer.clipAction() и вызываем метод .play() для воспроизведения анимации. Мы также создаем функцию update(), которая вызывается внутри requestAnimationFrame(), и вызываем mixer.update() внутри этой функции, чтобы обновлять анимацию каждый кадр.

В этой статье мы рассмотрели различные элементы и функции, которые важны при разработке 3D графики с использованием Three.js. Мы обсудили Scene, Camera, Render, Geometry, Material, Mesh, animate, Light, AmbientLight, SpotLight, Raycaster, OrbitControls, TextGeometry, Loaders, Materials, Animations, AnimationMixer. Эта информация поможет вам улучшить ваши навыки в разработке 3D графики с помощью Three.js и предоставит вам все необходимые знания для создания высококачественных интерактивных 3D визуализаций.