粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器、脚本来控制其整体或单个的运动，模拟出现真实的效果。three.js是用JavaScript编写的WebGL的第三方库，three.js提供了丰富的API帮助我们去实现3D动效，本文主要介绍如何使用three.js实现粒子过渡效果，以及基本的鼠标交互操作。
（注：本文使用的关于three.js的API都是基于版本r98的。）
二、实现步骤
1. 创建渲染场景scene
scene实际上相当于一个三维空间，用于承载和显示我们所定义的一切，包括相机、物体、灯光等。在实际开发时为了方便观察可添加一些辅助工具，比如网格、坐标轴等。
scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x05050c, 10, 60); scene.add( new THREE.GridHelper( 2000, 1 ) ); // 添加网格
2. 添加照相机camera
THREE里面实现了几种相机：PerspectiveCamera（透视相机）、 OrthographicCamera（正交投影相机）、CubeCamera（立方体相机或全景相机）和 StereoCamera（3D相机）。本文介绍我们主要用到的 PerspectiveCamera（透视相机）：
视觉效果是近大远小。
配置参数 PerspectiveCamera（fov, aspect, near, far）。
fov：相机的可视角度。
aspect：相机可视范围的长宽比。
near：相对于深度剪切面的远的距离。
far：相对于深度剪切面的远的距离。
camera = new THREE.PerspectiveCamera(45, window.innerWidth /window.innerHeight, 5, 100); camera.position.set(10, -10, -40); scene.add(camera);
3. 添加场景渲染需要的灯光
three.js里面实现的光源：AmbientLight（环境光）、DirectionalLight（平行光）、HemisphereLight（半球光）、PointLight（点光源）、RectAreaLight（平面光源）、SpotLight（聚光灯）等。配置光源参数时需要注意颜色的叠加效果，如环境光的颜色会直接作用于物体的当前颜色。各种光源的配置参数有些区别，下面是本文案例中会用到的二种光源。
let ambientLight = new THREE.AmbientLight(0x000000, 0.4); scene.add(ambientLight); let pointLight = new THREE.PointLight(0xe42107); pointLight.castShadow = true; pointLight.position.set(-10, -5, -10); pointLight.distance = 20; scene.add(pointLight);
4. 创建、导出并加载模型文件loader
创建模型，可以使用three.js editor进行创建或者用three.js的基础模型生成类进行生成，相对复杂的或者比较特殊的模型需要使用建模工具进行创建（c4d、3dmax等）。
使用three.js editor进行创建，可添加基本几何体，调整几何体的各种参数（位置、颜色、材质等）。
使用模型类生成。
let geometryCube = new THREE.BoxBufferGeometry( 1, 1, 1 ); let materialCube = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); let cubeMesh = new THREE.Mesh( geometryCube, materialCube ); scene.add( cubeMesh );
导出需要的模型文件（此处使用的是 obj格式的模型文件）。
加载并解析模型文件数据。
let onProgress = function (xhr) { if (xhr.lengthComputable) { // 可进行计算得知模型加载进度 } }; let onError = function () {}; particleSystem = new THREE.Group(); var texture = new THREE.TextureLoader().load('./point.png'); new THREE.OBJLoader().load('./model.obj', function (object) { // object 模型文件数据 }, onProgress, onError);
5. 将导入到模型文件转换成粒子系统Points
获取模型的坐标值。
拷贝粒子坐标值到新建属性position1上 ，这个作为粒子过渡效果的最终坐标位置。
给粒子系统添加随机三维坐标值position，目的是把每个粒子位置打乱，设定起始位置。
let color = new THREE.Color('#ffffff'); let material = new THREE.PointsMaterial({ size: 0.2, map: texture, depthTest: false, transparent: true }); particleSystem= new THREE.Group(); let allCount = 0 for (let i = 0; i < object.children.length; i++) { let name = object.children[i].name let _attributes = object.children[i].geometry.attributes let count = _attributes.position.count _attributes.positionEnd = _attributes.position.clone() _attributes.position1 = _attributes.position.clone() for (let i = 0; i < count * 3; i++) { _attributes.position1.array[i]= Math.random() * 100 - 50 } let particles = new THREE.Points(object.children[i].geometry, material) particleSystem.add(particles) allCount += count } particleSystem.applyMatrix(new THREE.Matrix4().makeTranslation(-5, -5,-10));
6. 通过tween动画库实现粒子坐标从position到position1点转换