基于Babylonjs自制WebGL3D模型编辑器 - ljzc002_H5之家

一、总述
　　当代WebGL编程所使用的3D模型大多是从3DsMax模型或Blender模型转化而来，这种工作模式比较适合3D设计师和3D程序员分工配合的场景。但对于单兵作战的WebGL爱好者来讲这种模式过于沉重：且不说转化插件本身存在的各种bug严重降低了转化的成功率，光是为了生成一个简单的模型就需要系统的学习3DsMax或Blender的使用方法就让人感觉得不偿失。
　　基于以上考虑，我计划编写一个基于Babylonjs的简单WebGL模型编辑器，供自己和其他有同样需求的WebGL爱好者使用。编辑器命名为Newland，意为通过自己的努力建立一个更好的世界，现已完成了第一阶段的网格调整和纹理设置功能。测试程序基于MIT协议发布在github上，可以通过访问。
　　因为代码过多，这里主要介绍使用方法和设计思路，完整代码可以在https://github.com/ljzc002/ljzc002.github.io/tree/master/Newland上查看。具体使用或修改代码需要一定的3D编程基础，可以参看我录制的3D编程入门视频教程：、、、，也可以自己寻找渠道了解。

二、界面和基本操作

　　程序基于新版的Chrome浏览器编写和调试，需要设备上具有独立或集成显卡，并且需要用户具有通过浏览器调用显卡的权限。目前测试可以在windows7和Centos7操作系统上运行。

　　程序主界面如下图所示：

　　主界面本身是一个简单的Babylonjs场景，由天空盒与地面网格组成，应用半球形光照（？）。在场景中可以使用“wasd、空格、ctrl”控制视点位置，使用鼠标拖动控制视角；界面上部是十二个快捷菜单，可以通过鼠标单击打开或使用“1”到“=”键打开，打开菜单后可以使用“tab”键上下移动菜单项，“Enter”键选定菜单项或打开下一级菜单，“ESC”键取消选择，“/”键隐藏菜单按钮。

　　“调整”菜单栏下的“按住鼠标”选项可以使鼠标一直保持按下的状态（类似FPS游戏的鼠标控制），但因为运行在浏览器中的JavaScript无权限直接控制鼠标复位到屏幕中心，所以这种控制模式有一定的范围限制。
　　“视角切换”选项可以在“当前载具”的第一人称和第三人称视角之间切换，未来计划设置多种不同载具，不同载具具有不同的默认速度和默认功能，使用者可以在不同载具之间自由切换。
　　“调整速度”选项可以调整视点移动速度、编辑器中网格的调整幅度、鼠标灵敏度等控制参数。
　　“自由浏览”选项可以使视点脱离载具的限制自由移动，这时的移动按键由wasd键改为上下左右键

三、网格调整
　　选择“添加-》新增网格-》正方体”可以在场景中添加一个默认的正方体网格如下图所示：

　　在这里可选物体是可以自由配置的，使用者也可以把自己设计的网格添加进来，配置代码位于mymesh.js文件的309行左右：

arr_choosemesh= 3 [ 4 ["code","BABYLON.MeshBuilder.CreateBox('","',{size:1},scene)"] 5 ,["code","BABYLON.MeshBuilder.CreateSphere('","',{segments:10,diameter:1},scene);"] 6 ,["babylon","", "../MODEL/allbase/", "2017512_8_13_30testscene.babylon"] 7 ,["babylon","Cube", "../MODEL/octocat/", "octocat.babylon"] 8 ,["babylon","Cube", "../MODEL/test3/", "test3.babylon"] 9 ];

　　“code”表示通过执行后面的代码生成网格，“Babylon”表示按后面的参数加载现有的babylon格式模型。

　　网格上的坐标轴指示网格的局部坐标系坐标，也表示这个网格正处于选中状态中。对于选中的网格，点击调整菜单栏下的“调整位置”、“调整姿态”、“调整缩放”可以调整当前选中的网格的位置、姿态、缩放属性，调整时可以直接在对应的属性处输入值，也可以使用脚本即时生成值，也可以使用“上下左右、PgUp、PgDn”键进行属性调整，如下图所示：