Что получилось
Публичная 3D-модель стала частью навигации сайта: космонавт появляется, уходит в глубину, движется по плавной орбите и машет рукой при взаимодействии. Положение рук хранится как пять воспроизводимых поз. Ноги фиксируются отдельно. Скорость, траектория и безопасная зона вынесены в параметры.
Почему готовой анимации не хватило
Встроенный клип не знает композицию страницы. Космонавт должен держаться справа от Земли, не перекрывать текст, останавливаться на время жеста и оставаться читаемым на разных экранах.
Движение разделили на встроенный клип, поправки отдельных костей и траекторию всей модели. Так каждый источник проблемы можно проверить отдельно.
Пульт поз вместо правок на глаз
Query-параметр debug=pose замораживает обычный цикл и открывает ползунки плеча по трём осям, локтя, кисти и пальцев. Удачное положение копируется числовым сниппетом и сохраняется кнопкой A–E.
Между пятью точками работает smootherstep. Один переход длится 18 секунд. Ноги не входят в панель A–E: код отдельно возвращает их в bind pose и задаёт бёдра, колени и стопы.
pose A → 18 s → pose B → 18 s → pose C
→ pose D → pose E → pose A
full cycle: 90 sЧто ломалось
- 01Материал KHR_materials_pbrSpecularGlossiness не поддерживался новой версией Three.js. GLB конвертировали в metal/roughness.
- 02Точки в именах костей ломали PropertyBinding. Имена узлов нормализовали через sanitizeNodeName.
- 03Drei useAnimations не разрешил bone bindings в этой обёртке. Его заменили ручным AnimationMixer.
- 04Mouse parallax, шум и наклон по скорости создавали дрожание. Их удалили после раздельного логирования позиции и костей.
- 05Внешний HDR возвращал 404. Окружение заменили локальным PMREM и RoomEnvironment.
Как проверяли траекторию
Модель скрыта первые пять секунд, появляется за две, затем 36 секунд уходит от камеры и переходит на орбиту. Safe-zone выталкивает её из центральной композиции. Во время взмаха позиция фиксируется, чтобы контактная панель не дрожала.
Координаты и скорость логировались четыре раза в секунду. Если позиция менялась плавно, источник рывка искали в костях или анимационном клипе. Для слабых мобильных устройств предусмотрен упрощённый вариант без тяжёлой сцены.