【源码】threejs中，实现粒子效果

w2sfot

于 2024-08-21 10:08:57 发布

阅读量499

点赞数 6

文章标签： javascript threejs 特效粒子

本文链接：https://blog.csdn.net/w2sft/article/details/141385647

版权

在threejs中，想要实现粒子特效，通常使用粒子系统（如THREE.Points）结合动画和物理效果（如使用THREE.Sprite或自定义的粒子形状）。

下面是一个示例，用于创建一个粒子特效：

步骤 1: 初始化场景

首先，创建一个基本的Three.js场景，包括相机和渲染器。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

步骤 2: 创建粒子材质和几何体

使用THREE.PointsMaterial和THREE.Points来创建粒子。

const particleMaterial = new THREE.PointsMaterial({
color: 0xff0000,
size: 0.05
});
const particleCount = 1000;
const positions = [];
const colors = [];
for (let i = 0; i < particleCount; i++) {
positions.push((Math.random() * 2 - 1) * 100);
positions.push((Math.random() * 2 - 1) * 100);
positions.push((Math.random() * 2 - 1) * 100);
colors.push(Math.random());
colors.push(Math.random());
colors.push(Math.random());
}
const particleGeometry = new THREE.BufferGeometry();
particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
particleGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
const particles = new THREE.Points(particleGeometry, particleMaterial);
scene.add(particles);

步骤 3: 添加动画和交互

通过更新粒子的位置来使特效动起来。

function animate() {
requestAnimationFrame(animate);
// 更新粒子位置
const positions = particles.geometry.attributes.position.array;
for (let i = 0; i < positions.length; i += 3) {
positions[i] += (Math.random() - 0.5) * 2;
positions[i + 1] += (Math.random() - 0.5) * 2;
positions[i + 2] += (Math.random() - 0.5) * 2;
}
particles.geometry.attributes.position.needsUpdate = true;
renderer.render(scene, camera);
}
animate();

步骤 4: 相机位置

设置相机的位置，使其能看到粒子效果。