Liquid Object
将三维模型、SVG 或图片浸入一层隐形液体后方。移动指针,让水流拖动形体并将光线分解为颜色。
演示
用指针扫过物体搅动流体,拖动以环绕观察;打开参数面板,即可通过网址或本地文件换成自己的模型、SVG 或图片。
安装
本地演示保留原有效果,背景替换为 LeiBox 选定的画面。
查看原作者 ↗代码
源码与许可说明请查看原作者页面。
查看原作者 ↗API 参考
| 属性 | 类型 | 默认值 |
|---|---|---|
src要显示的素材 URL:GLB/glTF、SVG、PNG、JPEG、WebP 或 GIF;也支持文件输入生成的 Object URL。根据字节内容识别格式,而非扩展名。 | string | |
distortion液体流动时拖拽物体的距离。 | number | 2 |
aberration光标周围柔和范围内的彩色镜头边缘强度。 | number | 0.75 |
grain动态胶片颗粒量;全画面较轻,光标镜头内最强。 | number | 1 |
sheen运动液体反射闪光的亮度。 | number | 1.6 |
cursorSize光标扰动区域的大小。 | number | 1 |
cursorForce光标推动液体的力度。 | number | 1 |
persistence光标停止后涟漪继续流动的时长。 | number | 0.6 |
swirl流动卷成旋涡与涡流的程度。 | number | 0.5 |
iridescence液体流动处彩虹光泽的强度。 | number | 1.5 |
splash点击或轻触画布时液体爆发的强度,0 关闭。 | number | 1.2 |
ambient光标离开时使表面保持活力的缓慢漂移量。 | number | 1 |
wobble物体响应光标时,像果冻般倾斜弹动的程度。 | number | 0 |
gloss拉伸二维素材的表面质感,从哑光到镜面;模型保留自身材质。 | number | 0.65 |
metallic素材的金属质感,0 保留原材质外观,1 变为抛光金属。 | number | 0.15 |
tint与素材颜色相乘的着色;空字符串保留原色。 | string | |
depth二维素材(SVG 或图片)的拉伸深度,相对于其最长边。 | number | 0.05 |
bevel拉伸二维素材的边缘圆润程度(0 至 1);较高值使边缘呈液态唇口。 | number | 0.5 |
highlight工作室环境中环形灯的强调色。 | string | #ffffff |
environmentIntensity工作室环境光亮度。 | number | 1 |
brightness输出亮度,1 为中性值。 | number | 1 |
saturation输出色彩饱和度,0 为灰度,1 为中性值。 | number | 1.2 |
background物体后方的背景色,空字符串保持画布透明。 | string | |
scale素材最长边的大小,单位为场景单位;摄像机距离约为 4 个单位。 | number | 3 |
xOffset素材的水平偏移,单位为场景单位。 | number | 0 |
yOffset素材的垂直偏移,单位为场景单位。 | number | -0.2 |
floatIntensity上下漂浮动画的强度(0 关闭)。 | number | 1 |
rotationIntensity闲置摇摆旋转的强度(0 关闭)。 | number | 0.5 |
floatSpeed漂浮与摇摆动画的速度。 | number | 1.5 |
orbit允许用户拖动以环绕观察物体。 | boolean | true |
zoom允许用户使用滚轮或双指手势缩放。 | boolean | false |
autoRotate让摄像机以转台方式环绕素材。 | boolean | false |
autoRotateSpeedautoRotate 开启时的转台速度。 | number | 2 |
fov相机视场角,单位为度。 | number | 60 |
cameraDistance摄像机与素材中心的距离。 | number | 4 |
dracoDecoderPathDraco 解码器的基础网址,仅在模型需要时加载。 | string | https://www.gstatic.com/draco/versioned/decoders/1.5.7/ |
onLoad素材加载完成后调用。 | (() => void) | null | |
onError素材加载失败时调用。 | ((error: unknown) => void) | null |