Tiny Online Tools
Четыре способа поставить модель на страницу — и все они полные
Встраивание 3D-модели относится к тем задачам, где пример кода всегда почти правильный. Фрагмент кода из документации забывает обработчик изменения размера. Статья в блоге пропускает controls.update(), и затухание молча перестаёт работать. Пример на React пропускает границу Suspense и падает на первом рендере. Этот генератор выдаёт всё целиком — и с теми настройками, которые вы действительно выбрали.
<model-viewer>
Веб-компонент от Google — самый короткий путь от пустоты до работающего просмотрщика: один тег <script type="module"> и один пользовательский элемент. Управление камерой, автовращение, AR и на Android, и на iOS, освещение на основе изображения и постер он берёт на себя сам. Если модель нужна на маркетинговой странице уже сегодня к вечеру — берите этот вариант.
В сгенерированный тег входит touch-action="pan-y" — его легко упустить, а именно он отделяет просмотрщик, который на телефоне ощущается родным, от того, который дерётся с прокруткой страницы.
Three.js
Для сцены, которой управляете вы. Фрагмент кода импортирует из three/addons/* — это настоящий subpath-экспорт пакета three, поэтому он работает с любым сборщиком, — настраивает рендерер с тональной компрессией (tone mapping) ACES и вашей экспозицией, строит нейтральное студийное окружение через PMREMGenerator и RoomEnvironment, добавляет OrbitControls с затуханием, загружает модель через GLTFLoader, обрабатывает изменение размера и работает на renderer.setAnimationLoop(), а не на голом requestAnimationFrame, чтобы тот же цикл продолжал работать, если страница позже войдёт в WebXR.
React Three Fiber
Версия для React: @react-three/fiber для канваса, @react-three/drei для useGLTF, OrbitControls, Environment и ContactShadows. Вызов useGLTF.preload() вынесен за пределы компонента, чтобы загрузка началась до того, как React отрисует дерево, а сама модель находится внутри границы Suspense с настоящим индикатором прогресса на основе useProgress.
Отдельная HTML-страница
Полноценный index.html — doctype, мета-тег viewport, стили, скрипт с CDN, просмотрщик. Сохраните, загрузите на любой статический хостинг — готово. Это не то же самое, что первый фрагмент кода: тот является вставкой в уже существующую страницу, а этот — целым файлом.
Расстояние до камеры
Угадывание расстояния до камеры — самая раздражающая часть встраивания модели, потому что оно зависит от реального масштаба модели. Загрузите файл локально, и инструмент измерит его ограничивающую сферу и вычислит расстояние, на котором модель заполняет пирамиду видимости в 45° с небольшим запасом. Файл никогда не загружается на сервер и никогда не попадает в сгенерированный код — туда попадает только число.