Внедрение интерактивных 3D-моделей на сайт становится стандартом для промышленных предприятий, архитектурных бюро и интернет-магазинов сложной техники. Инженеры и конструкторы в России чаще всего работают в системе КОМПАС-3D, однако перенос параметрических CAD-моделей в веб-среду требует понимания полигонального моделирования и форматов обмена данными. В этой статье мы разберем полный цикл: от подготовки твердотельной модели до ее интерактивного отображения на странице с помощью Three.js.
Специфика переноса CAD-моделей в веб
КОМПАС-3D оперирует математически точными твердотельными и поверхностными моделями (B-Rep). Веб-браузеры и библиотека Three.js работают исключительно с полигональными сетками (Mesh), состоящими из вершин, ребер и треугольников. Прямой экспорт из CAD в веб без потерь и оптимизации невозможен: "чистая" CAD-геометрия может содержать миллионы полигонов после триангуляции, что мгновенно "положит" браузер пользователя.
Подготовка модели в КОМПАС-3D
Перед любым экспортом необходимо подготовить сборку или деталь. Этот этап критически важен для производительности итогового веб-приложения.
Удаление скрытых и внутренних элементов. Все детали, которые не видны снаружи (внутренние шестерни, болты внутри корпуса, скрытые полости), необходимо удалить или скрыть. Браузер будет тратить ресурсы на отрисовку невидимых полигонов.
Упрощение фасок и скруглений. Мелкие радиусы и фаски при триангуляции генерируют огромное количество треугольников. По возможности их нужно удалить или укрупнить.
Снижение точности аппроксимации. В настройках КОМПАС-3D можно задать степень сглаживания цилиндрических и сферических поверхностей. Для веб-визуализации достаточно 15-20 градусов отклонения вместо стандартных 1-2 градусов.
Экспорт модели без текстур
Если ваша задача — показать только форму, габариты или кинематику механизма, а материалы будут назначаться программно через код Three.js, достаточно экспортировать "голую" геометрию.
| Формат | Особенности | Применение в Three.js |
|---|---|---|
| STL | Только полигональная сетка, без цветов и иерархии | Быстрый импорт, идеален для 3D-печати и простых форм |
| OBJ | Поддерживает группировку объектов, но без иерархии сборок | Удобно назначать разные материалы на разные группы полигонов |
| STEP / IGES | Точная математическая модель (NURBS) | Не поддерживается Three.js напрямую, требует конвертации |
Пример: Экспорт корпуса редуктора
Инженер удалил все внутренние подшипники и валы, оставив только внешний алюминиевый корпус. Затем в КОМПАС-3D он выбрал "Сохранить как" и указал формат STL. В настройках экспорта он выбрал "Бинарный" формат для меньшего веса файла и задал максимальное отклонение 0.5 мм. Полученный STL-файл весит всего 2 МБ и отлично подходит для загрузки через STLLoader в Three.js.
Экспорт модели с текстурами и материалами
Если необходимо сохранить визуальное оформление (цвет пластика, металличность, шероховатость), стандартных инструментов КОМПАС-3D недостаточно. Система использует собственные физические свойства материалов, которые не транслируются в PBR-текстуры (Physically Based Rendering), понятные веб-движкам.
Для экспорта с цветами и базовыми материалами лучше всего использовать формат VRML (WRL) или OBJ с MTL-файлом. Однако эти форматы устарели и плохо поддерживают современные PBR-карты (металличность, шероховатость, нормалы).
Связка КОМПАС-3D и Blender
Индустриальным стандартом для переноса CAD-моделей в веб является использование Blender в качестве моста (bridge).
Этап первый. Экспорт из КОМПАС-3D в формат STEP или OBJ. STEP сохраняет иерархию сборки и точную геометрию, которую Blender может импортировать через встроенные аддоны или плагин CAD Transform.
Этап второй. Импорт в Blender, назначение PBR-материалов (Principled BSDF), настройка UV-развертки для наложения логотипов или специфических текстур.
Этап третий. Экспорт из Blender в формат glTF (.gltf) или GLB (.glb). GLB — это бинарный контейнер, который упаковывает геометрию, материалы и текстуры в один файл. Это "JPEG для 3D" и самый оптимальный формат для Three.js.
Интеграция на сайт с помощью Three.js
Three.js — мощная JavaScript-библиотека, использующая WebGL для отрисовки 3D-графики в браузере. Для загрузки оптимизированной модели используется класс GLTFLoader.
Базовый алгоритм внедрения:
Создание сцены, камеры и рендерера. Рендерер привязывается к HTML-элементу canvas на странице.
Настройка освещения. Для корректного отображения PBR-материалов из GLB необходимо добавить Environment Map (карту окружения) или комбинацию из направленного (DirectionalLight) и фонового (AmbientLight) света.
Загрузка модели. GLTFLoader асинхронно скачивает GLB-файл, парсит его и добавляет в сцену.
Добавление интерактивности. Подключение OrbitControls позволяет пользователю вращать модель мышью или пальцем на сенсорных экранах, приближать и отдалять камеру.
Пример: Конфигуратор промышленного насоса
На сайте завода размещен 3D-конфигуратор насоса. Пользователь может вращать модель на 360 градусов. При клике на определенные части (двигатель, крыльчатка) Three.js с помощью технологии Raycasting определяет, на какой меш попал курсор, и выводит всплывающую подсказку с техническими характеристиками. Все это работает благодаря тому, что при экспорте из КОМПАС-3D через Blender детали сохранили свои уникальные имена (mesh names).
Оптимизация для веб-среды
Даже после упрощения в КОМПАС-3D, CAD-модели остаются тяжелыми. Перед загрузкой на сервер их необходимо оптимизировать.
Draco-сжатие. Алгоритм от Google, который сжимает геометрию (вершины и нормали) в 10-15 раз без визуальных потерь. Three.js поддерживает распаковку Draco "на лету" через DRACOLoader.
Сжатие текстур. Текстуры в формате PNG или JPEG лучше конвертировать в формат KTX2 или Basis Universal. Они аппаратно ускоряются видеокартой и занимают в разы меньше места в оперативной памяти.
Instancing (Инстансинг). Если в сборке много одинаковых деталей (например, тысячи болтов или зубьев), в Three.js нужно использовать InstancedMesh. Это позволяет отрисовывать тысячи объектов одним вызовом отрисовки (draw call).
Типичные ошибки при экспорте из КОМПАС-3D
Инженеры, впервые сталкивающиеся с веб-визуализацией, часто совершают ряд ошибок, которые сводят на нет все усилия по оптимизации.
Экспорт в STEP для прямого использования на сайте. Браузер не умеет читать NURBS-поверхности. Попытка использовать сторонние JS-библиотеки для триангуляции STEP прямо в браузере приведет к зависанию страницы на несколько минут.
Игнорирование системы координат. В КОМПАС-3D ось Z направлена вверх, а в Three.js (и большинстве веб-движков) ось Y направлена вверх. Если не учесть этот нюанс при экспорте или импорте, модель на сайте будет "лежать на боку". В Blender это решается одной галочкой при настройке импорта/экспорта.
Сохранение сборок как единого тела. Если при экспорте в STL объединить все детали в один меш, вы потеряете возможность кликать на отдельные части модели в Three.js и не сможете анимировать подвижные узлы (например, открытие дверцы или вращение вала).
Размещение на сайте и роль CMS
Внедрение 3D-вьюера требует не только написания JavaScript-кода, но и грамотного управления цифровыми активами. Файлы GLB, карты окружения и текстуры должны быстро отдаваться сервером.
Перенос 3D-моделей из КОМПАС-3D на веб-сайт — это многоступенчатый процесс, требующий понимания как инженерного проектирования, так и особенностей работы браузеров. Прямой экспорт без подготовки приведет к созданию неподъемных файлов, которые невозможно использовать в реальном времени. Ключ к успеху кроется в предварительном упрощении геометрии внутри CAD-системы, использовании Blender в качестве связующего звена для создания PBR-материалов и финальном экспорте в формат GLB. Интеграция через Three.js с применением Draco-сжатия и OrbitControls позволяет создать интерактивный и легкий 3D-вьюер.