Glass Object
把三维模型、SVG 或图片变成实心玻璃。二维素材会被描摹并挤出为光滑的液态体，光线在其中真实般弯折、色散并形成磨砂。
演示
拖动以环绕观察玻璃，打开参数面板调整折射，或通过网址和本地文件换成自己的模型、SVG 或图片。
安装
本地演示保留原有效果，背景替换为 LeiBox 选定的画面。
查看原作者 ↗代码
源码与许可说明请查看原作者页面。
查看原作者 ↗API 参考
| 属性 | 类型 | 默认值 |
|---|---|---|
src素材 URL：GLB/glTF、SVG、PNG、JPEG、WebP 或 GIF；也支持文件输入产生的 Object URL。根据字节内容识别格式，而非扩展名。SVG 与图片会描摹并拉伸为圆润玻璃板，模型保留自身几何。按需下载解码器以支持 Draco 压缩模型。 | string | |
ior玻璃折射率（1 至 2.33）。 | number | 1.75 |
thickness玻璃体积厚度，单位为场景单位，决定光线弯折的强度。 | number | 4 |
roughness表面粗糙度（0 至 1），值越高玻璃越磨砂。 | number | 0.25 |
dispersion折射的色散程度（0 至 2），像真实玻璃一样把光分成彩虹边缘。 | number | 1.5 |
clearcoat玻璃表面的清漆层强度（0 至 1）。 | number | 0.5 |
tint玻璃体积的着色，可使用任意 CSS 颜色；留空保持透明。 | string | "" |
tintDensity着色吸收穿过体积光线的强度。 | number | 2 |
depth二维素材（SVG 或图片）的拉伸深度，相对于其最长边。 | number | 0.1 |
bevel拉伸二维素材的边缘圆润程度（0 至 1）；较高值使边缘呈液态唇口。 | number | 1 |
highlight工作室环境中环形灯的强调色。 | string | "#066aff" |
environmentIntensity工作室环境光亮度。 | number | 1 |
background玻璃后方的背景颜色。留空则画布透明；不透明颜色会透过折射显示。 | string | "" |
backgroundImage玻璃后方的背景图 URL，以 cover 方式填满视图。玻璃会采样并折射它；留空关闭。 | string | "" |
scale素材最长边的大小，单位为场景单位；摄像机距离约为 4 个单位。 | number | 3 |
xOffset素材的水平偏移，单位为场景单位。 | number | 0 |
yOffset素材的垂直偏移，单位为场景单位。 | number | 0 |
floatIntensity上下漂浮动画的强度（0 关闭）。 | number | 1 |
rotationIntensity闲置摇摆旋转的强度（0 关闭）。 | number | 1 |
floatSpeed漂浮与摇摆动画的速度。 | number | 2 |
orbit允许用户拖动以环绕观察物体。 | boolean | true |
zoom允许用户使用滚轮或双指手势缩放。 | boolean | false |
autoRotate让摄像机以转台方式环绕素材。 | boolean | false |
autoRotateSpeedautoRotate 开启时的转台速度。 | number | 2 |
fov相机视场角，单位为度。 | number | 55 |
cameraDistance摄像机与素材中心的距离。 | number | 4 |
dracoDecoderPathDraco 解码器的基础网址，仅在模型需要时加载。 | string | "https://www.gstatic.com/draco/versioned/decoders/1.5.7/" |
onLoad素材加载完成后调用。 | () => void | |
onError素材加载失败时调用。 | (error: unknown) => void | |
className应用到包装元素的 CSS 类。 | string |