【开发总结】—— BABYLON 3D开发常见问题及解决方法

前言：组内同事们根据长时间的Babylon.js开发实践，一起将项目开发中遇到的问题及解决方法做了一个梳理。

---

1. ios 【最好】 关闭离线缓存—— 解决添加了反射的mesh 丢失的问题
2. 不要使用 position:fixed; —— 微信里面是不会认的
3. 天空盒的贴图尽可能调小，防止闪退，纯色的可以设为 1*1
4. 模型上的文字、 小图标之类，最好前端贴透明贴图，避免模型贴上不去的模糊不清
5. 透明贴图贴不上去的情况下，可以使用GUI的img控件来贴png
6. 当UScale和vScale等于1时，切换UV通道没有反应，可以先改变uScale，再过100毫秒切换通道，再切换回原来的uScale；
7. 多相机layerMask的情况下，使用actionManager是没有反应的，可以使用scene.pick(x,y,pre,camera)
8. camera.targetScreenOffset动画要stopAnimation两次才能取消
9. input和button点击时的蓝色外边框和灰色半透明背景处理：a,button,input,optgroup,select,textarea{- webkit-tap-highlight-color:rgba(0,0,0,0);}
10. 移动端点透问题：1）尽量使用touch事件替换click事件。 2）用preventDefault阻止a标签的click
11. 设置小于12px的字体,可用transform：scale（0.8），进行缩放设置
12. audio元素和video元素在ios和andriod中无法自动播放应对方案：触屏即播

    $('html').one('touchstart',function(){ audio.play() })

13. active兼容处理即伪类:active 失效。 body添加ontouchstart
14. GUI显示在ios 和android 显示有差异， 可以用dom来显示
15. 贴图UV通道Material.贴图类型.coordinatesIndex=number;
16. 翻转贴图法线mesh.flipFaces()
17. 把mainTextureRatio略微调大点可以解决辉光闪烁的问题

    new BABYLON.HighlightLayer("dianchi", scene,{mainTextureRatio:1.5});

18. 第一人称相机或物体开启重力在不移动的情况下回停止掉落camera._needMoveForGravity = true;
19. 手动设置mesh层级mesh.renderingGroupId=1
20. 视频材质的一些属性不能直接设置，需要视频加载完成后才可以，设置如下。

    var videoTexture = new BABYLON.VideoTexture("video", ["video/video3.mp4","textures/babylonjs.webm"], scene, false, false); videoTexture.video.loop=true; //无效scene.registerBeforeRender(function(){ if(videoTexture.isReady()==true){
          videoTexture.video.loop=true //有效
          }
     })

21. 移动端锯齿严重问题engine.setHardwareScalingLevel(0.4)
22. 动态阴影不精确可以调下面的参数设置灯光阴影的范围和平接头

    light = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(10, -3, -10), scene); light.intensity = 2;
    light.position=new BABYLON.Vector3(-26.053449678125286, 4.620522808003314, 43.64921550154328)
    light.autoUpdateExtends=false; light.shadowFrustumSize=110
    shadowGenerator = new BABYLON.ShadowGenerator(4800, light); shadowGenerator.bias = 0.001; shadowGenerator.useBlurCloseExponentialShadowMap = true;
    // shadowGenerator.forceBackFacesOnly= true; shadowGenerator.depthScale=100
    //shadowGenerator.blurScale=0.6
    // shadowGenerator.frustumEdgeFalloff = 10.0; light.shadowMinZ=0
    light.shadowMaxZ=100 scene.meshes.forEach(function(mesh){ shadowGenerator.getShadowMap().renderList.push(mesh); mesh.receiveShadows = true;
    })

23. 骨骼动画导出错乱

• 3dsmax每个顶点支持的最多骨骼个数默认为20个，babylonjs最多支持每个顶点4个骨骼，你必须将
• 3dsmax中的顶点最多支持的骨骼个数手动设置为4，这样就可以正常使用。
• 参考：http://doc.babylonjs.com/exporters/bones_influences_per_vertex

---

注：本文整理只作学习，非本人允许不得转载