我是如何用Three.js在三维世界建房子的(详细教程)

这篇文章就来讲下实现原理。

代码地址：https://github.com/QuarkGluonPlasma/threejs-exercize

我们先不着急写代码，先来分析下思路。

这样一个房子，其实也是由几个几何体堆起来的：

具体有这么些几何体：

地板就是个平面，用PlaneGeometry（平面几何体）就可以画，贴上个纹理贴图就行。

两个侧面的墙，是一个不规则的形状，这个可以用ExtrudeGeometry（挤压几何体），它支持用画笔画一个2D的路径，然后加厚变成3D的。

同理，后面的墙也很简单，可以是BoxGeometry（立方体）来画，也可以是ExtrudeGeometry（挤压结合体）先画个形状，然后变成3D的。

前面的墙稍微复杂些，它也是不规则的，可以用ExtrudeGeometry（挤压几何体）来画出形状，然后变成3D的，只不过它多了两个洞，需要画两个洞加到形状里面去。

门框、窗框也是形状里扣个洞，用ExtrudeGeometry变成3D的。

那房顶呢？房顶也没什么特殊的，只是立方体旋转一定的角度就行，用BoxGeometry（立方体）就可以画。

接下来，给墙和房顶、地板贴上不同的图，设置好不同的位置，就可以组装成一个房子了。

那么床呢？

Three.js提供了很多的几何体，可以画一些简单的物体，但复杂的物体就很难画出来了，这类物体一般会用专业的3D建模软件来画，导出FPX或者OBJ格式的文件由Three.js加载并渲染出来。

我们在网上找一个床的3D模型，我找了一个FBX格式的，然后用Three.js的FBXLoader加载就行。

还剩下一个草地，这个也是一个平面，用PlaneGeometry（平面几何体）画，只不过就是长宽比较大，看不到尽头而已。

看起来还有雾？

没错，确实设置了雾（Fog），Three.js在场景中设置雾的效果，指定颜色和雾的远近范围就行。为了有种模糊的感觉，我就在场景中加入了雾。

全部的物体都画完了，接下来就可以在3D场景中漫游了，通过鼠标和键盘可以改变方向和前后左右移动，这种交互使用FirstPersonControls（第一人称控制器）来实现。

一般我们常用的是OrbitsControls（轨道控制器），它支持围绕物体转动相机，就像卫星一样。但我们这里不是想绕着转，而是想键盘和鼠标控制的前后左右的随意移动。

我们简单小结下：

Three.js是在三维的坐标系中添加各种物体，组装成不同的3D场景。其中简单的物体可以画，复杂的物体会用建模软件画，然后加载到场景中。我们可以用不同的控制器来控制相机移动，达到不同的交互效果，比如轨道控制器、第一人称控制器等。

房子的墙、地板、房顶都可以用BoxGeometry（立方体）、ExtrudeGeometry（挤压几何体）画出来，但是床这种复杂的就不行了，会直接加载模型文件。

通过FistPersonControls（第一人称控制器）来控制交互，就能达到3D游戏的那种感觉。

思路理清了，接下来我们具体写下代码：

先画草地，也就是一个大的平面，贴上草地的贴图。

三维的物体（Mesh）是由几何体（Geometry），加上材质（Material）构成的。我们创建平面几何体（PlaneGeometry），长和宽制定一个很大的值，比如10000，然后加载草地的图片作为纹理（Texture)，构成材质。之后就可以创建出草地了。

纹理贴图要设置两个方向都重复，重复的次数是100次。

然后草地的平面要旋转一下。

加点雾，让天际模糊一些：

分别指定颜色为白色，雾的远近范围为10到1500。

接下来是创建房子，房子由地板、两侧的墙、前面的墙、后面的墙、门框窗框、房顶、床构成，要分别创建每一部分，我们把它们放到单独的Group（分组）里。

创建地板也是平面几何体（PlaneGeometry），贴上木材的图就行，然后设置下位置：

创建侧面的墙，要用ExtrudeGeometry（挤压几何体）来画，也就是先画出一个2D的形状，然后挤压成3D。还要贴上墙的纹理贴图。

两个侧墙只是位置不同，修改下z轴位置就行：

对了，如果对位置拿不准，可以在场景中加个坐标系辅助工具（AxisHelper）。