基于three.js实现的3D粒子动效实例代码

基于three.js实现的3D粒子动效实例代码，需要经过以下步骤：

第一步：引入three.js库和实例代码所需的辅助库

<script src="js/three.min.js"></script>
<script src="js/Stats.min.js"></script>
<script src="js/dat.gui.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ParticleSystem.js"></script>

其中，‘js/ParticleSystem.js’文件是我们需要自己编写的，用于生成粒子系统。

第二步：创建场景、相机并添加渲染器

var scene = new THREE.Scene();  //场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  //相机
var renderer = new THREE.WebGLRenderer();  //渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

此时，我们创建了一个空场景、一个透视相机，以及一个WebGL渲染器，并将渲染器添加到页面中。

第三步：创建粒子系统，并添加到场景中

var particleSystem = new ParticleSystem();
scene.add(particleSystem.obj);

在上述代码中，我们创建了一个粒子系统实例，并将其添加到场景中。

第四步：设置相机位置、允许摄像机控制、添加统计信息的显示

camera.position.z = 5;
var controls = new THREE.OrbitControls(camera);
var stats = new Stats();
document.body.appendChild(stats.dom);

在这一步中，我们设置了相机的位置，允许用户通过控制面板进行摄像机控制，并添加了一个用于显示统计信息的组件。

第五步：在渲染函数中进行渲染

function render() {
    stats.update();  //更新统计信息

    requestAnimationFrame(render);
    particleSystem.update();  //更新粒子运动状态

    renderer.render(scene, camera);  //渲染场景和相机
}
render();

渲染函数中，通过调用‘requestAnimationFrame’，使函数不断被执行，从而实现动态渲染。同时，我们调用粒子系统的‘update’方法，将属性值进行更新，来达到粒子的运动效果。

至此，我们已经完成了基于three.js实现的3D粒子动效的实例代码的搭建。

下面，我们通过两个示例来详细讲解：

示例1：三维球体

在场景中，创建一个球体（THREE.SphereGeometry），并将其作为容器，来摆放粒子。

function initGroup() {
    var geometry = new THREE.SphereGeometry(2, 20, 20);
    var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
    var sphere = new THREE.Mesh(geometry, material);
    sphere.position.set(0, 0, 0);
    scene.add(sphere);
    particleSystem.container = sphere;
}

在上述代码中，我们创建了一个球体，并将其添加到场景中，并将球体设置为粒子的容器。

然后，我们需要在粒子系统中添加一些方法，用于修改粒子的运动状态。

ParticleSystem.prototype.update = function() {
    var positions = this.geometry.attributes.position.array;
    var color = this.geometry.attributes.color.array;
    var sizes = this.geometry.attributes.size.array;
    var speed = 0.01;
    var n = 3;
    var time = Date.now() * 0.001;
    var range = 20;
    var a = this.container.position.x;
    var b = this.container.position.y;
    var c = this.container.position.z;

    for (var i = 0; i < positions.length; i += 3) {
        var x = positions[i];
        var y = positions[i + 1];
        var z = positions[i + 2];

        var d = Math.sqrt(Math.pow(a - x, 2) + Math.pow(b - y, 2) + Math.pow(c - z, 2));
        var f = Math.sin(time * n + d * 0.05) * range;

        positions[i] += (a - x) * speed;
        positions[i + 1] += (b - y) * speed;
        positions[i + 2] += (c - z) * speed;

        color[i] = f;
        sizes[i] = (1 + f) * 5;
    }

    this.geometry.attributes.position.needsUpdate = true;
    this.geometry.attributes.color.needsUpdate = true;
    this.geometry.attributes.size.needsUpdate = true;
}

上述代码中，我们通过修改x、y、z轴坐标来实现粒子的运动状态。其中，a、b、c为粒子容器的坐标，speed为粒子运动速度，n为运动频率，time为当前时间，range为运动幅度，d为粒子与容器的距离，f为该粒子的颜色值。

示例2：加载模型

在这个示例中，我们将在粒子系统中加载一个具备模型的网格。

function initGroup() {
    var modelPath = 'model/Ming.vtk';
    var container = new THREE.Object3D();
    container.scale.set(0.05, 0.05, 0.05);
    scene.add(container);

    var loader = new THREE.VTKLoader();
    loader.load(modelPath, function (vtk) {
        var geometry = new THREE.BufferGeometry();
        var vertices = new Float32Array(vtk.vertice);
        var colors = new Float32Array(vtk.colors);
        var sizes = new Float32Array(vtk.sizes);

        geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
        geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
        geometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));
        var material = new THREE.ShaderMaterial({
            uniforms: {
                amplitude: { value: 1.0 },
                color: { value: new THREE.Color(0xffffff) },
                pointTexture: { value: new THREE.TextureLoader().load("textures/disc.png") }
            },
            vertexShader: document.getElementById('vertexshader').textContent,
            fragmentShader: document.getElementById('fragmentshader').textContent,
            alphaTest: 0.9
        });
        var points = new THREE.Points(geometry, material);
        container.add(points);
        particleSystem.container = container;
    });
}

在上述代码中，我们将载入一个模型，通过VTKLoader可以加载vtk格式的模型文件。

由于加载的模型是不规则的，我们在载入完成后对顶点坐标、颜色值、大小值等进行处理，并使用BufferGeometry来缓存处理后的数据。

最后，我们通过ShaderMaterial将点云渲染成为图像，并将其添加到容器中作为粒子的参考容器。

至此，我们已经讲解了完整的“基于three.js实现的3D粒子动效实例代码”的攻略，同时，也讲解了两个具体的示例。