爬虫xpath使用方法（BabylonJS入门之详解工作流三）

再做一个新的场景

目录

1. 添加Skybox
2. 把你的工作存起来吧
3. 加载一个3D模型
4. 验证迄今为止的工作。

为了使大型项目中的场景管理模式更加清晰，制作第二个场景也是有意义的，我们还可以介绍一些简单的编辑器功能。

这次我们将从一个全新的场景开始。

选择 'Yes'

编辑器现在处于完全空白状态，如下所示：

让我们加些东西。由于我们处于完全的“空白状态”，所以覆盖地面和天空可能是有用的，因为许多场景都使用这一点。

添加Skybox

如果事先查看默认场景，您可能会注意到skybox是一种特殊的材质，使用的文件扩展名为.dds。材质类型基于基于物理的渲染（PBR），这是BabylonJS非常酷和强大的特性。整个范围不在本编辑器和工作流教程的范围内，但是您也可以在此处看到底层材料PBR材料类型的演示。

https://www.babylonjs.com/demos/pbrglossy/

你看到头盔上所有的反射和材料，以及增加的真实感吗？这就是PBR的力量。除了那个花哨的头盔网，基于物理的建模对Skybox来说是很棒的。

我不会详细介绍如何生成这个文件，但是简短的版本是，你需要一个skybox，然后你需要一种方法将这个skybox转换成.dds格式以供BabylonJs使用。互联网上有很多Skybox，我在本教程中使用的一个很好的工具是Alex Peterson的Spacescape软件。它基本上是一个非常酷（而且免费）的软件，专门用来制作以太空为主题的天空盒。

你可以在这里下载：http://alexcpeterson.com/spacescape/

如果你想自己尝试，或只是自己做一个天空盒。Spacescape直接导出为.dds格式，因此非常适合测试此工作流。您需要选择此特定工具的模式是：

选择一个名字

1. 单个DDs多维数据集映射（*.DDs）
2. 512是非常好的演示，1024看起来更好！为了更好的性能，用512就可以了。
3. 选择source。

---

我的建议是：避免使用高分辨率的纹理输出。原始的skybox是一个大文件，我们只是介绍工作流程。优化此资源（例如转换为.env文件）超出了本教程的范围。

---

现在我们需要把它启动并运行。在新场景中，拖动文件（我的是空间.dds)进入“纹理查看器”选项卡。当它出现在列表中时，您需要将纹理“Coordinates Mode”更改为SKYBOX_MODE

现在您将在编辑器中看到您的天空盒投影到球体上。它应该是无缝的。

现在我们要把这个纹理放到一个材质上。我们将转到“Materials Viewer”（材质查看器）并单击 ADD(添加)。。。位于选项卡名称下的按钮。

执行此操作时，将弹出一个窗口，并确保选择PBRMaterial。

当你有了材质，改变一些属性。单击新材质，此时将打开“Inspector”(检查器)窗口。

• 将材质重命名为SpaceBox

• 我们需要关闭背面剔除。

去点选中的钩，这样，可以使材料在立方体内部可见。

• 指定实际纹理！

只需在inspector的Reflection菜单的Reflection Texture属性中添加的.dds文件。

现在，就像使用纹理查看器一样，您应该可以在材质查看器中看到显示正确纹理的球体。

祝贺你。这基本上就是在编辑器中制作材质的过程。

1. 导入纹理
2. 添加材质
3. 同时配置两者；尤其是为材质指定正确的纹理。

我们的天盒子几乎做完了。我们需要在场景中添加一个新的立方体。在顶部菜单中单击 添加，当弹出菜单出现时，选择“Cube Mesh”(立方体网格)。

此时，您应该会在场景中看到一个小的灰色立方体，并在“Materials Viewer(材质查看器)”中看到两个材质。名为default material的材质被添加到立方体旁边。

下一步，我们需要把这个立方体做得更大以容纳场景。在cube的“inspector”窗口中，查看“Properties 属性”选项卡。在里面你想把缩放比例改成大的，比如500x500x500。

在这一点上，你将有一个大的灰色立方体围绕着你。我们需要采取一些额外的措施让它看起来像一个空盒子。在“Graph”选项卡或“Preview”选项卡中选择cube box。现在在它的inspector中：

1. 为它一个合理的名字。我把我的名字命名为:SkyboxSpacescape
2. 将SpaceBox材质指定给立方体。

现在你应该看到你周围的天空之盒！运行游戏预览标签，看看！看起来不错！

把你的工作存起来吧

我们有一个只有一个skybox的简单场景，现在是保存这个场景的好时机。和以前一样，将它保存到自己的文件夹中，editorprojects的文件夹下，命名为：Space-Scene。到目前为止，您的整个项目目录结构（可能）如下所示：

当您添加更多的项目时，它们会像这样在编辑器项目目录中归档。您只需双击scene.editorprojet 这里的图标就可以在场景之间来回切换。

---

特别注意：每次保存，建议使用“Save Project As...”另存为,如果覆盖掉以前的成果，哭都来不及。

---

加载一个3D模型

因为我们的第二个场景实际上只是一个skybox，所以我认为在我们开始进入与在您计划发布的web项目上下文中管理场景相关的工作流之前，在场景中再添加一个3D模型可能是个好主意。

在Babylon官网已经提供了一些非常好的3d模型，下载下来，就可以进行实验。由于本教程更多的是关于工作流，而不是关于制作您自己的3d模型，因此我们可以随便下载个别人做好的3d模型来学习。

Babylon支持的3D模型常见的格式，如gltf,obj,stl.等等，想要了解详细的，请参阅：

https://doc.babylonjs.com/how_to/load_from_any_file_type

官模型示例：https://doc.babylonjs.com/resources/meshes_to_load （可以下载模型，及程序源码）

此外，如果您会建模软件，如Blender、3ds Max、Cheetah 3d等等，那么可能有一个导出器可以让您轻松地创建网格。在BabylonJS文档的参考资料部分有很多关于这个的文章。

为了顺利能完成这个教程，我们提供了一个现成的3d模型下载：

Dude.babylon

• Mesh: https://www.babylonjs-playground.com/scenes/Dude/Dude.babylon
• Asset: https://www.babylonjs-playground.com/scenes/Dude/0.jpg
• Asset: https://www.babylonjs-playground.com/scenes/Dude/1.jpg
• Asset: https://www.babylonjs-playground.com/scenes/Dude/2.jpg
• Asset: https://www.babylonjs-playground.com/scenes/Dude/3.jpg

下载完如下：

困难的部分来了。下载文件和资源后。。将它们全部拖到编辑器中，然后在提示符上单击yes。

我们来看看都发生了什么：

• 在纹理查看器中有更多的纹理！

• 材质查看器有更多的材质

• 在Graph中，有一个新的节点，可能是个多余的摄像机，如果你想，可以删除它。看起来象这样：

• 在Preview中，多了一个网格对象

点击下play，试试看，别忘了保存你们工作。

我们很容易，就用网页显示了一个3D模型

验证迄今为止的工作。

• 打开和关闭两个项目
• 检查你的文件夹结构，应该是这样的

,