WebGL three.js学习笔记 使用粒子系统模拟时空隧道
本例的运行结果如图：
时空隧道demo演示
Demo地址：https://nsytsqdtn.github.io/demo/sprite/tunnel
three.js的粒子系统
three.js的粒子系统主要是依靠精灵体来创建的，要实现three.js中的粒子系统创建，一般有两种方式。
第一种是在场景中使用很多歌THREE.Sprite创建单个的精灵，这样创建的每一个精灵体，我们都可以单独对它们进行操作，同时我们也可以用一个THREE.Group把他们放在一起，整合起来一起操作。具有很高的自主性。但同时也是需要大量的性能支持与开发上的不便利性，所以这里我选择了第二种方式。
第二种创建粒子系统是依靠点云的方式，点云就是很多很多点组成的一个东西，点云里面的每一个顶点都可以看做一个粒子，而这个粒子我们就可以使用纹理去对它美化,或者是使用坐标变化来变化出好看的粒子系统，这种创建方式的缺点是不能对每一个粒子单独进行操作，但是相比第一种却给我们提供了更多的方便。
搭建场景
点云的创建方法和普通的几何体差不多，首先需要一个材质THREE.PointsMaterial，可以设置每个粒子的大小size，颜色color，透明transparent等等属性。然后再用THREE.Points(geometry, material)这个方法就可以创建出点云了。
let cloud = new THREE.Points(geom, material);//创建点云如果我们给了Points()，geometry这个参数，这个点云会按照我们定义好的几何体的顶点去创建粒子。
,比如geometry是一个Box，那么这个点云就会有8粒子，分别分布在正方体的8个顶点上。如果我们不用geometry，我们就需要手动给点云创建很多的顶点，包括定义它们的坐标，这里我们也是用一个定义好的几何体去创建粒子。
//创建点云
function createPointCloud(geom,color) {
let material = new THREE.PointsMaterial({
color: color,
size: 3,
transparent: true,
blending: THREE.AdditiveBlending,//混合的模式，可以让很多的粒子的背景得到很好的融合，而不是互相干扰
map: generateSprite()//取得渐变的canvas纹理
});
let cloud = new THREE.Points(geom, material);//创建点云
cloud.sortParticles = true;//可以让所有粒子的Z轴得到正确摆放，不会互相遮挡
return cloud;
}函数形参传过来的geom，我们使用的一个类似于管道的几何体TorusGeometry
TorusGeometry的构造函数如下：
THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
radius：圆环半径
tube：管道半径
radialSegments：径向的分段数
tubularSegments：管的分段数
arc：圆环面的弧度，缺省值为Math.PI * 2
let geom = new THREE.TorusGeometry(
controls.radius, controls.tube,
Math.round(controls.radialSegments),
Math.round(controls.tubularSegments)
);//TorusGeometry几何体，管道状的几何体，里面的参数设置都是菜单面板上面的参数这里的参数主要就是我们要在菜单面板中去更改的值，
controls = new function () {
this.radius = 100;//整个大圆隧道的半径
this.tube = 10;//管道的半径
this.radialSegments = 40;//管道的段数，值越大，创造的物体更精细，也更消耗性能
this.tubularSegments = 200;//整个大圆隧道的段数，值越大，创造的物体更精细，也更消耗性能
this.useParticle = true;//是否使用粒子系统创造几何体
this.rotationSpeed = 0.003;//摄像机的速度
this.color = 0xffffff;//此颜色会与材质中纹理本身的颜色做乘法，最后的结果就是渲染出来的颜色
}如果我们要想创建一个好看的时空隧道还需要它的map属性，去赋给它一个纹理，这样每一个粒子都会比纯色更美观。纹理的话使用图片也是可以的，在这里我选择了制作一个渐变的画布来当做纹理，即generateSprite()这个函数的返回值。
generateSprite函数代码（主要用到的是canvas的绘图函数，js的基础部分）：
function generateSprite() {
let canvas = document.createElement("canvas");
canvas.width = 16;
canvas.height = 16;
let context = canvas.getContext("2d");//得到canvas的绘图上下文
let gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);//颜色渐变图形
gradient.addColorStop(0, 'rgba(255,255,255,1)');//从内向外的第一渐变颜色，设置为白色
gradient.addColorStop(0.2, 'rgba(0,125,125,1)');//从内向外的第二渐变颜色，设置为浅蓝色
gradient.addColorStop(0.5, 'rgba(0,64,0,1)');//从内向外的第三渐变颜色，设置为绿色
gradient.addColorStop(1, 'rgba(0,0,0,0.1)');//最外层的渐变颜色，为背景色
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
let texture = new THREE.Texture(canvas);//将得到的画好的canvas作为纹理图片
texture.needsUpdate = true;//需要设置更新，否则会没有效果
return texture;
}注意texture.needsUpdate = true这句话，否则是渲染不出来的。
到此，我们就可以开始绘制场景
this.draw = function () {
cameraInit = true;//调用此函数后，对摄像机进行一次初始化
if (obj) scene.remove(obj);//如果场景的隧道已经存在，先移除
let geom = new THREE.TorusGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments));//TorusGeometry几何体，管道状的几何体，里面的参数设置都是菜单面板上面的参数
//使用粒子系统渲染几何体
if (controls.useParticle) {
obj = createPointCloud(geom,controls.color);
obj.rotation.x = Math.PI/2;//旋转90度以后，更加方便观测
} else {//使用普通材质系统渲染几何体
obj = createMesh(geom);
obj.rotation.x = Math.PI/2;
}
scene.add(obj);
}场景有了以后，摄像机还是不会动，没有一种在时空隧道的感觉，所以这里想办法让摄像机在这个隧道的中间，沿着这个几何体的形状去移动。
因为管道不看y轴的话，其实还是一个圆形，所以可以使用圆形的参数方程来让摄像机沿着这个函数去运动。让y轴始终不变就可以。
let angle = 0;//初始角度
angle = angle + controls.rotationSpeed;//相机移动的速度
camera.position.set(controls.radius*Math.sin(angle),0,
controls.radius*Math.cos(angle));//让相机按照一个圆形轨迹运动
//可以理解为圆形的参数方程x=rsinα，y=rcosα，即设置相机的x为rsinα，z为rcosα，y轴是一直都为0的。这里的r为整个隧道的半径，α就是当前移动的角度。
虽然这样可以让相机开始移动了，但是相机的目标我们还没有设置，我们需要让相机在移动的过程中，始终看向前方，这样才有一种在时空隧道中漫游的感觉。但是three.js的相机运动轨迹插件似乎在这里不好用，所以就想到了用其他方式实现。
我们既然已经用相机运动的圆的轨迹方程，也能很容易想到相机lookAt的方向其实就是沿着圆运动的切线方向。所以只需要求摄像机运动的当前位置的切线就可以了。
这里用到的是向量的点乘，坐标的点乘公式x1y2+x2y1，如果结果为0，就可以得到这个向量的垂直向量，我们要求的切线肯定就是垂直于半径的。因为我们的y轴一直不变的，所以点乘公式的y我们变为z。我们首先是让相机的位置减去隧道的中心（0，0，0），得到指向中心的向量，也就是半径，然后再用一个向量与它点乘为0，这个向量方向就是垂直于半径的了，也就是切线的方向。
function look(){
let view = new THREE.Vector3(camera.position.x,
camera.position.y,
camera.position.z);//计算当前摄像机位置点到世界中心点的向量
let vertical = (new THREE.Vector3(view.z, 0,
-1.0 * view.x)).normalize();
//两个向量的点积如果为0，则两个向量垂直，公式为x1*y2+x2*y1=0，
//这里的Y轴用Z轴代替。计算出垂直向量以后用normalize（）化成单位向量
camera.lookAt(camera.position.x+vertical.x,0,
camera.position.z+vertical.z);//camera.lookAt的值设置为 刚刚的单位向量加在当前摄像机的位置
//这样就实现了在摄像机在旋转时，一直朝前看。
}最后得到的这个单位向量我们再加上当前相机的位置，就可以设置为相机lookAt的值。
注意我们在每次渲染的时候都要去改变这个值，因为相机的位置一直都在变化的，所以我们要把它封装成一个函数，方便在渲染的时候调用。
其他的，相机，场景的初始化代码：
function initThree() {
//渲染器初始化
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);
document.getElementById("WebGL-output").appendChild(renderer.domElement);//将渲染添加到div中
//初始化摄像机，这里使用透视投影摄像机
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.up.x = 0;//设置摄像机的上方向为哪个方向，这里定义摄像的上方为Y轴正方向
camera.up.y = 1;
camera.up.z = 0;
look();//计算摄像机在当前位置应该对准的目标点，即camera.lookAt的设置
//初始化场景
scene = new THREE.Scene();
}至此，场景基本已经构建完成了。
完整的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sprite Tunnel</title>
<script src="../../import/three.js"></script>
<script src="../../import/stats.js"></script>
<script src="../../import/Setting.js"></script>
<script src="../../import/dat.gui.min.js"></script>
<style type="text/css">
div#WebGL-output {
border: none;
cursor: pointer;
width: 100%;
height: 850px;
background-color: #000000;
}
</style>
</head>
<body onload="Start()">
<div id="WebGL-output"></div>
<script>
let camera, renderer, scene;
let controls;
function initThree() {
//渲染器初始化
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);
document.getElementById("WebGL-output").appendChild(renderer.domElement);//将渲染添加到div中
//初始化摄像机，这里使用透视投影摄像机
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.up.x = 0;//设置摄像机的上方向为哪个方向，这里定义摄像的上方为Y轴正方向
camera.up.y = 1;
camera.up.z = 0;
look();//计算摄像机在当前位置应该对准的目标点，即camera.lookAt的设置
//初始化场景
scene = new THREE.Scene();
}
//计算摄像机在当前位置应该对准的目标点
function look(){
let view = new THREE.Vector3(camera.position.x, camera.position.y, camera.position.z);//计算当前摄像机位置点到世界中心点的向量
let vertical = (new THREE.Vector3(view.z, 0, -1.0 * view.x)).normalize();//两个向量的点积如果为0，则两个向量垂直，公式为x1*y2+x2*y1=0，这里的Y轴用Z轴代替。计算出垂直向量以后用normalize（）化成单位向量
camera.lookAt(camera.position.x+vertical.x,0,camera.position.z+vertical.z);//camera.lookAt的值设置为 刚刚的单位向量加在当前摄像机的位置，这样就实现了在摄像机在旋转时，一直朝前看。
}
//
let obj;
let cameraInit = false;//改动隧道的半径后，需要让摄像机重新初始化，当cameraInit为true时进行初始化，先定义为false
//初始化菜单面板
function initDatGUI() {
//设置菜单中需要的参数
controls = new function () {
this.radius = 100;//整个大圆隧道的半径
this.tube = 10;//管道的半径
this.radialSegments = 40;//管道的段数，值越大，创造的物体更精细，也更消耗性能
this.tubularSegments = 200;//整个大圆隧道的段数，值越大，创造的物体更精细，也更消耗性能
this.useParticle = true;//是否使用粒子系统创造几何体
this.rotationSpeed = 0.003;//摄像机的速度
this.color = 0xffffff;//此颜色会与材质中纹理本身的颜色做乘法，最后的结果就是渲染出来的颜色
//初始化渲染场景中的隧道以及粒子系统的函数
this.draw = function () {
cameraInit = true;//调用此函数后，对摄像机进行一次初始化
if (obj) scene.remove(obj);//如果场景的隧道已经存在，先移除
let geom = new THREE.TorusGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments));//TorusGeometry几何体，管道状的几何体，里面的参数设置都是菜单面板上面的参数
//使用粒子系统渲染几何体
if (controls.useParticle) {
obj = createPointCloud(geom,controls.color);
obj.rotation.x = Math.PI/2;//旋转90度以后，更加方便观测
} else {//使用普通材质系统渲染几何体
obj = createMesh(geom);
obj.rotation.x = Math.PI/2;
}
scene.add(obj);
}
};
let gui = new dat.GUI();
//将刚刚设置的参数添加到菜单中
gui.add(controls, "radius", 50, 200).onChange(controls.draw);
gui.add(controls, "rotationSpeed", 0, 0.02);
gui.add(controls, "tube", 5, 30).onChange(controls.draw);
gui.add(controls, "radialSegments", 20, 100).step(1).onChange(controls.draw);
gui.add(controls, "tubularSegments", 50, 300).step(1).onChange(controls.draw);
gui.addColor(controls, "color").onChange(controls.draw);
gui.add(controls, "useParticle").onChange(controls.draw);
//这里需要先调用一次draw()函数，否则刚开始的时候会没有东西背渲染出来
controls.draw();
}
//精灵贴图的制作，场景的粒子系统的每一个粒子都用这里制作的贴图来模拟
function generateSprite() {
let canvas = document.createElement("canvas");
canvas.width = 16;
canvas.height = 16;
let context = canvas.getContext("2d");//得到canvas的绘图上下文
let gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);//颜色渐变图形
gradient.addColorStop(0, 'rgba(255,255,255,1)');//从内向外的第一渐变颜色，设置为白色
gradient.addColorStop(0.2, 'rgba(0,125,125,1)');//从内向外的第二渐变颜色，设置为浅蓝色
gradient.addColorStop(0.5, 'rgba(0,64,0,1)');//从内向外的第三渐变颜色，设置为绿色
gradient.addColorStop(1, 'rgba(0,0,0,0.1)');//最外层的渐变颜色，为背景色
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
let texture = new THREE.Texture(canvas);//将得到的画好的canvas作为纹理图片
texture.needsUpdate = true;//需要设置更新，否则会没有效果
return texture;
}
//创建点云
function createPointCloud(geom,color) {
let material = new THREE.PointsMaterial({
color: color,
size: 3,
transparent: true,
blending: THREE.AdditiveBlending,//混合的模式，可以让很多的粒子的背景得到很好的融合，而不是互相干扰
map: generateSprite()//取得渐变的canvas纹理
});
let cloud = new THREE.Points(geom, material);//创建点云
cloud.sortParticles = true;//可以让所有粒子的Z轴得到正确摆放，不会互相遮挡
return cloud;
}
//创建普通的管道几何体
function createMesh(geom) {
let material = new THREE.MeshNormalMaterial();
material.side = THREE.DoubleSide;//双边渲染
let mesh = new THREE.Mesh(geom, material);
return mesh;
}
let angle = 0;//初始角度
//渲染函数
function render() {
if(cameraInit){//每次重新渲染场景的时候，重新设置相机的位置与角度
angle = 0;
camera.position.set(controls.radius,0,0);
cameraInit=false;
}
angle = angle + controls.rotationSpeed;//相机移动的速度
camera.position.set(controls.radius*Math.sin(angle),0,controls.radius*Math.cos(angle));//让相机按照一个圆形轨迹运动，可以理解为圆形的参数方程x=rsinα，y=rcosα，
look();
stats.update();
renderer.clear();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
//功能函数
function setting() {
loadFullScreen();
loadAutoScreen(camera, renderer);
loadStats();
}
//运行主函数
function Start() {
initThree();
initDatGUI();
setting();
render();
}
</script>
</body>
</html>