Сайт на Three.js - это обычный сайт на HTML, CSS и фреймворке вроде Next.js, к которому добавлен WebGL-холст. Он рисует 3D в реальном времени с помощью графического процессора устройства посетителя. Небольшая команда собирает такой сайт из четырёх составляющих: дизайн, 3D-модели и материалы, программирование эффектов и обычная клиентская часть. По опубликованным оценкам студий, разработка занимает 8-14 недель для сайта с одним 3D-эпизодом и 14-20 недель, если 3D используется повсюду. Бюджеты начинаются от 8 000 $ за флагманский WebGL-сайт у фрилансера и доходят до 50 000-100 000 $ за студийную разработку с 3D на каждой странице.
Это руководство для заказчика. Знать программирование не нужно, но небольшой пример кода поможет понять, за что вы платите.
Технологии сайта на Three.js простыми словами
| Составляющая | Типичный инструмент | Что позволяет делать |
|---|---|---|
| Фреймворк | Next.js или Vite + React | Страницы, переходы между ними и HTML, подготовленный на сервере и доступный Google |
| Движок 3D-рендеринга | Three.js | Рисует геометрию, свет и материалы на <canvas> |
| Слой React | React Three Fiber (R3F) + drei | Позволяет описывать 3D-сцену с помощью компонентов React |
| Анимация | GSAP + ScrollTrigger | Связывает движение камеры и появление элементов с прокруткой страницы |
| Плавная прокрутка | Lenis | Добавляет прокрутке инерцию и делает её поведение одинаковым на разных устройствах |
| Физика | Rapier или cannon-es | Гравитация, столкновения, объекты, которые можно опрокинуть |
| Модели и материалы | Blender, glTF/GLB, Draco, KTX2 | Модели экспортируют в glTF и сжимают для работы в браузере |
| Шейдеры | GLSL | Небольшие программы для графического процессора, которые создают необычные поверхности, искажения и частицы |
Деталь для бюджета: раньше часть плагинов GSAP была платной. После приобретения компанией Webflow GSAP и ранее платные плагины Club стали бесплатными, в том числе для коммерческого использования. Эту лицензию больше не нужно закладывать в расходы.
Как выглядит код сайта на React Three Fiber
Если вы слышали о сайтах на React Three Fiber и хотите понять, как это устроено, вот готовая сцена для первого экрана, которая загружает модель товара:
import { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { useGLTF, Environment } from '@react-three/drei'
function Bottle() {
const { scene } = useGLTF('/models/bottle.glb')
return <primitive object={scene} />
}
export default function Hero() {
return (
<Canvas dpr={[1, 2]} camera={{ position: [0, 0, 4], fov: 35 }}>
<Suspense fallback={null}>
<Bottle />
<Environment preset="studio" />
</Suspense>
</Canvas>
)
}Двадцати строк достаточно, чтобы показать модель на экране. Недели уходят на свет в стиле бренда, осмысленное движение и стабильную работу на телефонах среднего класса.
Как создают сайт на Three.js: шесть этапов
- Концепция и раскадровка анимации. Ещё до написания кода по кадрам продумывают, что посетитель увидит и с чем сможет взаимодействовать на каждом этапе прокрутки.
- Подготовка 3D-материалов. Модели создают или дорабатывают в Blender, накладывают текстуры, экспортируют в GLB и сжимают. Если есть только CAD-файлы, этот этап займёт больше времени.
- Прототип на настоящем телефоне. Одну черновую сцену проверяют на Android среднего класса. Здесь можно отказаться от неудачной идеи с минимальными затратами.
- Разработка. Создание сцен, настройка их поведения при прокрутке, HTML-страницы вокруг них и подключение CMS.
- Скорость и запасные варианты отображения. Сжатие, версии для устройств разной мощности, статичные изображения и режим уменьшенного движения. Подробнее - в руководстве по производительности 3D-сайтов.
- Проверка качества и запуск. Тестирование в разных браузерах, проверка доступности, аналитика, Search Console.
Загрузка: почему 3D появляется последним
Главное техническое решение для сайта на Three.js - порядок загрузки. По данным Utsubo, ядро Three.js занимает около 600 KB после минификации, а вместе с drei, постобработкой и GLB - уже больше 3 MB. Этот объём не должен задерживать появление заголовка.
Поэтому сначала страница отдаёт HTML и статичное изображение, а уже потом загружает 3D-код. Даже при медленном соединении посетитель видит полноценную страницу.
Кто создаёт сайт: команда
- Дизайнер / арт-директор: внешний вид, типографика, характер движения.
- 3D-художник: моделирование, UV-развёртки, текстуры, свет, экспорт.
- Креативный разработчик: Three.js/R3F, шейдеры, движение при прокрутке, производительность. Такого специалиста найти сложнее всего.
- Фронтенд-разработчик: HTML-часть сайта, CMS, формы, базовая SEO-настройка.
- Тестировщик: устройства, браузеры, доступность.
В небольших студиях один человек совмещает несколько ролей, а фрилансер может выполнять их все. Поэтому сроки и цены так различаются. Опубликованные диапазоны собраны в нашем руководстве по стоимости 3D-сайтов.
Three.js, Webflow, Framer или Spline
В Webflow и Framer можно встроить 3D через виджет или блок кода. Для одной декоративной сцены этого достаточно. Если же на 3D построена вся подача, нужен полный контроль над кодом и порядком загрузки. Сравниваем варианты в статье «Webflow, Framer или индивидуальная разработка».
Перед составлением задания загляните в нашу подборку примеров WebGL-сайтов: реальные проекты сгруппированы по задачам, которые решает 3D.
Поддержка: что происходит после запуска
- Фиксируйте версии библиотек. Three.js часто обновляется, иногда с изменениями API. Обновления нужно внедрять осознанно.
- Обновляйте модели и материалы. Новый товар или цветовой вариант проходит тот же процесс подготовки модели.
- Проверяйте устройства. Браузеры и графические процессоры меняются; раз в квартал тестируйте сайт на настоящих телефонах.
- Поддерживайте версию без 3D. Именно HTML со статичным изображением видят Google и маломощные телефоны.
