ThreeJs — основы

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

Для того чтобы лучше понимать контекст последующего материала ожидается что у тебя уже есть знания js, а также react. Также заранее оговорюсь что буду использовать упрощенное объяснения для наилучшего восприятия.

Содержание

• Основные сущности threejs

• Основные части модели

• Загрузка модели

• Загрузка анимации

• Threejs и React

Основные сущности Three.js

Three.js построен вокруг нескольких ключевых сущностей. Разберём их с примерами кода.

Сцена — это контейнер (объект), в который ты помещаешь все объекты: геометрию, свет, модели, эффекты и т.п.

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

Камера — это глаз пользователя, который видит сцену. Объекты не отображаются, если они вне поля зрения камеры.

const camera = new THREE.PerspectiveCamera(   75,                             // угол обзора (FOV)   window.innerWidth / window.innerHeight, // соотношение сторон   0.1,                            // ближняя плоскость отсечения   1000                            // дальняя плоскость отсечения ); camera.position.set(0, 1, 5); // камера смотрит с точки (0, 1, 5)

Рендерер — это компонент, который переводит сцену и камеру в пиксели, т.е. отрисовывает результат на HTML-экране. Более подробно разберем во 2 части статьи.

const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); // размеры вьюпорта document.body.appendChild(renderer.domElement); // <canvas> элемент, вставляемый в DOM

Как они работают вместе ?

Ты → создаёшь объекты → добавляешь их в сцену
Камера → “смотрит” на сцену
Рендерер → рисует это в на экране

Так а что же на счет 3d моделей ради которых мы и собрались? Давай разберем их чуть подробнее.

Основные части модели

Что же такое модель ?

3D-модель — это структура, описывающая форму, материалы, текстуры и поведение объекта.

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

Геометрия (Geometry) — это форма модели: вершины, грани, координаты и нормали.

• Вершины (vertices) — точки в 3D-пространстве

• Грани (faces) — треугольники между вершинами

• Нормали — направление, в которое “смотрит” поверхность

• UV — координаты наложения текстур

Более подробно разберем во 2 части статьи

Материалы (Materials) — описывают, как должна выглядеть поверхность: цвет, отражения, прозрачность.

В Threejs есть множество материалов, которые служат абстракцией для наилучшего описания нужного материла. Основной MeshStandardMaterial:

const standardMaterial = new THREE.MeshStandardMaterial({   color: 0xffffff,   metalness: 0.8,   roughness: 0.2 });

MeshStandardMaterial, поддерживает следующие параметры:

• color

• roughness

• metalness

• emissive

• alpha (прозрачность)

Для более продвинутых кейсов также существует MeshPhysicalMaterial, данный материал отличается более реалистичным отображением и фактически существует только в рамках threejs, к нему может быть автоматически преобразован материал модели с настройками отражения.

Текстуры (Textures) — это изображения, которые накладываются на материал для создания реалистичности.

Типы текстур:

• diffuse / baseColor — основной цвет

• normalMap — фейковая детализация рельефа

• metalnessMap, roughnessMap - блеск

• aoMap — ambient occlusion (тени)

• emissiveMap — подсветка

const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load('/textures/wood.jpg'); const material = new THREE.MeshStandardMaterial({ map: texture });

Загрузка модели

Загрузка моделей может отличаться в зависимости от формата самой модели. Однако для наиболее популярных форматов подойдет GLTFLoader. В случае более экзотических форматов можно использовать Loader с кастомным поведением

 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';  const loader = new GLTFLoader(); loader.load('/models/robot.glb', (gltf) => {   scene.add(gltf.scene); }); 

Загрузка анимации

Каждая модель может содержать анимацию, если она была заложена на этапе создания этой модели 3d-дизайнером.

В рамках threejs это можно проверить если модель содержит анимации (gltf.animations.length > 0), используй THREE.AnimationMixer:

let mixer; const clock = new THREE.Clock();  loader.load('/models/fox.glb', (gltf) => {   const model = gltf.scene;   scene.add(model);    mixer = new THREE.AnimationMixer(model);    // Проигрываем первую анимацию   const action = mixer.clipAction(gltf.animations[0]);   action.play(); });  function animate() {   requestAnimationFrame(animate);   const delta = clock.getDelta();   mixer?.update(delta);   renderer.render(scene, camera); } 

Threejs и React

Для работы с Three.js в React чаще всего используется следующие пакеты:

@react-three/fiber — обертка над Three.js через JSX (аналог react-dom, но для WebGL)

@react-three/drei — Набор готовых компонентов: OrbitControls, Stage, Text, Gizmo, Loader и т.д.

@react-three/postprocessing — Эффекты постобработки (bloom, depth of field, glitch и пр.)

import { Canvas } from '@react-three/fiber'; import { OrbitControls, Stage } from '@react-three/drei';  export default function App() {   return (     <Canvas>       <Stage environment="city" intensity={0.6}>         <mesh>           <boxGeometry args={[1, 1, 1]} />           <meshStandardMaterial color="skyblue" />         </mesh>       </Stage>       <OrbitControls />     </Canvas>   ); } 

Как видно из примера буквально в одну строчку кода можно описать нужное поведение. Например OrbitControls позволяет вращать камеру относительно сцены. А Stage добавляет пресет заднего фона с освещением. Работа с моделями также упрощена все настройки оборачиваются в mesh и внутри него описываются геометрия и материал, то есть составные части модели.

Также добавлен хук для упрощенной загрузки моделей — useGLTF

// ModelViewer.jsx import { useGLTF } from '@react-three/drei';  export default function ModelViewer(props) {   const { scene } = useGLTF('/models/robot.glb');   return <primitive object={scene} scale={1.5} {...props} />; }

Далее можно вставить данную компоненту прямо в сцену как и любую другую компоненту в обычном react приложении.

Кроме того добавлен хук для загрузки текстур — useTextures

// CrateModel.jsx import { useGLTF, useTexture } from '@react-three/drei'; import * as THREE from 'three';  export default function CrateModel(props) {   // Загружаем модель   const { nodes } = useGLTF('/models/crate.glb');    // Загружаем текстуры   const textureProps = useTexture({     map: '/textures/crate_diffuse.jpg',     roughnessMap: '/textures/crate_roughness.jpg',     normalMap: '/textures/crate_normal.jpg',   });    // Настройка обёртки текстур (по желанию)   Object.values(textureProps).forEach((tex) => {     tex.wrapS = tex.wrapT = THREE.RepeatWrapping;     tex.repeat.set(1, 1);   });    return (     <mesh       geometry={nodes.Crate.geometry}       {...props}       castShadow       receiveShadow     >       <meshStandardMaterial         {...textureProps}         metalness={0.1}         roughness={1}       />     </mesh>   ); } 

Мы разобрали базу, без которой дальше никуда. Я надеюсь как минимум избавил тебя от переживаний, что работа с моделями это что-то из жанра фантастики и все намного проще чем кажется, если разобраться в ключевых аспектах.

В следующей части копнём глубже: как работает сам WebGL под капотом, что на самом деле делает Three.js и как всё это грамотно оптимизировать, чтобы сцена не лагала даже на мобилках. Будет интересно.