创建第一个场景

目录

创建第一个场景你的第一次点击设置文件夹网格检查器的小变化检查你的工作额外：拍一部电影保存它吧！

在babylonJS编辑器系统中，最重要的事情之一是可靠和稳定的工作流。本简短指南的目的是帮助任何使用babylonJS编辑器的人，学会并采用推荐的工作流程。

由于篇幅问题，我们将分成五篇文章，来解释babylonJS编辑器的工作流，本文是第一篇。

在接下来的步骤中，我们将创建一个存在多个场景的web上运行的项目。

我们的目标是：

创建一个场景，并演示如何修改和保存该场景。重新打开该场景，进行更改并重新保存。添加另一个场景，并描述管理多个场景的过程。使用编辑器来构建一个web项目，并将其配置为处理我们的场景。能够对场景和web项目进行更改，并维护适当的事件序列。

源码可以在GitHub上找到：

创建第一个场景

通过上篇，大家大概了解编辑器，下载的官方地址上篇文章中提供了，国内的下载地址，在评论区里有。打开你的babylonJS编辑器:

BabylonJS编辑器

你的第一次点击

你应该看到类似上图的东西。这是处于默认状态的编辑器。如果您担心编辑器没有处于默认状态，一个方便的工具是edit菜单中的reset按钮。您可以现在单击，也可以随时将编辑器重置为默认的“vanilla”状态。

你开始之前，我们先将界面风格切换成“Dark Theme”,点击edit菜单中的Dark Theme.即可。这看个人喜好，不过，之后的教程，我们都采用黑色主题

提示：打开调试器，是按“ctrl+alt+I”但有时候会出现一些奇怪的问题，这时候可以试着用上面说的方法，按reset，重置界面，看看问题解没解决。

设置文件夹

下面我们要建立存储项目的文件夹。首先，在你想存放工作的目录，建立一个文件夹，命名为"my-babylonjs-workflow-demo"，建立子文件夹，命名为"editor-projects"

建立好文件来，看起来如下：

网格检查器的小变化

网格检查器在界面中叫"inspector",现在我们要为场景中的物体指定新的材质。我们可以从单击场景中的第一个球体开始，当你点击时，左边会出现变化。inspector下，有三个属性页，“properties”意为属性，"physics"物理，“StandardMaterial”标准材质。现在我们来了解下这是做什么的。

正如你看到的那样，左边inspector下第一个属性页"properties"显示的是刚才点击的那个球体网格的属性，包括指定的材质，位置，旋转，缩放等。在"physics"属性页里，你可以配置点东西，像碰撞之类的。第三个“StandardMaterial”顾名思义，就是更改当前物体所引用的材质属性，注意啊这里一改，其它所以引用这个材质的，都会改变。你可以这样理解，材质，就是编辑概念中的对象，在这里是引用方式，一改，在别的网格如果也引用了这个对象，那么别的网格材质也会变。这和“Materials Viewer”（材质查看器） 中改材质是一样的，我们在后文中，再讨论“Materials Viewer”。

现在，只需单击每个球体，然后将材质更改为某个对象。如果你想做实验的话，你也可以玩其他属性。这是我做完这件事后的场景：

我只是把球的材质换成了“Ground”，所以他们看起来都一样。

检查你的工作

假设我想在决定保存之前快速测试一下这个场景。没问题。只需单击顶部的“play”按钮。

当你这样做时，你会看到一个播放当前场景的窗口。这是play属性页。

你现在可以在没有标签的情况下看到你的场景，以及一些基本信息，比如当前的FPS和游戏窗口的大小。你可以用WASD和鼠标带着相机到处飞。这就是我们认为的场景。

额外：拍一部电影

游戏标签有一个很酷的功能。您可以通过单击出现的“录制”按钮，用相机录制一个简短的场景。

你可以保存我们制作的这个短片。单击“Click Save Record”，这是“Record”按钮旁边出现的一个新选项。

这样你将输出一个很好的质量 .webm 视频，你可以保存在本地。

保存它吧！

到现在为止，我们修改了网格的材质，我们想保存一下我们的工作，我们决定命名为“Rainy-Day”,我们在“eidtor-projects”文件夹下创建一个名字叫做“Rainy-Day”的文件夹。如下图：

现在你需要点 “Project”菜单下的“Save Project As…”

确定你选择刚创建的“Rainy-Day”文件夹，保存完之后，目录结构如下：

在“Rainy-Day”文件夹里，有scene文件夹，还有art与assets.在scene.editorproject文件的上面。

比较特别的有两个文件：

scene.babylon 这是一个json格式的文件，包含场景，网格，摄像机，灯光的信息等，这与资源一起使用，比如贴图，你修改场景的网格物体属性等，其实就是修改这个文件。

scene.editorproject 这也是一个json格式的文件，它是编辑器的项目配置信息，比如：材质清单，不只是场景中的内容，还有引入项目的所有内容，象文件列表，全局的编辑器配置和工具当前的状态（工具是打开的还是什么其它属性，当前是什么主题等）当你使用编辑器改变一些东西的时候，就是记录在这个文件里。