Урок 3: 3D для веба и продуктов

Чему вы научитесь

• Проверять любую AI-модель по 7-пунктовому инженерному чек-листу перед выкладкой на сайт или в движок
• Оптимизировать вес GLB-файла (полигонаж, пивот, масштаб в метрах, сжатие Draco/Meshopt) для загрузки быстрее 1 секунды
• Работать со Spline AI и выбирать правильный формат (GLB, FBX, USDZ, OBJ, STL)
• Встраивать интерактивное 3D на страницу через <model-viewer> и Three.js и переносить ассеты в Blender, Unity и Unreal Engine

Почему сырой GLB из генератора — это только заготовка

Новички часто скачивают файл model.glb из нейросети и сразу вставляют его на сайт. Результат разочаровывает: страница грузится 15 секунд на мобильном интернете, модель при автоматическом вращении «улетает» за край экрана, в режиме AR на iPhone кружка оказывается размером с автомобиль, а при повороте к источнику света на задней стенке висит чёрное пятно.

Как подчёркивает производственный гайд World Models Watch: AI 3D Game Assets Guide (август 2026), сгенерированный нейросетью меш — это входное сырьё для пайплайна, а не готовый runtime-ассет. Перед публикацией в вебе или импортом в Unity/Unreal каждую модель необходимо провести через 7-пунктовый инженерный чек-лист.

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

7-пунктовый инженерный чек-лист проверки 3D-модели

Проверяйте каждый скачанный из Hunyuan3D 3.1 Pro, Meshy 6 / 7.1, Tripo H3.1 / P2 или TRELLIS 2 файл по этим семи пунктам:

1. Бюджет полигонов (Polygon Cost)

Сырая генерация часто содержит от 150 000 до 1 500 000 треугольников. Для браузера это критическая нагрузка на видеочип смартфона.

• Мобильный веб и каталог товаров (несколько моделей на экране): строго до 15 000 треугольников (< 15k tris).
• Главный экран сайта (Hero-сцена с одним крупным объектом): 30 000–50 000+ треугольников.
• Как контролировать: задавайте целевой бюджет ещё до генерации (target face count в Hunyuan3D 3.1 Pro, target polycount в Meshy 6 / 7.1, faceLimit от 1 000 до 500 000 в Tripo H3.1) либо уменьшайте сетку модификатором Decimate в Blender.

2. Топология сетки: quad против triangle

• Четырёхугольная сетка (quad topology): обязательна, если объект будет изгибаться при анимации (персонажи, ткань, кабели) или если вы планируете вручную редактировать фаски и UV-швы в Blender. Включается в Meshy 6 / 7.1 (режим Quad) и в Tripo H3.1 / P2 (параметр quad=true, который отдаёт чистый FBX-файл).
• Треугольная сетка (triangle topology): подходит для жёстких статичных предметов (ваза, корпус наушников, камень), которые сразу экспортируются в GLB для веба.

3. Герметичность и отсутствие мусора в геометрии

Покрутите модель в режиме сетки (Wireframe). Убедитесь, что:

• В воздухе вокруг модели не висят мелкие оторванные полигоны (floating geometry) — остатки плохо удалённого фона.
• На дне и задней стенке нет сквозных дыр (модель должна быть watertight, особенно если используется в AR или 3D-печати).

4. Честные PBR-карты вместо «запечённых» бликов

Отключите освещение во вьювере и посмотрите только на карту базового цвета (Albedo / Base Color):

• Плохо: на текстуре нарисованы белые блики и глубокие чёрные тени от студийных софтбоксов с исходного фото. Когда вы поставите такую модель в <model-viewer> со своим светом, блики не будут двигаться при вращении.
• Хорошо: Albedo содержит только чистый цвет материала, а за блеск и рельеф отвечают отдельные карты Roughness (шероховатость), Metallic (металличность) и Normal (микрорельеф). Именно поэтому в Hunyuan3D 3.1 Pro важно включать генерацию полноценных PBR-карт и подавать на вход референс с ровным диффузным светом.

5. Точка опоры (Pivot Point / Origin)

Точка пивота (Origin) — это центр координат (0, 0, 0) внутри модели, вокруг которого она вращается и масштабируется.

• Генераторы часто оставляют пивот в случайной точке пространства или в центре тяжести сбоку. Из-за этого на сайте при включённом auto-rotate объект описывает странные круги и выпадает из рамки.
• Правило: перед экспортом установите Pivot Point строго в центр основания объекта (Bottom Center), чтобы модель стояла ровно на плоскости пола (Y = 0 в glTF/Unity, Z = 0 в Blender/Unreal), и разверните её лицевой стороной к камере.

6. Реальный физический масштаб (Scale в метрах)

В стандарте веба (glTF / GLB), Blender и Unity 1 единица координат равна 1 метру (в Unreal Engine — 1 сантиметру).

