走进BabylonJS

上一篇文章罗列了比较常见的WebGL应用，接下来将对babylonJS进行专项实践。

快速入门

想要快速的了解并使用BabylonJS，在官网上就可以找到答案babylonjs入门，按照上面的示例就可以构造出一个世界了
来自BabylonJS官网

BabylonJS实战

模型准备

想要建造一个空间，要预先准备好需要的模型，官网上有个工具BabylonJS Editor，个人感觉并不好用，保存的文件容易丢，必须要“另存为…”，而且编辑视角也不是很好切换，导入模型位置太大时，想要找到模型就有点费劲了，根本找不到自己在哪……
在这里插入图片描述
但是微软的视频却是使用Blender，不过最终是要.glb/.gltf文件，用3dmax，unity，auto desk都是有插件支持的，不过这些都是付费的，这样看起来Blender比较适合，而且Blender的更新速度很快，免安装，空间小（增长的空间在设置里面“2min自动保存”，要注意控制下就好了），社区、B站都有很多借鉴，简单的入门是非常够的。在这里插入图片描述
不过，想着省事，先用3D Builder操作一下，win10自带的小工具，简单的方块还是很棒的。

但是存在一个问题，那就是在3D Builder合并的模型导出为.glb文件时，并不会将合并的模型关联到一个父节点，当在使用的时候，可能想要移动的是一个小车，但是不得不移动车轮、车架、车厢等多个部件，而且全是自动生成的id，完全无法做到一一对应，虽然3D Builder操作简便，但是不小心给自己挖了一个小坑，最后还是要用Blender或者BabylonJS Editor处理一下（我使用的BabylonJS Editor，不得不说这个工具太恶心了，保存不了，尝试了很久，也就导出的那一份可以用，想再次编辑已经没办法了）。

加载与展示

下一步就是将刚刚做好的模型展示了，两个重要.js文件：
babylon.js
babylonjs.loaders.min.js
下面是主要结构，是不是挺简单的，官网上有直接的代码贴出来：
在这里插入图片描述
接下来就是在画布中创建场景了。

        var createScene = function () {
    
    
            // N建立基本场景
            var scene = new BABYLON.Scene(engine);
            // 创建并放置一个自由相机
            var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
            // 设置相机朝向一个特定的位置
            camera.setTarget(new BABYLON.Vector3(0, 10, -10));
            // 设置相机对移动和旋转的灵敏度
            camera.angularSensibility = 10;
            camera.moveSensibility = 10;
            // 将相机事件绑定到canvas上面
            camera.attachControl(canvas, true);
            // 将相机的目标指向场景的原点
            camera.setTarget(BABYLON.Vector3.Zero());
            // 为相机添加一个基于canvas的控制器
            camera.attachControl(canvas, true);
            // 建立一个光源，指向0,1,0方向——竖直朝上。
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            // 令光源变得稍微昏暗
            light.intensity = .5;
            //加入VR支持
            var vrHelper = scene.createDefaultVRExperience();
            //导入模型
            BABYLON.SceneLoader.ImportMesh("", "../assets/uploads/", "fac.glb", scene, function (meshes, particleSystems, skeletons) {
    
    }
            });
            return scene;
        };

这样就能加载前面做好的模型了，是不是很简单，对于模型的引用，最关键的就是这一句：

BABYLON.SceneLoader.ImportMesh("", “…/assets/uploads/”, “fac.glb”, scene, function (meshes, particleSystems, skeletons) {}
});

当然对于模型文件的加载还有多种方法，不过.cn的这个网站没有内容 网站链接 ，我也是看了别人的文章地址
在这里插入图片描述

效果

下面看看实绩效果 ***示例演示***，模型比较大，网速不好的需要多等一下。
在这里插入图片描述

上一篇：WebGL探索——抉择：实践方向，twgl.js、Filament、Claygl、BabylonJS、ThreeJS、LayaboxJS、SceneJS、ThinkJS、ThingJS
下一篇：BabylonJS入门——初探：注入活力

WebGL：BabylonJS入门——初探：我的世界