使用Three.js构建简单城市模型

写这个东西是因为最近要交图形学的大作业了,元旦赶了几天最后写了出来。其实很多都是参考了@mrdoob之前的工作了,所以更多的来说算是一个学习过程。他们具体的代码可以参见这里,演示的效果可以参见这里。我们项目的地址在这里。设计的大体思路我都介绍了一下,有些地方没有贴代码,可以根据github的源码来看。另外使用three.js一定要注意api的更新!官方文档是你的好朋友。

使用手册

程序功能

本程序是基于WebGL和three.js开发的一款模拟城市的程序。程序提供的功能如下:

  1. 动态生成城市的简单模型,包括街道、楼房和人行道。
  2. 完成图形的渲染,并使得城市具有合理的光照和阴影效果。
  3. 用户可以通过鼠标和键盘,改变视角,包括视角的上下左右移动和旋转。

使用方法

打开程序:双击文件夹中的index.html文件即可打开程序。
城市漫游:本程序以鼠标和键盘为主要的交互方式,用户可以通过点击鼠标或者按键盘来改变看城市的视角。

  1. 鼠标移动:视角旋转;
  2. 鼠标左键:视角向前平移;
  3. 鼠标右键:视角向后平移;
  4. W键:视角向前平移;
  5. S键:视角向后平移;
  6. A键:视角向左平移;
  7. D键:视角向右平移;
  8. R键:视角向上平移;
  9. F键:视角向下平移。

设计思路

本程序目的是完成一个模拟城市的简单程序。程序上大致分为三个部分:three.js基本对象的创建、城市的构建和交互的完成。

three.js基本对象(main.js)

要想通过three.js来渲染想要的场景,就像需要准备一些基本的对象,包括renderer、camera、scene和light。具体的设计如下:

  1. renderer:渲染器,设置为窗口大小,渲染场景。
  2. camera:使用透视相机,调整合适的高度。
  3. scene:创建出城市的场景,加入其他元素或背景。
  4. light:同时使用多种光源,保证城市明亮度的同时,呈现出楼房的阴影效果。

城市的构建(city.js)

程序将城市分为四个部分:地面、街道、人行道和楼房,分别完成每个部分的创建(包括形状和纹理),然后将它们添加到城市的object中,最后将这个object添加到scene中。
因为城市的人行道和楼房都是立方体的,而且存在多次重复构建的过程,所以首先构造了一个城市的基本单元buildingMesh。通过设定buildingMesh的不同形状、大小和纹理,可以得到不同样式的立方体。以buildingMesh为基础,通过对buildingMesh进行修改得到不同样式的人行道和楼房。
在城市构建的过程中,加入了社区的概念。即一个社区有一个方形的人行道(也可以理解为社区的地面),社区内有多个楼房,数量可以通过设定楼房密度进行修改。社区和社区之间有街道隔开,但是对于街道,程序中并没有生成某个3D对象,而是将空出来的地面直接作为街道。
城市的构建每一次的结果都不同。虽然社区的数量和大小是固定的,但是社区内楼房的大小、位置和颜色是通过随机数得到的,所以每一次运行生成的城市都不同。

用户的交互(control.js)

用户可以通过鼠标和键盘进行交互,从而改变看城市的视角的位置。这方面是通过JavaScript的事件流完成的,通过对键盘和鼠标添加监听,对用户的不同操作计算camera的不同的操作,并修改。

实现过程

three.js基本对象

在创建three.js的基本对象的过程中,创建了renderer、camera、scene和light,并调整到合适的大小和位置。除此之外,还做了以下的一些实现:

  1. 城市的光照和阴影。在城市的光源的创建过程中,使用了three.js自带的两个光源:AmbientLight和SpotLight。通过AmbientLight均匀的照亮场景中的所有物体,来增加城市的整体亮度。但是由于AmbientLight没有方向,所以不能实现阴影的效果,所以额外添加了一个SpotLight,通过点光源来实现楼房的阴影效果,并将所有物体的castShadow和receiveShadow设置为true,同时更改renderer和spotLight的设置,使得阴影效果可行。为了显示点光源的位置,程序中额外添加了一个红色的球体,位置与点光源位置相同,可以表示太阳的位置。
// 添加点光源
let spotLight=new THREE.SpotLight(0xffffcc);
spotLight.position.set(200, 150, 0);
spotLight.castShadow=true;
scene.add(spotLight);
// 添加球体
let geometry = new THREE.SphereGeometry( 5, 32, 32 );
let material = new THREE.MeshBasicMaterial( {color: 0xCC0000} );
let sphere = new THREE.Mesh( geometry, material );
sphere.position.set(200, 150, 0);
scene.add(sphere);
// 打开renderer开关
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.PCFSoftShadowMap;
  1. 天空盒。因为最终没有找到合适的天空盒,所以这个并没有在最终的程序中体现出来,但是对此我做了实现。通过texture的load函数可以将图片载入到纹理中,并将纹理设置为scene的background。但是在读取图片过程中会有错,所以需要使用Nginx搭建一个本地服务器在服务器上运行这段代码,或者使用node搭建一个http服务器。最终因为没有合适的天空盒,没有设置scene的背景,直接使用renderer.clearcolor设置天空的颜色。
  2. 城市的雾化效果。在创建scene的过程中,通过添加three.js的FogExp2对象,并设置初始参数,实现城市的雾化效果,使得远方的城市有朦胧的效果。
