3D / Visual Tool · In Progress

Device Render Studio

在 Figma 中快速生成一致设备展示画面的渲染工具实验,当前重点验证 Phone 形态、屏幕表现与高分辨率输出。

  • Figma
  • Three.js
  • Rendering
Device Render Studio editorial seed cover,以设备框架和相机焦段刻度表示渲染工具

实验目标

Device Render Studio 是一个在 Figma 中生成设备展示画面的工具实验。我希望把界面稿、设备资产、相机和输出设置放进一条可重复流程,让设计方案不必每次重新搭建展示场景。长期方向会覆盖 Phone、Fold 与 Tablet,目前 Phone 形态更成熟,其余类型仍处于结构验证阶段。

当前进展

设备表现并非直接复制官网资源,而是根据公开 3D 资产的语义重新组织 Three.js 场景,处理模型层级、材质、屏幕和透明背景。相机提供 35 / 50 / 85 / 120 焦段,用于比较不同画面中的透视感;输出目标覆盖 1K / 2K / 4K。屏幕同时探索“设计稿保真”和“真实玻璃”两种模式:前者优先保证 UI 色彩,后者加入反射和材质关系。

我已经处理了透明背景、基础材质、屏幕映射和调试流程中的一批问题,但它仍不是正式商业化产品。当前主要校准屏幕色差、4K 输出性能和材质真实感,也在确认不同设备形态能否共享稳定的控制结构。