在WebGL中创建自己的FPS：2设置您的第一个场景
设置您的第一个场景
现在，我们已经了解了3D的所有术语，我们将有信心踏上舞台上的这一章。不要犹豫，返回上一章，以确保您已准备就绪！来吧，走吧！
在继续学习该课程之前，请务必了解这些类和原型。对自己不确定？再次阅读本课程 ！
搭建工作环境！
需要Apache服务器才能运行WebGL。我建议您在WAMP，MAMP，XAMPP服务器中安装和配置我们的文件。你不知道该怎么做吗？不要惊慌！一切都在这里解释！
尽可能彻底地组织文件很重要。我们的游戏将由图像，用于3D的JavaScript文件以及用于连接部分的CSS，HTML组成。让我们在这里看看我们将如何划分所有这些内容。
HTML / CSS部分
创建一个文件夹：这是您要进行游戏的地方，在其中创建index.html 具有以下结构的文件：
您通常应该理解上面的代码。与经典网页开头相比，唯一真正的新功能是canvas 在开头添加的 脚本文件。
-
画布是我们的游戏将完全以3D呈现的元素。
-
这些脚本调用BabylonJS库以及jQuery PEP，该工具可让您在电话浏览器上使用某些Babylon功能。
我们应用程序的两个基本要素！
创建一个命名的文件夹css ，并在那里你会把你的第一个样式表 mainStyle.css。命名文件后，通过在末尾添加以下行将其链接到我们的索引 <head> ：
在这里用CSS而不是SCSS进行编码，以便每个人都可以理解我们下一步要做什么。
JavaScript部分
首先，我们将创建一个文件夹，该文件夹将命名 三个文件，每个文件用于场景的每个方面：环境，播放器以及一个将调用所有其他文件的文件。我们将分别打电话给他们 ， 和 。目前，这三个文件为空。 jsArena.jsPlayer.jsGame.js
现在index.html ，将以下几行添加 到刚才创建的三个脚本中。在的末尾<body> 和之前 添加这些 <html>。
资产部分
我们将添加最后一个文件，在其中放置游戏所需的所有图形元素：图像，字体...现在，只需使用 和 assets 相同的方式将文件夹添加 到根目录 。在资产中，创建两个新文件夹， 然后 。jscssfontsimages
这是您的树现在应该的样子：
目前，唯一应包含任何内容的文件是file index.html。这是它的外观。
定义画布
画布将允许我们创建3D并将其显示在整个屏幕上。我们从文件中的这一步骤开始， mainStyle.css 以使画布出现在整个屏幕上。
我们确保窗口始终是屏幕的最大尺寸，并防止滚动标签 html 和 body。最后，我们确保它 renderCanvas 占据了整个屏幕。
我们终于准备好动手了！我们的文件已经准备好，服务器正在运行，咖啡已经准备好了……现在由我们来决定！
我们的第一个场景！
从现在开始，我们和WebGL之间没有任何障碍！您要开始制作3D吗？现在该输入第一行了！
Game.js
让我们转到 Game.js游戏的主文件，在这里我们将创建通往玩家和游戏舞台的所有桥梁。首先，是时候定义Game 要与字符串关联的对象 了其中将包含我们的id canvas。除此之外，您还将添加四个必不可少的要素，我们将把它们剥离在一起！
哇！该死的复杂！
这是系统的心脏！在这里，我们定义了允许一切旋转的零件。这就是一切都会发生的地方。不用担心，让我们一起看一下。
-
canvas从画布中检索HTML元素，该元素由中定义的ID指定index.html。 -
engine将基于巴比伦创建一个图形引擎，并为其分配画布。 -
_this在我们课程的循环中对您很有用。
定义所有这些之后，使用初始化场景 _initScene。您将需要通过engine前面定义的它 。
-
scene是我们游戏的场景，在这里一切都会恢复到游戏级别。 -
scene.clearColor将定义应用程序的背景色。后来，我们什至不应该再看到这种背景：它将被我们竞技场的墙所掩盖。它考虑了Color3，它要求红色，绿色和蓝色的值介于0和1之间（0.9、0.9、0.9对应于浅灰色）。
我们这里需要一个Color3而不是Vector3！这两个取3个值，但它们根本不做相同的事情。注意不要混淆它们。
-
向量3：在X，Y，Z中的位置
-
颜色3：R，G，B中的颜色
创建场景并定义天空的颜色后，我们将返回 return 所做的一切。 Game ，从中调用该函数，将使用所有这些信息重新计算每帧在屏幕上看到的内容。
框架对应于机器进行的渲染。当我们以60 fps（每秒帧数）的速度谈论游戏时，这是因为机器设法每秒重新计算3D场景60次
此功能称为… engine.resize ！这是一个本机功能，将根据浏览器窗口的大小调整渲染。没有它，如果您调整窗口的大小，图像将变形。
现在，所有内容都已初始化，我们只需要在文件的最开始处调用Game DOM后即加载游戏中的所有文件之后的函数 。
如前所述，我们发送ID <canvas> 来定位游戏的发布位置。
全部保存并在Web窗口中启动！
页面底部已变黑，并且JavaScript控制台显示“ 未捕获的错误：未定义相机”
一切都很正常！我们实际上尚未定义相机，这意味着巴比伦不知道在哪里看！因此，现在该添加第一台摄像机了。去文件的路上 Player.js ！
Player.js
您会看到，该文件将比该文件小得多 Game.js ，我们在这里几乎不解释语法。这些解释将保留给后续章节！这是您需要输入的内容Player.js ：
与您_initScene 之前使用的方式相同 ，我们在此处使用它 _initCamera。
完成此功能后，您必须返回 Game.js 并Player.js 在之前致电 runRenderLoop。
我没有其他错误了，但是屏幕全黑了……
正常！我们没有物体或光可以照亮一切！在Arena.js 创建所有文件的途中 ！
Arena.js
与我向您很少解释该文件的方式一样 Player.js，我将向您简要解释，Arena.js 因为在本课程的以下部分中将详细介绍 所有内容。这是您需要添加的代码：
在这里，您无需创建一个 _initArena，我们可以实例化多个对象。
与之前一样，Game.js在的调用下方 添加此文件的链接 Player.js。
重新启动页面。
有效！但是Arena和Player中有很多我无法理解的代码...
这是正常现象，我故意回避，以便稍后我可以向您解释我们可以用作某种类型的光源，相机和网格。
恭喜你！您将拥有我们的第一个网格物体和第一个灯光的第一个场景！hou！
使用我们放置的相机，键盘上的方向键可让您在场景中四处移动。您也可以通过单击和拖动鼠标来控制相机的旋转。
现在，你知道 scene， engine 和图像计算功能，它的时间来专注于基本对象！很快见！