WebGL three.js学习笔记 使用粒子系统模拟时空隧道
本例的运行结果如图:
时空隧道demo演示
Demo地址:https://nsytsqdtn.github.io/demo/360/360
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>