基于基于three.js实现的实现的3D粒子动效实例代码粒子动效实例代码
一、背景一、背景
粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出
固定形态，借由控制器、脚本来控制其整体或单个的运动，模拟出现真实的效果。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);
资源评论
