Как устроены 3D-рендерер для Figma и сайт Depth

Depth сокращает путь: для примерки 3D-модели в макете не нужно переходить в Blender, экспортировать картинку и возвращать её в Figma. В плагине достаточно загрузить модель, настроить камеру и свет, затем вставить рендер слоем.

Three.js управляет сценой. Контроллер отправляет область макета в 3D-сцену как PNG, а рендер возвращает в Figma. При движении камеры Depth упрощает рендер, после остановки возвращает полные тени и чистые края.

На сайте живая стартовая сцена не дала нужного качества. Поворот объекта собрали в 240 кадров под управлением мыши, а объём добавили живыми 3D-слоями. Сначала появляется постер, тяжёлые данные загружаются позже. В разборе для Codrops есть путь от прототипа плагина до сайта.