varos=function(){varua=navigator.userAgent,isWindowsPhone=/(:WindowsPhone)/.test(ua),isSymbian=/(:SymbianOS)/.test(ua)||isWindowsPhone,isAndroid=/(:Android)/.test(ua),isFireFox=/(:Firefox)/.test(ua),isChrome=/(:Chrome|CriOS)/.test(ua),isTablet=/(:iPad|PlayBook)/.test(ua)||(isAndroid&&!/(:Mobile)/.test(ua))||(isFireFox&&/(:Tablet)/.test(ua)),isPhone=/(:iPhone)/.test(ua)&&!isTablet,isPc=!isPhone&&!isAndroid&&!isSymbian;return{isTablet:isTablet,isPhone:isPhone,isAndroid:isAndroid,isPc:isPc};}();
三、初始化场景材质等资源
1、初始化场景：设置背景透明，全部材质可pick
functioninitScene(){//透明背景scene.clearColor=newBABYLON.Color4(0,0,0,0);//全部材质可pickscene.meshes.forEach(function(mesh){mesh.isPickable=true;if(mesh.animations.length){scene.beginAnimation(mesh,0,0,false)}});//isready=true;}2、初始化相机：调整参数，限制范围，设置变焦速度
functioninitCamera(){camera=newBABYLON.ArcRotateCamera("Camera",0,0.8,0,newBABYLON.Vector3(0,20,0),scene);//限制范围camera.maxZ=50000;camera.lowerBetaLimit=0.35;camera.upperBetaLimit=1.543;//变焦速度camera.wheelPrecision=1;camera.pinchPrecision=1;camera.zoomOnFactor=50;//调整参数camera.radius=100;camera.alpha=Math.PI/2;camera.beta=1.436;camera.targetScreenOffset.y=3;camera.inertia=0.85;scene.activeCamera=camera;camera.attachControl(canvas,true);}3、初始化灯光：根据模型需求设置半球灯光HemisphericLight
functioninitLight(){varhem=newBABYLON.HemisphericLight("HemiLight",newBABYLON.Vector3(0,1,0),scene);hem.intensity=0.3;//创建缓冲函数-Bezier曲线自定义缓冲//vareasingFunction=newBABYLON.BezierCurveEase(.5,.21,.06,.98);}4、初始化材质：为模型材质命名，设置透明度，等待开启调试链接
functioninitMaterial(){scene.getMeshByName("TA").material=newBABYLON.StandardMaterial("tamat",scene);scene.getMeshByName("BZ").material=newBABYLON.StandardMaterial("bzmat",scene);scene.getMeshByName("SZ").material=newBABYLON.StandardMaterial("SZmat",scene);varala=scene.getMeshByName("ALA");varzs=scene.getMeshByName("ZS");varhf=scene.getMeshByName("HF");varbql=scene.getMeshByName("BQL");zs.visibility=0;hf.visibility=0;//开启联机调试//if(os.isPc){//openDebug();//}}5、初始化json：调试工具生成的json文件定义皮肤，覆盖上面定义的材质纹理
四、动画缓冲
//定义动画缓冲函数-平方缓冲vareasingFunction=newBABYLON.QuadraticEase();easingFunction.setEasingMode(BABYLON.EasingFunction.EASIGMODE_EASEINOUT);
五、显示隐藏点心
functionshowMesh(mesh){BABYLON.Animation.CreateAndStartAnimation('show',mesh,'visibility',2,2,mesh.visibility,1,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT,easingFunction,function(){lock=false;});}functionhideMesh(mesh){BABYLON.Animation.CreateAndStartAnimation('hide',mesh,'visibility',2,2,mesh.visibility,0,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT,easingFunction,function(){lock=false;});}
六、改变冰淇淋主体颜色
functiontoggleMaterial(color3,json){varbql=scene.getMeshByName("BQL");//step1:创建Animation对象varanimationColor=newBABYLON.Animation("Color","material.albedoColor",30,BABYLON.Animation.ANIMATIONTTYPE_COLOR3,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);//step2:动画健数组varkeys=[];keys.push({frame:0,value:bql.material.albedoColor});keys.push({frame:10,value:color3});//step3:将动画阵列添加到animation对象animationColor.setKeys(keys);//step4:动画链接到bqlbql.animations=[];bql.animations.push(animationColor);//step5:启动动画scene.beginAnimation(bql,0,10,false,1,function(){initSceneByJSON(json);lock=false;})}
七、改变冰淇淋点心类型
八、冰淇淋模型倒置摇摆1、给所有网格模型添加同一个父对象：球体，用来控制所有模型
//所有网格旋转-球体父对象varsphere=BABYLON.Mesh.CreateSphere("sphere",10,5,scene);sphere.visibility=0;scene.meshes.forEach(function(mesh){if(mesh.name!="sphere"){if(mesh.parent){mesh.parent.parent=sphere;}else{mesh.parent=sphere;}}});varrotation=newBABYLON.Animation("allmesh","rotation",30,BABYLON.Animation.ANIMATIONTYPE_VECTOR3,BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);varkeys2=[];keys2.push({frame:20,value:newBABYLON.Vector3(0,0,0)});keys2.push({frame:25,value:newBABYLON.Vector3(0,0,-0.1)});keys2.push({frame:30,value:newBABYLON.Vector3(0,0,0.1)});keys2.push({frame:35,value:newBABYLON.Vector3(0,0,-0.1)});keys2.push({frame:40,value:newBABYLON.Vector3(0,0,0)});rotation.setKeys(keys2);rotation.setEasingFunction(easingFunction);sphere.animations=[];sphere.animations.push(rotation);2、动画+自动旋转：实现冰淇淋“倒杯不洒”效果
九、冰淇淋自动及手动旋转
十、其它知识点补充
1、Color3和Color4
newBABYLON.Color3(0,0,1);//分别表示rgbnewBABYLON.Color4(0,0,1,0);//分别表示rgba,最后一个是apha透明通道newBABYLON.Color4.FromString("#ffffffff");//颜色转换函数2、公共引用的原JS文件
...\3ds\js\bak_onlineloader-t.js加载模型，defaultEvent.js封装Ajax，配置兼容等默认事件3、禁用高亮
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}这个属性只用于iOS(iPhone和iPad)。
当你点击一个链接或者通过Javascript定义的可点击元素的时候，
它就会出现一个半透明的灰色背景。
要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮，设置颜色的alpha值为0即可。
4、设置背景图片
background:url(../img/body.jpg)repeat-xcenter/cover;background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。
background:url(../img/choose.png)no-repeatcenter/contain;background-size的contain特定值会保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域。