Particle Object
将三维模型、SVG 或图片重建为数千粒子。用指针扫过，粒子会散开、旋转，并弹回原形。
webglthree.js3D
演示
用指针扫过粒子，拖动以环绕观察；打开参数面板，即可通过网址或本地文件换成自己的模型、SVG 或图片。
Loading asset…
安装
本地演示保留原有效果，背景替换为 LeiBox 选定的画面。
查看原作者 ↗代码
源码与许可说明请查看原作者页面。
查看原作者 ↗API 参考
| 属性 | 类型 | 默认值 |
|---|---|---|
src素材 URL：GLB/glTF、SVG、PNG、JPEG、WebP 或 GIF；也支持文件输入生成的 Object URL。根据字节内容识别格式，而非扩展名。按需下载解码器以支持 Draco 压缩模型。 | string | |
count重建素材使用的粒子数量。 | number | 14000 |
size模型所在距离处的粒子尺寸，单位为 CSS 像素。 | number | 2.4 |
sizeVariance每个粒子尺寸的随机差异（0 至 1）。 | number | 0.6 |
color覆盖颜色，可使用任意 CSS 颜色；留空保留素材原色。 | string | "" |
radius光标推动场的半径，单位为 CSS 像素。 | number | 110 |
strength光标推开粒子的力度。 | number | 1 |
swirl推动的切向卷曲强度（0 至 2），使粒子环绕光标旋转。 | number | 0.6 |
spring位移粒子弹回原位的速度。 | number | 1 |
damping速度阻尼（0 至 1），较低值使粒子摆动更久。 | number | 0.35 |
drift静止粒子的闲置闪动强度，0 关闭。 | number | 0.6 |
background粒子后方的背景颜色，留空则画布透明。 | string | "" |
scale素材最长边的大小，单位为场景单位；摄像机距离约为 4 个单位。 | number | 3 |
xOffset素材的水平偏移，单位为场景单位。 | number | 0 |
yOffset素材的垂直偏移，单位为场景单位。 | number | 0 |
floatIntensity上下漂浮动画的强度（0 关闭）。 | number | 2 |
rotationIntensity闲置摇摆旋转的强度（0 关闭）。 | number | 1 |
floatSpeed漂浮与摇摆动画的速度。 | number | 2 |
orbit允许用户拖动以环绕观察物体。 | boolean | true |
zoom允许用户使用滚轮或双指手势缩放。 | boolean | false |
autoRotate让摄像机以转台方式环绕素材。 | boolean | false |
autoRotateSpeedautoRotate 开启时的转台速度。 | number | 2 |
fov相机视场角，单位为度。 | number | 65 |
cameraDistance摄像机与素材中心的距离。 | number | 4.2 |
dracoDecoderPathDraco 解码器的基础网址，仅在模型需要时加载。 | string | "https://www.gstatic.com/draco/versioned/decoders/1.5.7/" |
onLoad素材加载完成后调用。 | () => void | |
onError素材加载失败时调用。 | (error: unknown) => void | |
className应用到包装元素的 CSS 类。 | string |