Web3D应用开发在线IDE【中文版】

nunuStudio 是一个Web 3D应用程序的集成开发环境，它提供用于在 3D 世界中创建和编辑对象的工具，支持JavaScript和Python对3D场景进行二次开发。nunuStudio中文版 由 BimAnt 提供。

如果你曾经使用过其他类似的框架（unity、playcanvas、godot 等）或 3D 建模软件（blender、maya、cinema4d 等），那么可能已经熟悉以下一些概念。

一、编辑器布局简介

对象以树结构组织（在下面的红色区域可见），每个对象都有子对象，它们继承父对象的位置、比例和旋转。如果移动父对象，则子对象也随之移动。

可以在对象浏览器中鼠标左键点击来选中对象，当对象被选中后，其属性将显示在下方（蓝色）的面板中。在对象面板中，可以手动更改对象的每个属性（位置、名称、颜色等）。

窗口左侧用于选择工具和向场景添加对象，工具用于使用鼠标更改对象属性，有以下工具可用：

• 选择工具，用鼠标左键选择对象，然后双击也可以选择对象（即使选择工具未激活）
• 旋转工具，用于旋转物体
• 移动工具，用于移动物体
• 调整大小工具，用于调整对象大小

在工具选择下方，有对象添加区域，可以在其中选择对象并将其添加到当前在对象资源管理器中选择的场景中。将鼠标拖到每个选项上时，会出现一个新框，显示每个可用类别的对象。

资源浏览器区域（绿色），用于管理所有可用资源（图像、视频、字体等），将新资源导入项目（单击导入菜单或简单地将它们拖入资源浏览器）甚至将资源从项目导出到主机系统。

2、在场景中导航

鼠标用于在场景编辑器中移动摄像机。有两种可用的导航模式，默认情况下启用自由导航模式。

• 要旋转相机，请按鼠标左键并四处移动鼠标（相机的移动方式类似于 FPS 游戏中的相机移动方式）。
• 要移动相机，请按鼠标右键并移动鼠标
• 要垂直移动，请按鼠标中键并上下移动鼠标
• 要拉近相机，请使用鼠标滚轮，或者如果你使用的是触控板，请用手指捏合。

3、添加对象

要将你的第一个对象添加到场景中（让我们以球体为例）将鼠标移动到左侧栏中的第 5 个图标，然后使用鼠标左键选择球体图标。

现在使用选择工具选择添加的对象，然后选择移动工具并尝试移动添加的对象。

4、编辑对象

将对象添加到编辑器后，我们可以更改其属性，nunuStudio 中的所有对象都有名称、位置、旋转和比例。

要选择一个对象，你可以选择右侧栏中的选择工具，然后单击场景编辑器区域中对象的顶部，或者也可以单击对象资源管理器中的对象。

选择对象后，在左下角有一个可以更改的属性列表。不同类型的对象将具有不同的属性。

5、资产管理

对象可以附加资产，资产可以是图像、视频、纹理、动画等。在屏幕底部，我们有资产浏览器，可用于管理我们项目中的资产。

在资产浏览器上还有一个菜单，用于创建外部资源并将其导入项目。资产也可以在运行时从外部源导入，我们将在接下来的教程中看到。

6、运行程序

要测试程序，请按顶部栏上的运行按钮，或按 F5 键，要停止程序，请按停止按钮或再次按 F5。

---

原文链接：Web 3D集成开发环境 - BimAnt