在过去的两天中，我画了一间带有3.js的3D房屋，然后放了一张床。您可以使用鼠标和键盘来控制运动。有3D游戏的视觉感。
本文涉及实施原则。
代码地址：https：//github.com/quarkgluonplasma/threejs-earcerize
让我们不用担心首先编写代码，让我们先分析下一个想法。
这样的房子实际上是从几何形状中堆积的：
有这样的几何形状：
地板是一架飞机。您可以使用平面测量法（平面几何形状）绘制它，并贴上纹理图。
两侧的壁是不规则的形状。这可以与挤出测定法一起使用。它支持用刷子绘制2D路径，然后增厚至3D。
以同样的方式，后壁也很简单。它可以通过拳击测量法（立方体）或挤出测定法（挤压结合）首先绘制形状，然后变为3D。
前壁稍微复杂一些，也是不规则的。您可以使用挤出测定法来绘制形状，然后成为3D，但还有两个孔。您需要画两个孔，并在形状上添加两个孔。
门框和窗框还屈曲为形状，二次限制计变成3D。
屋顶呢？屋顶上没有什么特别的，但是立方体旋转一定角度。它可以用拳击测量法绘制。
接下来，将不同的图片贴在墙壁，屋顶和地板上，并设置不同的位置以组装房屋。
那床呢？
Trix.js提供了许多可以绘制一些简单对象的几何体，但是很难绘制复杂的对象。这样的对象通常使用专业的3D建模软件来绘制FPX或OBJ格式文件。Three.js已加载和渲染。
我们在网上找到了3D型号的3D型号。我找到了FBX格式，然后将其加载给了Trix.js的FBXLoader。
仍然有一只草，这也是一架飞机。它用平面测定法（平面几何形状）绘制，但相对较长且宽度。
看起来像雾？
没错，确实设置了雾（雾），三个。。
所有对象都完成。接下来，您可以在3D场景中漫游。您可以改变方向并向后，左右移动。这种交互使用FirstPersonControls（第一人称控制器）来实现。
通常，我们经常使用OrbitsControls，它像卫星一样支持将相机旋转在物体周围。但是我们不想转身，而是在键盘和鼠标控制的左右移动。
我们简单地总结：
将三个js添加到三个维度坐标系中，以组装到不同的3D场景中。在它们中，可以绘制简单的对象，将使用建模软件绘制复杂的对象，然后加载到场景中。控制摄像机运动以实现不同的交互作用，例如铁路控制器，第一人组控制器等。
房屋的墙壁，地板和屋顶可以用拳击测量法（立方体），挤压测定法（挤压几何体）绘制，但床很复杂，模型文件将直接加载。
它可以通过FistpersonControls控制3D游戏的感觉，以控制互动。
这个想法很清楚，然后我们专门写下代码：
首先画草，即一架大平面，将草放在草地上。
三维对象（网格）由几何形状组成，加上材料。我们创建一个平面几何（平面测定法），并在长度和宽度上形成较大的价值，例如10,000形成材料。在您可以创建草原之后。
纹理图应在两个方向上重复，重复的数量为100次。
然后旋转草的平面。
添加一些雾使天空变得模糊：
指定的颜色为白色，雾之间的距离为10至1500。
下一步是创建房屋。房屋由地板，两侧的墙壁，前壁，门后壁，门框窗框，屋顶和床组成。我们必须单独创建每个部分。
创建地板也是平面几何形状（平面测量学）。只需贴上木地图，然后设置较低的位置：
要在侧面创建墙壁，请使用挤出测定法来绘制，即首先绘制2D形状，然后挤入3D。还将墙壁的质地粘贴到3D中。
两个侧壁只是不同的位置，Z轴的位置仅是位置：
顺便说一句，如果您不确定该位置，则可以在场景中添加坐标系辅助工具（Axishelper）。
然后是后墙。这种形状更简单，这是一个矩形：
接下来是前壁。除了绘制形状外，还有两个孔：
形状只有两个孔，绘画复杂，其余的纹理，材料和位置是相同的。
门和窗户也被绘制出形状，拉一个孔，然后添加一些厚度为3D：
颜色设置为银色。
门框相同：
下一
屋顶上的六个面条不同。一个用瓷砖放置的贴纸之一，其余的设置为灰色以模拟水泥的效果。在它们的情况下，必须旋转瓷砖的纹理，并将重复的数量设置在两个方向上。
下一个床很简单，因为您不需要自己绘制它，只需加载现有型号即可。这种复杂的模型通常由专业建模软件绘制。
然后将光设置为环境光，即每个方向的光强度相同。
创建相机并使用透视相机，即近距离和远处的透视效果：::
指定的角度为60度，宽度比，从0.1到1000的距离。
创建渲染器并使用requestAnimationFrame渲染帧：
接下来，您需要支持3D场景中的漫游。这无需自己做。Trix.js提供了很多控制器。它具有不同的相互作用效果。其中，有一个第一个组件控制器。这种交互作用控制着前后，左右，通过W，S，A和D键，并通过鼠标控制方向。
我们指定转换方向的速度。看起来更弯曲，运动速度运动，禁止垂直旋转。
然后，必须更新每个帧以查看屏幕，它已经通过了多长时间的时钟，然后更新了控制器。
查看最终效果：
所有代码均已上传到GitHub：
代码地址：https：//github.com/quarkgluonplasma/threejs-earcerize
本文编写了三分之一绘制3D房屋的实施原则。
三。js通过场景管理各种对象，可以在对象之间分组。该对象由两个部分组成：几何和材料。该房屋由多种几何形状组成，例如拳击几何和挤压几何形状（挤出地图）。有不同的纹理纹理，以及位置和旋转角度。
其中，越多的是挤出测定法（挤压几何体）。它在两个维平面中绘制形状，然后“挤压”成三维形式。它也可以屈从于形状。
房子里有一张床。这个复杂的对象更难用三js绘制。通常，这是一个专业的建模软件，例如绘制的搅拌机，然后加载并用三个。
视角的改变实际上是相机位置和方向的变化。Trix.js提供了各种控制器，例如OrbitsControls，FirstPersonControls（第一人称控制器）。
我们希望在此处控制键盘的正面和背面，并且可以通过FirstPersonControls来控制通过鼠标转向的相互作用。
三人JS仍然很有趣。它可以主要用于可视化和业务中的游戏，但是您也可以使用它来做一些有趣的事情。