Отрисовка 3D в React с Three.js и react-three-fiber

Введение

Появление 3D‑отрисовки в вебе изменило взаимодействие пользователей с приложениями: страницы стали более иммерсивными, а взаимодействие — наглядным. Технологии 3D широко используются в играх, AR/VR, визуализации продуктов и интерактивных презентациях.

Эта статья предназначена для фронтенд‑разработчиков и технических дизайнеров, которые хотят добавить 3D‑контент в React‑приложение, не уходя глубоко в нативную графику. Если вы начинающий в Blender, в разделе будет объяснено, как получить модель в подходящем формате.

Важно: 3D повышает вовлечённость, но требует ресурсов — рассчитывайте повлиять на время загрузки и производительность.

Что такое 3D‑модель и как браузер её рендерит

Краткое определение: 3D‑модель — набор вершин (vertices), рёбер и граней (faces), плюс материалы и текстуры. Современные браузеры используют WebGL для работы с GPU и рендеринга этих моделей в HTML‑canvas.

Ключевые компоненты сцены:

• Сцена (scene): контейнер для всех объектов, света и камер.
• Камера (camera): точка обзора, свойства — FOV, aspect, near/far.
• Рендерер (renderer): часть, которая рисует сцену в canvas.

Наглядная аналогия: сцена — сцена театра, объекты — актёры, камера — место зрителя, рендерер — проектор, который отображает сцену на экране.

Технологии: Three.js и react‑three‑fiber

Three.js — базовая JavaScript‑библиотека для 3D в браузере. Она предоставляет низкоуровневые абстракции (геометрии, материалы, шейдеры).

react‑three‑fiber — адаптер, который маппит API Three.js на декларативный React‑подход. Это позволяет писать 3D‑сцены как React‑дерево, использовать хуки и композицию компонентов.

react‑three‑drei — набор готовых компонентов и хуков (например, OrbitControls, Stage, useGLTF), которые ускоряют разработку.

Установка зависимостей

Откройте терминал в корне проекта React и выполните:

npm install three @react-three/fiber @react-three/drei

Это установит Three.js, react‑three‑fiber и утилиты из drei.

Быстрая проверка: рендерим простую 3D‑коробку

Откройте src/app.js, удалите шаблонный код и вставьте следующий компонент. Код демонстрационный — он показывает основу: Mesh + Геометрия + Материал + Свет + Управление камерой.

import React from "react";  
import {Canvas} from "@react-three/fiber";  
import {OrbitControls} from "@react-three/drei";  
  
function Box() {  
  return (  
      
        
        
      
  )  
}  
  
export default function App() {  
  return (  
    
  
      
  
          
            
            
            
            
          
      
  
    
  
  );  
}

Что делает код:

• Компонент Box создаёт mesh с boxBufferGeometry (форма) и meshLambertMaterial (материал) цвета hotpink.
• Canvas является корнем сцены и использует WebGL‑рендерер под капотом.
• OrbitControls даёт пользователю возможность вращать камеру вокруг объекта.
• ambientLight добавляет мягкий общий свет; spotLight добавляет направленный источник с углом 0.3.

Импортируйте и отрендерьте App в index.js и запустите dev‑сервер: http://localhost:3000.

Загрузка модели из Blender/Sketchfab (GLTF/GLB)

GLTF/GLB — современный формат для 3D в вебе: компактный, поддерживает материалы PBR и анимацию. Blender экспортирует прямо в GLTF.

Пример: возьмём модель BMW из Sketchfab (файл bmw.glb). Скопируйте bmw.glb в папку public вашего React‑проекта.

Заменим содержимое src/app.js на код, который использует useGLTF и Stage:

• Импорт:

import {useGLTF, Stage, PresentationControls} from "@react-three/drei";

• Компонент модели и приложение:

function Model(props){  
  const {scene} = useGLTF("/bmw.glb");  
  return   
}  
  
export default function App() {  
  return (  
    
  
      
  
          
            
              
                
              
            
          
      
  
    
  
  );  
}  

Пояснения:

• useGLTF загружает сцену из файла /bmw.glb и возвращает объект scene.
• primitive object={scene} вставляет готовую сцену Three.js в дерево react‑three‑fiber.
• dpr задаёт диапазон Device Pixel Ratio, shadows включает расчёт теней, camera.fov задаёт поле зрения (в градусах).
• PresentationControls даёт управление вращением/зумом модели, Stage автоматически настраивает освещение и подложку в сцене.

Запустите dev‑сервер и откройте страницу — модель должна отображаться в canvas.

Практические советы по производительности

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

• Ленивая загрузка: загружайте большие GLB‑файлы по требованию (dynamic import, Suspense, lazy). Это уменьшит TTI.
• Компрессия: используйте Draco для геометрии и KTX2/Basis для текстур (GLTF поддерживает расширения). Draco сильно уменьшает размер вершин.
• LOD (уровни детализации): для объектов, которые далеко от камеры, используйте упрощённые меши.
• Атласы текстур: объединяйте мелкие текстуры в один атлас, чтобы снизить количество загружаемых файлов и переключений материалов.
• Ограничьте использование динамических теней и интенсивных шейдеров на мобильных устройствах.
• Используйте requestAnimationFrame бережно: рендерить кадры только при необходимости (например при взаимодействии), а не постоянно.

