Типичный программист | IT, программирование, разработка, ИИ
IT и технологии · 30 сентября 2026 г.
Как устроены 3D-рендерер для Figma и сайт Depth
Как устроены 3D-рендерер для Figma и сайт Depth Depth сокращает путь: для примерки 3D-модели в макете не нужно переходить в Blender, экспортировать картинку и возвращать её в Figma. В плагине достаточно загрузить модель, настроить камеру и свет, затем вставить рендер слоем. Three.js управляет сценой. Контроллер отправляет область макета в 3D-сцену как PNG, а рендер возвращает в Figma. При движении камеры Depth упрощает рендер, после остановки возвращает полные тени и чистые края. На сайте живая стартовая сцена не дала нужного качества. Поворот объекта собрали в 240 кадров под управлением мыши, а объём добавили живыми 3D-слоями. Сначала появляется постер, тяжёлые данные загружаются позже. В разборе для Codrops есть путь от прототипа плагина до сайта.