这篇文章主要介绍基于Babylonjs自制WebGL3D模型编辑器的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
,一,总述
当代WebGL编程所使用的3 d模型大多是从3 dsmax软件模型或搅拌机模型转化而来,这种工作模式比较适合3 d设计师和3 d程序员分工配合的场景。但对于单兵作战的WebGL爱好者来讲这种模式过于沉重:且不说转化插件本身存在的各种错误严重降低了转化的成功率,光是为了生成一个简单的模型就需要系统的学习3 dsmax软件或搅拌机的使用方法就让人感觉得不偿失。
基于以上考虑,我计划编写一个基于Babylonjs的简单WebGL模型编辑器,供自己和其他有同样需求的WebGL爱好者使用。编辑器命名为纽兰,意为通过自己的努力建立一个更好的世界,现已完成了第一阶段的网格调整和纹理设置功能。测试程序基于麻省理工学院协议发布在github上,可以通过http://ljzc002.github.io/Newland/HTML/index_newland。html访问。
因为代码过多,这里主要介绍使用方法和设计思路,完整代码可以在https://github.com/ljzc002/ljzc002.github.io/tree/master/Newland上查看。具体使用或修改代码需要一定的3 d编程基础,可以参看我录制的3 d编程入门视频教程:http://www.bilibili.com/video/av8248516/, http://www.bilibili.com/video/av8834942/, http://www.bilibili.com/video/av9234256/, http://www.bilibili.com/video/av9546734/,也可以自己寻找渠道了解。
二界面和基本操作
程序基于新版的Chrome浏览器编写和调试,需要设备上具有独立或集成显卡,并且需要用户具有通过浏览器调用显卡的权限。目前测试可以在windows7多和Centos7操作系统上运行。
程序主界面如下图所示:
主界面本身是一个简单的Babylonjs场景,由天空盒与地面网格组成,应用半球形光照(?)。在场景中可以使用“wasd,空格,ctrl”控制视点位置,使用鼠标拖动控制视角;界面上部是十二个快捷菜单,可以通过鼠标单击打开或使用“1”到“=奔蚩?打开菜单后可以使用“选项卡”键上下移动菜单项,“进入”键选定菜单项或打开下一级菜单,“ESC”键取消选择,“/奔夭说グ磁ァ?/p>
"调整“菜单栏下的“按住鼠标”选项可以使鼠标一直保持按下的状态(类似FPS游戏的鼠标控制),但因为运行在浏览器中的JavaScript无权限直接控制鼠标复位到屏幕中心,所以这种控制模式有一定的范围限制。
“视角切换“选项可以在“当前载具”的第一人称和第三人称视角之间切换,未来计划设置多种不同载具,不同载具具有不同的默认速度和默认功能,使用者可以在不同载具之间自由切换。
“调整速度”选项可以调整视点移动速度,编辑器中网格的调整幅度,鼠标灵敏度等控制参数。
“自由浏览”选项可以使视点脱离载具的限制自由移动,这时的移动按键由wasd键改为上下左右键
三、网格调整
选择“添加-》新增网格——》正方体”可以在场景中添加一个默认的正方体网格如下图所示:
在这里可选物体是可以自由配置的,使用者也可以把自己设计的网格添加进来,配置代码位于mymesh。js文件的309行左右：
1 //可以加载的网格的列表2 var 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”键进行属性调整，如下图所示：