• Если настольная лампа после генерации имеет высоту 12.5 единиц, то при нажатии кнопки «Посмотреть в комнате (AR)» на iPhone покупатель увидит двенадцатиметровую башню.
• Правило: включайте параметр autoSize=true в Tripo H3.1 / P2 при генерации или проверяйте размеры (Dimensions) в Blender (клавиша N → вкладка Item), приводя их к реальным метрам (например, 0.35 m для лампы) с обязательным сбросом трансформаций (Ctrl + A → Scale).

7. Сжатие геометрии и текстур (Draco / Meshopt)

Несжатый файл GLB с 4K-текстурами весит 25–60 МБ. На мобильном 4G он будет загружаться дольше 10 секунд, и пользователь закроет вкладку.

• Сожмите текстуры до разрешения 1024×1024 или 2048×2048 в формате WebP / KTX2.
• Включите геометрическое сжатие Draco или Meshopt (доступно при экспорте glTF в Blender или через утилиту gltf-transform). Вес файла падает в 8–15 раз (до 1,5–3,5 МБ), а загрузка на сайте занимает менее 1 секунды без видимой потери качества.

Spline AI — интерактивный 3D-дизайн прямо в браузере

Если Hunyuan3D 3.1 Pro, Meshy и Tripo — это генераторы отдельных объектов, то Spline — полноценный браузерный 3D-редактор со встроенными AI-функциями, анимацией по событиям и мгновенной публикацией на сайт.

Актуальные тарифы (spline.design/pricing, август 2026): базовый тариф бесплатный; план Hobby — $12/мес при оплате за год, Pro — $25/мес при оплате за год (старый тариф Pro за $9 снят).

Что умеет Spline AI в связке с генераторами

• Импорт и доводка GLB/FBX. Вы можете сгенерировать сложную модель в Hunyuan3D 3.1 Pro на arckep.ru, перетащить GLB в окно Spline и настроить вокруг неё интерактивную сцену.
• AI Textures и Style Transfer. Выделите объект на сцене, опишите материал текстом (brushed anodized aluminum with subtle wear) — и Spline сгенерирует бесшовную текстуру.
• Интерактивность без единой строчки кода. В панели Events можно привязать вращение модели к движению курсора (Mouse Follow), смену цвета — к клику, а разлёт деталей — к скроллу страницы (ScrollTrigger).
• Нативная интеграция с Webflow и Framer. Сцена публикуется как Live URL или лёгкий скрипт: обновили свет в Spline — изменения мгновенно появились на боевом лендинге без пересборки сайта.

Форматы 3D-файлов: шпаргалка по экспорту

Выбор формата всегда определяется конечной платформой:

Встраивание 3D на сайт: два проверенных подхода

Подход 1: <model-viewer> от Google (за 5 минут без JS-фреймворков)

Веб-компонент <model-viewer> — стандарт для интернет-магазинов и продуктовых лендингов. Он сам рисует мягкую тень, подгружает студийное HDRI-окружение для бликов на PBR-материалах и включает AR-камеру на смартфонах.

Подход 2: Three.js и React Three Fiber (полный программный контроль)

Когда модель должна стать частью сложной сцены с кастомными шейдерами, пост-обработкой (Bloom, Depth of Field) или игровой физикой, используют библиотеку Three.js (вместе с DRACOLoader для распаковки сжатых GLB):

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

const scene = new THREE.Scene();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.7/');

const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);

loader.load('/models/lamp-compressed.glb', (gltf) => {
  scene.add(gltf.scene);
});

Быстрая подготовка AI-модели в Blender, Unity и Unreal Engine

1. Импортируйте модель в Blender и проверьте габариты. Откройте Blender (File → Import → glTF 2.0 или FBX). Нажмите N и во вкладке Item → Dimensions проверьте размер в метрах. Приведите высоту объекта к реальной и нажмите Ctrl + A → Scale.

2. Поставьте пивот в центр основания. Выделите модель, переключитесь в Edit Mode (Tab), поднимите сетку так, чтобы её дно стояло ровно на сетке пола (Z = 0), и в объектном режиме выполните Object → Set Origin → Origin to 3D Cursor (при курсоре в точке 0, 0, 0).

3. Сожмите полигоны и экспортируйте с Draco. Если треугольников больше 15 000 для мобильного веба, добавьте модификатор Decimate (Ratio 0.1–0.3). При экспорте File → Export → glTF 2.0 (.glb) раскройте вкладку Compression и поставьте галочку Compress (Draco).

4. Учитывайте разницу единиц при переносе в игровые движки. Для Unity стандартная единица равна 1 метру, а для Unreal Engine — 1 сантиметру (при импорте FBX включите Import Materials и убедитесь, что опция Convert Scene Unit активна).