Важно: всегда профилируйте на реальных устройствах (особенно на слабых телефонах).

Когда 3D не подходит: ограничения и антипаттерны

• Для простых UI‑элементов 3D не повысит успеха и только усложнит поддержку.
• Если у вас низкий бюджет на оптимизацию, большие 3D‑библиотеки могут негативно сказаться на UX.
• Для SEO‑критичных страниц (landing pages с контентом) полагаться только на 3D для передачи информации — плохая идея.

Альтернатива: интерактивные 2D‑изображения с CSS/Canvas либо WebGL‑элементы как мелкие декоративные эффекты.

Альтернативные движки и подходы

• Babylon.js — полноценный движок с хорошей поддержкой PBR и инструментов, удобен для игр и сложной логики.
• PlayCanvas — облачная платформа для рендера и редактора сцен.
• Использовать 3D только для предпросмотра продукта, а остальной интерфейс оставить 2D.

Выбор зависит от задачи: Three.js + react‑three‑fiber хороши для декларативной интеграции в React‑стек.

Ментальные модели и готовые паттерны

• «Сцена как дерево»: думайте о сцене как о React‑дереве — компоненты можно переиспользовать и тестировать.
• «Геометрия + Материал + Трансформация»: для каждого меша определены эти три кита.
• «Рендерить по взаимодействию»: избегайте постоянного рендеринга, если сцена статична.

Чек‑лист по ролям

Для фронтенд‑разработчика:

• Установить three, @react-three/fiber, @react-three/drei.
• Настроить lazy‑загрузку моделей и прелоадер.
• Добавить fallback‑UI для случаев, когда WebGL недоступен.
• Тестировать на мобильных устройствах.

Для дизайнера/3D‑художника:

• Экспортировать модели в GLTF/GLB с PBR‑материалами.
• Минимизировать количество текстур и разрешения по необходимости.
• Предоставить LOD‑версии ключевых объектов.

Для QA:

• Проверить загрузку и поведение при медленном инете.
• Тестировать поведение управления камерой и коллизии (если есть).
• Проверить корректность отображения на разных GPU/драйверах.

Критерии приёмки

• Модель загружается и отображается в canvas на основных браузерах (Chrome, Firefox, Edge, Safari).
• Управление камерой работает плавно на десктопе и мобильных устройствах.
• Производительность не падает ниже приемлемого порога на целевых устройствах (по результатам профайла).
• При отключённом WebGL приложение даёт корректный fallback (сообщение или статическое изображение).

Тестовые сценарии и приёмо‑сдаточные кейсы

• Загрузка страницы при нормальной и плохой сети: UI не блокируется.
• Подмена модели: при ошибке загрузки показывать ошибку и fallback.
• Взаимодействие с PresentationControls: вращение, зум, сброс позиции.
• Тест на память: нет утечек при переходе между страницами.

Безопасность и приватность

• Модель и текстуры загружаются из публичной папки или CDN; избегайте включения чувствительных данных в 3D‑ресурсы.
• Следите за политиками CORS при загрузке моделей с внешних источников.
• GLTF/GLB файлы могут содержать внешние ссылки (например на текстуры) — проверяйте их содержимое перед публикацией.

Советы по миграции и совместимости

• Если переходите с чистого Three.js на react‑three‑fiber, начните с обёртывания Canvas и постепенно переводите части сцены в компоненты.
• Тестируйте на основных версиях React: react‑three‑fiber требует совместимых версий React/React‑DOM.
• При использовании server‑side rendering учитывайте, что WebGL доступен только в браузере — рендерьте Canvas на клиенте.

Шпаргалка: часто используемые компоненты и пропы

• Canvas — корень сцены.
• mesh — базовый меш.
• boxBufferGeometry, sphereBufferGeometry, planeBufferGeometry — геометрии.
• meshStandardMaterial, meshLambertMaterial — материалы.
• useGLTF — хук для загрузки GLTF/GLB.
• OrbitControls, PresentationControls — управление камерой.
• Stage — быстрый способ настроить экспозицию и окружение.

Пример быстрого workflow для внедрения 3D в проект (мини‑методология)

1. Оцените цель: визуализация продукта, иммерсивный UI или декорация.
2. Подготовьте минимальный прототип: один объект + управление камерой.
3. Измерьте производительность и UX на целевых устройствах.
4. Оптимизируйте: Draco, LOD, текстурные атласы.
5. Добавьте постепенную загрузку, аналитикy и fallback.
6. Интегрируйте в основной UI и протестируйте кроссбраузерно.

Заключение

3D в React с Three.js и react‑three‑fiber даёт мощный инструмент для создания иммерсивного опыта. Начните с простой коробки, затем постепенно добавляйте модели, оптимизации и пользовательские контролы. Всегда учитывайте производительность и обеспечьте корректные fallback‑механизмы для устройств без WebGL.

Важно: 3D — это средство, а не цель. Используйте его там, где он улучшает восприятие продукта, а не усложняет интерфейс.

Ключевые шаги для старта: установить зависимости, отрисовать базовую геометрию, затем загрузить GLTF/GLB и оптимизировать загрузку.