【開發總結】—— 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

 

---

注：本文整理只作學習，非本人允許不得轉載