没有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 页面找到实现代码
 

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读