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

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

• Работать со Spline AI для создания 3D прямо в браузере
• Различать форматы 3D-файлов и выбирать нужный
• Встраивать 3D-модели на сайт двумя способами
• Импортировать AI-модели в Blender, Unity и Unreal Engine

Spline AI — 3D-дизайн в браузере

Spline — онлайн-редактор 3D, который работает полностью в браузере. Это не генератор (как Hunyuan3D или Meshy), а полноценный редактор с AI-функциями. Вы контролируете каждый аспект сцены, а AI помогает создавать объекты и текстуры.

Цена: бесплатный тариф (без ограничений по проектам). Pro от $9/мес.

Что умеет Spline AI

Text-to-3D. Описываете объект — Spline генерирует четыре варианта, уже оптимизированных для веба. Пример промпта: “minimalist desk lamp, white ceramic, soft curves”.

Image-to-3D. Загружаете фронтальное фото — Spline создаёт 3D-объект с учётом формы и материала.

AI Textures. Выделяете объект, описываете текстуру (“brushed aluminum with slight scratches”) — Spline генерирует и накладывает.

Интерактивность без кода. Наведение — объект поворачивается. Клик — меняется цвет. Скролл — анимация. Всё настраивается визуально через панель Events.

Live URL. Обновили сцену в Spline — изменения появляются на сайте без редеплоя. Особенно удобно для лендингов.

Пошаговая инструкция

Шаг 1. Зарегистрируйтесь на spline.design. Бесплатный тариф покрывает большинство задач.

Шаг 2. Создайте новый проект. Вы увидите 3D-холст с базовыми инструментами.

Шаг 3. Для AI-генерации: нажмите Generate (иконка звезды). Введите промпт на английском. Spline предложит 4 варианта — выберите лучший.

Шаг 4. Доработайте результат: измените материалы, добавьте освещение, настройте камеру.

Шаг 5. Добавьте интерактивность через панель Events: hover, click, scroll-триггеры.

Шаг 6. Опубликуйте: Spline даст embed-код для вставки на сайт или прямую ссылку.

Интеграция с Webflow

Spline нативно интегрируется с Webflow — можно перетащить 3D-сцену на страницу с полным контролем анимации по скроллу, клику и наведению. Для дизайнеров, работающих в Webflow, это самый быстрый путь к 3D на сайте.

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

Форматы 3D-файлов

Выбор формата зависит от того, где будет использоваться модель.

GLB (glTF Binary) — стандарт для 3D в вебе. Маленький размер, текстуры встроены в один файл. Поддержка всеми браузерами через model-viewer или Three.js. Называют «JPEG для 3D» — настолько он универсален.

FBX — для игровых движков. Сохраняет анимации, скелет (rigging), материалы. Нативно поддерживается Unity и Unreal Engine. Файлы крупнее, чем GLB.

OBJ — для обмена между редакторами. Простой формат, который понимают все программы. Минус: не хранит анимацию и скелет.

USDZ — для AR на iPhone. Apple Quick Look открывает USDZ прямо в Safari. Покупатель видит товар «в своей комнате» через камеру телефона.

STL — для 3D-печати. Только геометрия, без текстур и цветов — именно то, что нужно принтеру.

Как выбрать формат

Вопрос один: где будет показана модель? Для сайта — GLB. Для Unity/Unreal — FBX. Для обмена — OBJ. Для iPhone AR — USDZ. Для печати — STL.

3D на сайте: два подхода

Подход 1: model-viewer (5 минут)

Компонент <model-viewer> от Google — самый быстрый способ добавить 3D на сайт. Не требует JavaScript. Автоматически поддерживает lazy loading, кэширование и AR-режим на мобильных.

Три строки кода — и на странице интерактивная 3D-модель. Пользователь крутит мышкой, на мобильных — пальцем. Если добавить атрибут ar, на iPhone появится кнопка «Посмотреть в AR».

Подход 2: Three.js (полный контроль)

Three.js — JavaScript-библиотека для сложных 3D-сцен. Больше контроля, но требует программирования. React-разработчики используют обёртку React Three Fiber.

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

const scene = new THREE.Scene();
const loader = new GLTFLoader();

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

Когда нужен Three.js вместо model-viewer: кастомные шейдеры, сложные анимации, взаимодействие между объектами, программная генерация сцен.

Интеграция с Blender

Blender — бесплатный 3D-редактор с открытым кодом. Все AI-сгенерированные модели можно импортировать в Blender для доработки.

Импорт и базовая работа

Шаг 1. Откройте Blender. Скачать: blender.org (бесплатно).

Шаг 2. File — Import — glTF 2.0 для GLB, Wavefront для OBJ.

Шаг 3. Модель на сцене. Типичные действия после импорта:

• Масштабирование (S) — AI-модели часто в произвольном масштабе
• Проверка материалов (Z — Material Preview)
• Исправление артефактов геометрии

Что дорабатывают в Blender

Геометрия — сглаживание поверхностей, исправление дыр. Материалы — замена AI-текстур на свои PBR. Освещение — студийный свет для рендера. Анимация — вращение, движение, трансформации. Рендер — фотореалистичное изображение через Cycles.

Интеграция с Unity и Unreal

Unity

Экспортируйте модель в FBX. Перетащите файл в папку Assets проекта. Unity автоматически импортирует модель с текстурами. Проверьте масштаб: в Unity единица = 1 метр.

Unreal Engine

Экспортируйте в FBX. Content Browser — Import. В Import Options включите Import Materials и Import Textures. Проверьте масштаб: в Unreal единица = 1 сантиметр.

Практическое задание

1. Создайте 3D-объект в Spline AI (промпт: любой предмет интерьера)
2. Экспортируйте его в формате GLB
3. Импортируйте в Blender, настройте освещение и сделайте рендер
4. Бонус: создайте HTML-страницу с <model-viewer> и вставьте свой GLB-файл

Итоги

Spline AI — редактор для создания интерактивного 3D в браузере. GLB — универсальный формат для веба. model-viewer — самый быстрый способ добавить 3D на страницу (3 строки кода). Three.js — когда нужен полный контроль. Blender — бесплатная финализация любой AI-модели. В следующем уроке соберём всё вместе в полном workflow от идеи до рендера.