scene.fog= new THREE.FogExp2( 0xd0e0f0, 0.004 );

城市的创建

城市的构建是分块进行的。首先构造出城市的基本单元cube,然后使用cube搭建出楼房和人行道,并将地面、楼房和人行道加入到城市中,完成城市的构造。

基本单元buildingMesh的创建

城市的基本单元buildingMesh是在一个立方体cube的基础上得到的。所以在得到buildingMesh之前,要先生成一个cube。
为了之后坐标系计算的方便,先通过更改cube的变换矩阵将中心移到了cube的底面中心。

cube.applyMatrix(new THREE.Matrix4().makeTranslation(0,0.5,0));   //将参考点设置在立方体的底部

cube的底面是不可见的,所以为了减少之后计算过程中的工作,删掉了cube的底面。底面是由两个三角形组成的,并不是只是一个方形,所以删除要针对两个三角形分别进行。通过调试输出cube各个三角形的坐标,y轴为0的两个三角形就是底面的三角形,得到对应的序号然后删除。

cube.faces.splice(6, 2);   //去掉立方体的底面
cube.faceVertexUvs[0].splice(6, 2);

在进一步的给楼房添加纹理时,是将纹理添加到cube的每一个面上绘制楼房的窗户的时候,楼房的顶面不要有这个纹理,所以删掉了楼房顶面的纹理。也是通过调试得到顶面顶点对应的坐标然后修改它的UV值。

 cube.faceVertexUvs[0][4][0].set(0, 0);
 cube.faceVertexUvs[0][4][1].set(0, 0);
 cube.faceVertexUvs[0][4][2].set(0, 0);

 cube.faceVertexUvs[0][5][0].set(0, 0);
 cube.faceVertexUvs[0][5][1].set(0, 0);
 cube.faceVertexUvs[0][5][2].set(0, 0);

通过以上操作就得到了cube,然后以它为对象创建城市的基本单元buildingMesh。

let buildingMesh=new THREE.Mesh(cube);

地面的创建

城市的地面时通过three.js的PlaneGeometry形状和MeshLambertMaterial纹理构建出来的,其实只要设定好大小为单位大小和颜色,然后通过scale缩放成为包含所有社区的大小就行。但是在缩放的过程中,ground如果对z轴进行缩放会有一些问题,所以我是将它按照y轴进行缩放,然后旋转得到理想的地面。并将地面加入城市。

let geometry=new THREE.PlaneGeometry(1,1,1);
let material=new THREE.MeshLambertMaterial({color:0x222222});
let ground=new THREE.Mesh(geometry,material);
ground.rotation.x = (-90 * Math.PI) / 180;
ground.scale.x=blockNumX*blockSizeX;
ground.scale.y=blockNumZ*blockSizeZ;
ground.receiveShadow=true;

人行道的创建

一个社区里面有一块方形的人行道。人行道以Geometry为形状,然后通过for循环,针对每一个社区,依次修改buildingMesh的x和z轴的坐标。然后对buildingMesh的x、y、z进行缩放,使得buildingMesh可以满足人行道的大小。将每个楼房加入人行道中,最后将人行道加入城市。

楼房的创建

每一个社区里面有多个楼房。每一栋楼房都是在buildingMesh的基础上创造出来的。通过设定buildingMesh的坐标x和z。然后随机初始化楼房的大小,使得楼房的大小符合一定的分布,并使得x轴和z轴长度在5~15之间,高度通过x轴长度得到。
随机初始化每个面的颜色,并且使得颜色也符合二次分布。针对每个面分别绘制颜色。由于新版的three.js是通过三角形构成面,所以添加颜色时也是向三个顶点添加颜色。
将每栋楼房加入城市楼房群中,通过修改material添加城市楼房群的纹理。
最后将城市楼房群加入城市。

楼房的纹理

楼房和人行道、地面的不同在于它是有窗户的,所以需要为每个楼房生成具有窗户的纹理图像。
先在一个较小的6432的canvas中间进行绘制,针对偶数行,每一行画上窗户,通过随机数使得窗户的颜色在一定范围内变化。
然后创建一个大的1024512的canvas,将原先的小画布上的内容重绘到大的画布上。

致谢

无比感谢丁丁在这个过程中给予的重要的无私的帮助!