没有Unity3d_分享一个webgl微软巴比伦babylon官方实例

前2个星期发现一个不错的3D引擎babylon.js

看到官方的3个例子引擎，刀，海底世界，都很是欢喜

 

babylon有很多的优点：

1.基于WEBGl的3D框架

2.基于javascript，很容易扩展到现有JS框架

3.实例，API充足

看上去一切都很不错，可是多年来还不是主流，而且想象很美好,，现实很骨感

首先，官方的IDE EDITOR很难用（和虚幻4有的一拼，微软做IDE做这么失败还真是头一次见，感觉不是亲儿子）

再者，官方的工具集很多基于WEB（顶层设计不错，云服务，资源共享很定是一大优势，JS资源也一大把，可就是肯定不如PC编辑器这么方便）

唯一的解释是：任谁都想做底层，而不屑于做工具，做编辑器，做可视化吧，包括经历了很多不如意的现在的我

说多了，

下面，我们还是说说这个引擎不流行的原因并解决这些入门问题吧，

主要可能是实例一开始太难获取了，因为基于JS的框架，顶层设计是各种ASYNC LOAD，只要其中一个环节出错，直接卡死，或运行不下去

我们的官方例子很简单（前提是你需要一点点3D引擎知识）：显示一把3D匕首

babylon显示一个3D对象大概流程如下：

材质 （1）-> NodeMaterialEditor （2）-> Mesh （3）-> Scene.Render() -> html -> 浏览器

主要问题出在（1） 和 （2）, 2个都容易出错，因为对于云服务来说，既没有分布式也没有做镜像，所以材质和显示的规则(NodeMaterialEditor）我们都无法获取的情况下，整个产品真的就基于一个”浮云“，能好用就又鬼了

我们的解决方法也很简单，就是把材质和NODEMAterial下载到本地（服务器）

云加载

promises.push(BABYLON.SceneLoader.AppendAsync("https://models.babylonjs.com/Demos/weaponsDemo/meshes/moltenDagger.glb"));
promises.push(BABYLON.SceneLoader.AppendAsync("https://models.babylonjs.com/Demos/weaponsDemo/meshes/runeSword.glb"));

改为

promises.push(BABYLON.SceneLoader.AppendAsync("./scenes/moltenDagger.glb"));
promises.push(BABYLON.SceneLoader.AppendAsync("./scenes/runeSword.glb"));

加载云JSON（配置文件）

promises.push(daggerHandleMat.loadAsync("https://models.babylonjs.com/Demos/weaponsDemo/shaders/daggerHandleMat.json"));
promises.push(daggerBladeMat.loadAsync("https://models.babylonjs.com/Demos/weaponsDemo/shaders/daggerBladeMat.json"));

改为

promises.push(daggerHandleMat.loadAsync("./scenes/daggerHandleMat.json"));
promises.push(daggerBladeMat.loadAsync("./scenes/daggerBladeMat.json"));

编译后设置

daggerHandleMat.build(false);
daggerHandle.material = daggerHandleMat;

其他什么很多的代码都不重要了，最后截图

完整代码：

https://download.csdn.net/download/avi9111/12450421

【v.0.6】微软系3D引擎BABYLON巴比伦官方实例解析
完成度不高，实例打开方法，sample\ sample_sword\这2个文件随便解压到一个WEB后台，浏览器输入：

这个版本只是提供很简单实例分析和二次开发页面，展示的功能：
-- js的继承结构                                    （缺require引用,缺import插件）
-- Babylon Scene,Canvas，Light                     (基本的babylon框架)
-- NodeMaterial.Build()                            （Shader的实时编译，不确定效率）
-- BABYLON.SceneLoader.AppendAsync                （loader方法的另类）
-- daggerHandleMat.loadAsync                    （Node Material Editor的load json模式）
-- Promise.all(promises).then(function() {      （异步加载回调）
-- scene.executeWhenReady(function() {             (loading)
                engine.hideLoadingUI();
            });
-- PlayAnimation                                (好像除了动画，什么都能PLAY，例如特效等)，封装：../sample/jscomponent/    
-- engine.runRenderLoop(function () {
            if (sceneToRender) {
                sceneToRender.render();
            }
    });
-- 显示FPS
-- GUI

* 以上种种功能，如果你有Javascript和html基础，都能在 nmstudy.html 页面找到实现代码