前言:组内同事们根据长时间的Babylon.js开发实践,一起将项目开发中遇到的问题及解决方法做了一个梳理。
- ios 【最好】 关闭离线缓存—— 解决添加了反射的mesh 丢失的问题
- 不要使用 position:fixed; —— 微信里面是不会认的
- 天空盒的贴图尽可能调小,防止闪退,纯色的可以设为 1*1
- 模型上的文字、 小图标之类,最好前端贴透明贴图,避免模型贴上不去的模糊不清
- 透明贴图贴不上去的情况下,可以使用GUI的img控件来贴png
- 当UScale和vScale等于1时,切换UV通道没有反应,可以先改变uScale,再过100毫秒切换通道,再切换回原来的uScale;
- 多相机layerMask的情况下,使用actionManager是没有反应的,可以使用scene.pick(x,y,pre,camera)
- camera.targetScreenOffset动画要stopAnimation两次才能取消
- input和button点击时的蓝色外边框和灰色半透明背景处理:a,button,input,optgroup,select,textarea{- webkit-tap-highlight-color:rgba(0,0,0,0);}
- 移动端点透问题:1)尽量使用touch事件替换click事件。 2)用preventDefault阻止a标签的click
- 设置小于12px的字体,可用transform:scale(0.8),进行缩放设置
- audio元素和video元素在ios和andriod中无法自动播放应对方案:触屏即播
$('html').one('touchstart',function(){ audio.play() })
- active兼容处理即伪类:active 失效。 body添加ontouchstart
- GUI显示在ios 和android 显示有差异, 可以用dom来显示
- 贴图UV通道Material.贴图类型.coordinatesIndex=number;
- 翻转贴图法线mesh.flipFaces()
- 把mainTextureRatio略微调大点可以解决辉光闪烁的问题
new BABYLON.HighlightLayer("dianchi", scene,{mainTextureRatio:1.5});
- 第一人称相机或物体开启重力在不移动的情况下回停止掉落camera._needMoveForGravity = true;
- 手动设置mesh层级mesh.renderingGroupId=1
- 视频材质的一些属性不能直接设置,需要视频加载完成后才可以,设置如下。
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 //有效 } })
- 移动端锯齿严重问题engine.setHardwareScalingLevel(0.4)
- 动态阴影不精确可以调下面的参数设置灯光阴影的范围和平接头
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; })
- 骨骼动画导出错乱
- 3dsmax每个顶点支持的最多骨骼个数默认为20个,babylonjs最多支持每个顶点4个骨骼,你必须将
- 3dsmax中的顶点最多支持的骨骼个数手动设置为4,这样就可以正常使用。
- 参考:http://doc.babylonjs.com/exporters/bones_influences_per_vertex
注:本文整理只作学习,非本人允许不得转载