babylonjs 设置面板位置_BabylonJS入门之详解工作流一-CSDN博客

本文链接：https://blog.csdn.net/weixin_39917437/article/details/111674910

创建第一个场景

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

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

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

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

我们的目标是：

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

源码可以在GitHub上找到：https://github.com/simiancraft/BabylonJs-Editor-Workflow-Boilerplate

创建第一个场景

通过上篇，大家大概了解编辑器，下载的官方地址上篇文章中提供了，国内的下载地址，在评论区里有。打开你的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格式的文件，它是编辑器的项目配置信息，比如：材质清单，不只是场景中的内容，还有引入项目的所有内容，象文件列表，全局的编辑器配置和工具当前的状态(工具是打开的还是什么其它属性，当前是什么主题等)当你使用编辑器改变一些东西的时候，就是记录在这个文件里。