LeiBox

Liquid Object

将三维模型、SVG 或图片浸入一层隐形液体后方。移动指针,让水流拖动形体并将光线分解为颜色。

webglthree.js3D

演示

用指针扫过物体搅动流体,拖动以环绕观察;打开参数面板,即可通过网址或本地文件换成自己的模型、SVG 或图片。

Loading asset…

安装

本地演示保留原有效果,背景替换为 LeiBox 选定的画面。

查看原作者 ↗

代码

源码与许可说明请查看原作者页面。

查看原作者 ↗

API 参考

属性类型默认值
src

要显示的素材 URL:GLB/glTF、SVG、PNG、JPEG、WebP 或 GIF;也支持文件输入生成的 Object URL。根据字节内容识别格式,而非扩展名。

string
distortion

液体流动时拖拽物体的距离。

number2
aberration

光标周围柔和范围内的彩色镜头边缘强度。

number0.75
grain

动态胶片颗粒量;全画面较轻,光标镜头内最强。

number1
sheen

运动液体反射闪光的亮度。

number1.6
cursorSize

光标扰动区域的大小。

number1
cursorForce

光标推动液体的力度。

number1
persistence

光标停止后涟漪继续流动的时长。

number0.6
swirl

流动卷成旋涡与涡流的程度。

number0.5
iridescence

液体流动处彩虹光泽的强度。

number1.5
splash

点击或轻触画布时液体爆发的强度,0 关闭。

number1.2
ambient

光标离开时使表面保持活力的缓慢漂移量。

number1
wobble

物体响应光标时,像果冻般倾斜弹动的程度。

number0
gloss

拉伸二维素材的表面质感,从哑光到镜面;模型保留自身材质。

number0.65
metallic

素材的金属质感,0 保留原材质外观,1 变为抛光金属。

number0.15
tint

与素材颜色相乘的着色;空字符串保留原色。

string
depth

二维素材(SVG 或图片)的拉伸深度,相对于其最长边。

number0.05
bevel

拉伸二维素材的边缘圆润程度(0 至 1);较高值使边缘呈液态唇口。

number0.5
highlight

工作室环境中环形灯的强调色。

string#ffffff
environmentIntensity

工作室环境光亮度。

number1
brightness

输出亮度,1 为中性值。

number1
saturation

输出色彩饱和度,0 为灰度,1 为中性值。

number1.2
background

物体后方的背景色,空字符串保持画布透明。

string
scale

素材最长边的大小,单位为场景单位;摄像机距离约为 4 个单位。

number3
xOffset

素材的水平偏移,单位为场景单位。

number0
yOffset

素材的垂直偏移,单位为场景单位。

number-0.2
floatIntensity

上下漂浮动画的强度(0 关闭)。

number1
rotationIntensity

闲置摇摆旋转的强度(0 关闭)。

number0.5
floatSpeed

漂浮与摇摆动画的速度。

number1.5
orbit

允许用户拖动以环绕观察物体。

booleantrue
zoom

允许用户使用滚轮或双指手势缩放。

booleanfalse
autoRotate

让摄像机以转台方式环绕素材。

booleanfalse
autoRotateSpeed

autoRotate 开启时的转台速度。

number2
fov

相机视场角,单位为度。

number60
cameraDistance

摄像机与素材中心的距离。

number4
dracoDecoderPath

Draco 解码器的基础网址,仅在模型需要时加载。

stringhttps://www.gstatic.com/draco/versioned/decoders/1.5.7/
onLoad

素材加载完成后调用。

(() => void) | null
onError

素材加载失败时调用。

((error: unknown) => void) | null
LeiBox

雷师傅的 UI 灵感与组件收藏箱,收集值得留下的界面、交互和设计细节。

© 2026 LeiBox,由 雷师傅

隐私政策

好发现,值得被收藏

发来 UI 参考、组件链接或收藏建议。请附上原始来源,让创作者的付出被看见。

投稿内容经查看后再收录。

联系与投稿

内容类型