3D-конфигуратор кольца — записка для разработчиков

Коротко: это обычная статика на чистом Three.js. Платные плагины не нужны, бэкенд не нужен, SaaS не нужен. Всё считается в браузере (WebGL).

Живое демо (работает на обычном хостинге — то, что вы сейчас открыли):
https://3d.crystalit-crm.com

1. Стек и лицензии

Что	Зачем	Лицензия
three	3D-движок (WebGL)	MIT (бесплатно)
three-mesh-bvh	ускорение трассировки лучей в камне	MIT (бесплатно)
vite	сборщик (только на этапе build)	MIT, в прод не попадает

Рантайм-зависимостей две, обе MIT. Никаких Threekit / Expivi / Sketchfab-embed / коммерческих расширений Three.js. «Платные плагины» — это про готовые SaaS-конфигураторы; мы их не используем, у нас чистый open-source Three.js.

2. Что получается после сборки

npm install
npm run build      # → папка dist/

dist/ — статика, кладётся на любой хостинг:

dist/
├── index.html                 ~2 КБ
├── assets/index-*.js          ~700 КБ (177 КБ gzip) — весь код + Three.js + BVH
├── models/*.glb               3D-модели (статические файлы)
└── hdri/*.hdr                 карты окружения (статические файлы)

Сервер не нужен — отдаются обычные файлы. Хостинг: ваш сайт / S3 / CDN / nginx / GitHub Pages — что угодно.

3. Как встроить в сайт (3 способа)

A. iframe — самый простой, нулевая связанность (рекомендуется для старта):

<iframe src="https://<хост>/ring/" style="width:100%;height:640px;border:0" loading="lazy"></iframe>

Вам не нужно лезть в свой код — просто вставить тег.

B. Встраивание в <div> — подключить бандл и смонтировать в элемент страницы (когда нужна тесная интеграция с вашим UI/корзиной). Тот же статический бандл.

C. Папкой — положить dist/ в раздел вашего сайта, открыть ссылкой.

4. Требования у клиента

Любой современный браузер с WebGL (есть на всех смартфонах/десктопах с ~2017 г.). Ничего ставить не надо.

5. Производительность (если зайдёт речь о весе)

Геометрию моделей жмём Draco / meshopt (встроено в Three.js, бесплатно) — вес падает в разы.
Модели/HDRI — ленивая загрузка + CDN-кэш.
Уровни качества камня (LOW/MEDIUM/HIGH) уже переключаются.

6. Что мы НЕ используем (на случай возражений)

Нет: платных плагинов Three.js, Threekit/Expivi/иных SaaS, серверного рендера, лицензионных движков. Только бесплатный Three.js + статический хостинг.

Вопросы по встраиванию — на нашей стороне. Готовы отдать собранный dist/ или поднять на поддомене.