Three js实现球缓冲几何体实现粒子特效

最新推荐文章于 2025-04-16 10:20:02 发布

怒视天下

最新推荐文章于 2025-04-16 10:20:02 发布

阅读量887

点赞数

分类专栏： Three JS 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_49491645/article/details/128946813

版权

Three JS 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了Three.js中创建粒子特效的两种方法，包括ParticleSystem和PointsMaterial的使用。通过示例代码，解释了如何配置粒子系统和调整粒子大小来实现不同的视觉效果。还提到了修改粒子形状的方法，如应用图片或canvas绘图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当前Three.js在网上有不少的零碎教程，然而对于初级开发者就像入门迈槛不知先迈左脚还是右脚，于是我就先进去试试水...... 发现还不错，虽然有点云里雾里但是搞懂了内部基础构造还是比较简单的，而Three.js官网上的示例逼格之高又令人望而却步。

首先对于three js场景的配置网上和手册都有详细的教程，在此处我就不一一赘述了。两种方法实现例子特效效果水平，第一种是利用ParticleSystem设置粒子特效效果，另外一种是设置PointsMaterial完成属性的效果展示。

第一种方法的最简单的粒子系统代码：

// 创建球体模型
let ball = new THREE.SphereGeometry(40, 30, 30);
// 创建粒子材料
let pointsMaterial = new THREE.PointsMaterial({
        // 粒子颜色
        color: 0xffffff,
        // 粒子大小
        size: 2
    });
// 创建粒子系统
let particleSystem = new THREE.ParticleSystem(ball, pointsMaterial);
// 加入场景
scene.add(particleSystem);

粒子系统读取模型中的vertices属性，即所有顶点位置，结合粒子材质来创建粒子效果，以上代码效果如下；可以观察到，粒子默认会展示为方块形状，若要修改，可以在构建粒子材质时时传入map属性，应用一张图片或者应用canvas的绘图结果，具体后面会提到。

第二种方法实现例子特效是更改size的大小来实现效果，具体代码如下所示：

const SphereGeometry = new THREE.SphereBufferGeometry(3, 20, 30);
const PointsMaterial = new THREE.PointsMaterial();
PointsMaterial.size = 0.01
const points = new THREE.Points(SphereGeometry, PointsMaterial)
scene.add(points)