three.js如何实现长尾词的3D粒子动态效果？

本文共计2198个文字，预计阅读时间需要9分钟。

一、背景+粒子特效模拟现实中的水、火、雾、气等效果，通过多种三维软件开发的制作模块，原理是将无数个单体粒子组合成固定形态，借助控制器、脚本控制整体或单个粒子表现。

一、背景

粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器、脚本来控制其整体或单个的运动，模拟出现真实的效果。three.js是用JavaScript编写的WebGL的第三方库，three.js提供了丰富的API帮助我们去实现3D动效，本文主要介绍如何使用three.js实现粒子过渡效果，以及基本的鼠标交互操作。

（注：本文使用的关于three.js的API都是基于版本r98的。）

二、实现步骤

1. 创建渲染场景scene

scene实际上相当于一个三维空间，用于承载和显示我们所定义的一切，包括相机、物体、灯光等。在实际开发时为了方便观察可添加一些辅助工具，比如网格、坐标轴等。