【开发总结】—— BABYLON 项目开发必备系列

前言：在公司主要使用Babylon.js作为前端引擎，我自己在开发中总结到基本上每一个新项目都会需要这些基本设置。

一、ios兼容：解决镜面反射

如果不加offline，材质中有镜面反射，苹果手机都会打不开项目

//ios兼容，解决镜面反射
var offline;
if (os.isPhone) {
    offline = false
} else {
    offline = true
}

var demo = {
        scene: 'MI8',
        binary: true,
        offline: offline,

二、提高支持硬件的质量（在查看器中应该是动态的）

var scale = Math.max(1 / (window.devicePixelRatio || 2));
engine.setHardwareScalingLevel(scale);

三、如果模型把材质都赋给了blank材质球，需手动赋材质

在JSON中分出两套材质，实现调试后即时保存

var mats = {};
function initMaterial() {
         //分材质
scene.meshes.forEach(function (mesh) {
    if (mesh.material && mesh.material.name == "blank") {
        var mat1 = new BABYLON.StandardMaterial(mesh.name + 'mat', scene);
        var mat2 = new BABYLON.StandardMaterial(mesh.name + 'mat_2', scene);

        if (!mats[mesh.name]) {
            mats[mesh.name] = {}
        }
    }
    if (mesh.material && mesh.material.diffuseTexture) {
        var text = mesh.material.diffuseTexture;
        mesh.material.opacityTexture = text;
        mesh.material.backFaceCulling = false;
    }
    mesh.isPickable = true;
});

// if (os.isPc) {
//     openDebug();
// }

//initSceneByJSON(json);

遍历获取两套材质一定要在开启调试链接，初始化json后：

for (key in mats) {
     mats[key].mat1 = scene.getMaterialByName(key + "mat");
     mats[key].mat2 = scene.getMaterialByName(key + "mat_2");
     //默认显示的材质
     scene.getMeshByName(key).material = scene.getMaterialByName(key + "mat_2");
}

按钮切换分别为：

for (key in mats) {
     scene.getMeshByName(key).material = scene.getMaterialByName(key + "mat");
     //console.log(scene.getMeshByName(key).material.name)
}
for (key in mats) {
     scene.getMeshByName(key).material = scene.getMaterialByName(key + "mat_2");
     //console.log(scene.getMeshByName(key).material.name)
}

四、初始化场景、材质等资源

function initHUA(){
    function initScene(){
        //透明背景
        scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

        //全部材质可pick
        scene.meshes.forEach(function(mesh){
            mesh.isPickable = true;
            if(mesh.animations.length){
                scene.beginAnimation(mesh, 0, 0, false)
            }
        });

        //isready = true;
    }

    function initCamera(){
        window.camera = new BABYLON.ArcRotateCamera("Camera",0 ,0.8 ,0, new BABYLON.Vector3(0,0,0),scene);

        //限制范围
        camera.lowerBetaLimit = 0.95;
        camera.upperBetaLimit = 1.25;
        //camera.lowerAlphaLimit = -Math.PI / 6;
        //camera.upperAlphaLimit = Math.PI / 6;
        camera.lowerRadiusLimit = 45;
        camera.upperRadiusLimit = 65;

        //变焦速度
        camera.wheelPrecision = 1;
        camera.pinchPrecision = 1;
        camera.zoomOnFactor = 50;

        ////调整参数
        camera.radius = 52;
        camera.alpha = 0;
        camera.beta = 1.25;
        camera.targetScreenOffset.y = -10;
        camera.inertia = 0.85;
        camera.useAutoRotationBehavior = false;

        scene.activeCamera = camera;
        camera.attachControl(canvas,true);
    }

    function initLight(){
        var hem = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0),scene);
        hem.intensity = 0.3;

        //创建缓冲函数 - Bezier曲线自定义缓冲
        //var easingFunction = new   BABYLON.BezierCurveEase(.5,.21,.06,.98);
    }

五、微信钉钉兼容性问题

微信中Dom元素全部需要放在canvas上面，放在下面会被场景挡住，设置z-index也没用

钉钉中的动画全部需要兼容-webkit前缀，因为钉钉内嵌chrome

注意@keyframes加前缀的形式是：@-webkit-keyframes

六、微信分享

<script type="text/javascript">
     try{
        wxShareConfig({
            shareTitle: "小米8",
            shareLink: window.location.href,
            shareImgUrl:  "https://forreall.cn/3ds/app/MI8/img/logo.png",
            shareDesc: "8周年旗舰手机"
        });
    }catch(e){
    }
</script>

七、数据/事件统计

//点击事件统计
try {
      Forreall3d.trackEvent('_trackEvent', '小米8', '点 
击', '切换普通版');
} catch (e) {
}

注意：点击事件有效时才统计一次，无效点击不统计

//旋转事件统计
Forreall3d.eventDetect("花儿送给你");

八、数字型loading

<script src="../../js/loading.js"></script>

Fn1要放在demo前：

function fn1(num){
         $('.loadwrap-first .heart').html(num);
}

Fn2和loading放在最后：

//loading
function fn2(){
    $(".loadwrap-first").fadeOut();
}
loading(scene,fn1,fn2);