【DQ冰淇淋】—— Babylon/Jquery 三维冰淇淋展示项目总结

前言：在学习过Babylon.js基础之后，我上手的第一个网页端3D效果制作项目就是‘DQ冰淇淋’。这个小项目应用到了Babylon最基础的知识，既可以选味道，选点心，也可以旋转、倒置冰淇淋，互动起来十分有趣。

var json = {
"lights": {
"Default light": {
"intensity": 1,
"diffuse": {
"r": 1,
"g": 1,
"b": 1
},
"specular": {
"r": 1,
"g": 1,
"b": 1
},
"groundColor": {
"r": 0,
"g": 0,
"b": 0
},
"direction": {
"x": 0,
"y": 1,
"z": 0
}
},
"light2": {
"intensity": 0.3,
"diffuse": {
"r": 1,
"g": 1,
"b": 1
},
"specular": {
"r": 1,
"g": 1,
"b": 1
},
"groundColor": {
"r": 0,
"g": 0,
"b": 0
},
"direction": {
"x": 0,
"y": 1,
"z": 0
}
}
},
"materials": {
"lambert2": {
"materialType": "StandardMaterial",
"diffuseColor": {
"r": 0.2784313725490196,
"g": 0.12941176470588237,
"b": 0
},
"emissiveColor": {
"r": 0,
"g": 0,
"b": 0
},
"specularColor": {
"r": 0,
"g": 0,
"b": 0
},
"specularPower": 2.56,
"alpha": 1,
"ambientColor": {
"r": 0,
"g": 0,
"b": 0
},
"roughness": 0,
"indexOfRefraction": 0.98,
"useSpecularOverAlpha": true,
"diffuseTexture": "path:/3ds/assets/materialLibNew/textures/,name:磨砂_细01.jpg",
"diffLevel": 1,
"diffUS": 1,
"diffVS": 1,
"diffIndex": 0,
"nofrediff": true,
"noref": true,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"noalbedo": true,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
},
"lambert1": {
"materialType": "StandardMaterial",
"diffuseColor": {
"r": 0.8588235294117647,
"g": 0.8588235294117647,
"b": 0.8588235294117647
},
"emissiveColor": {
"r": 0.3607843137254902,
"g": 0.3607843137254902,
"b": 0.3607843137254902
},
"specularColor": {
"r": 0.7019607843137254,
"g": 0.7019607843137254,
"b": 0.7019607843137254
},
"specularPower": 100,
"alpha": 1,
"ambientColor": {
"r": 0.38823529411764707,
"g": 0.38823529411764707,
"b": 0.38823529411764707
},
"metallic": 0.1,
"roughness": 0,
"indexOfRefraction": 2.302,
"useSpecularOverAlpha": false,
"nodiff": true,
"nofrediff": true,
"noref": true,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"noalbedo": true,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
},
"lambert4": {
"materialType": "StandardMaterial",
"diffuseColor": {
"r": 1,
"g": 0.9333333333333333,
"b": 0.4392156862745098
},
"emissiveColor": {
"r": 0,
"g": 0,
"b": 0
},
"specularColor": {
"r": 0,
"g": 0,
"b": 0
},
"specularPower": 2.56,
"alpha": 1,
"ambientColor": {
"r": 0,
"g": 0,
"b": 0
},
"roughness": 0,
"indexOfRefraction": 0.98,
"useSpecularOverAlpha": true,
"nodiff": true,
"nofrediff": true,
"noref": true,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"bumpTexture": "path:/3ds/assets/materialLibNew/textures/,name:磨砂_粗02_法线.png",
"bumpLevel": 1.8,
"bumpUS": 3.5,
"bumpVS": 3.5,
"useParallaxOcclusion": false,
"useParallax": false,
"parallaxScaleBias": 0.05,
"bumpIndex": 0,
"noalbedo": true,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
},
"lambert3": {
"materialType": "StandardMaterial",
"diffuseColor": {
"r": 1,
"g": 0.5333333333333333,
"b": 0
},
"emissiveColor": {
"r": 0,
"g": 0,
"b": 0
},
"specularColor": {
"r": 0,
"g": 0,
"b": 0
},
"specularPower": 2.56,
"alpha": 1,
"ambientColor": {
"r": 0,
"g": 0,
"b": 0
},
"roughness": 0,
"indexOfRefraction": 0.98,
"useSpecularOverAlpha": true,
"nodiff": true,
"nofrediff": true,
"noref": true,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"noalbedo": true,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
},
"Material #48": {
"materialType": "StandardMaterial",
"diffuseColor": {
"r": 0.5607843137254902,
"g": 0.5607843137254902,
"b": 0.5607843137254902
},
"emissiveColor": {
"r": 0,
"g": 0,
"b": 0
},
"specularColor": {
"r": 0,
"g": 0,
"b": 0
},
"specularPower": 100,
"alpha": 0.14,
"ambientColor": {
"r": 0,
"g": 0,
"b": 0
},
"roughness": 10,
"indexOfRefraction": 0.98,
"useSpecularOverAlpha": true,
"nodiff": true,
"nofrediff": true,
"noref": true,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"opacityTexture": "path:/3ds/app/dq/materialLib/textures/,name:yy-11.png",
"opaLevel": 5,
"opaUS": 1,
"opaVS": 1,
"opaIndex": 0,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"noalbedo": true,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
},
"tamat": {
"materialType": "StandardMaterial",
"diffuseColor": {
"r": 1,
"g": 1,
"b": 1
},
"emissiveColor": {
"r": 0,
"g": 0,
"b": 0
},
"specularColor": {
"r": 1,
"g": 1,
"b": 1
},
"specularPower": 64,
"alpha": 1,
"ambientColor": {
"r": 0,
"g": 0,
"b": 0
},
"roughness": 0,
"indexOfRefraction": 0.98,
"useSpecularOverAlpha": false,
"diffuseTexture": "path:/3ds/app/dq/materialLib/textures/,name:dq--4.jpg",
"diffLevel": 1.4,
"diffUS": 4.49,
"diffVS": 9.97,
"diffIndex": 0,
"nofrediff": true,
"reflectionTexture": "path:/3ds/assets/materialLibNew/skyboxs/,name:roomgray",
"refLevel": 0.05,
"refIndex": 0,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"noalbedo": true,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
},
"bzmat": {
"materialType": "StandardMaterial",
"diffuseColor": {
"r": 1,
"g": 1,
"b": 1
},
"emissiveColor": {
"r": 0.32941176470588235,
"g": 0.32941176470588235,
"b": 0.32941176470588235
},
"specularColor": {
"r": 1,
"g": 1,
"b": 1
},
"specularPower": 64,
"alpha": 1,
"ambientColor": {
"r": 0,
"g": 0,
"b": 0
},
"roughness": 0,
"indexOfRefraction": 0.98,
"useSpecularOverAlpha": false,
"diffuseTexture": "path:/3ds/assets/materialLibNew/textures/,name:磨砂_细01.jpg",
"diffLevel": 1.15,
"diffUS": 20,
"diffVS": 20,
"diffIndex": 0,
"nofrediff": true,
"reflectionTexture": "path:/3ds/assets/materialLibNew/skyboxs/,name:roomgray",
"refLevel": 0.05,
"refIndex": 0,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"noalbedo": true,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
},
"SZmat": {
"materialType": "PBRMetallicRoughnessMaterial",
"emissiveColor": {
"r": 0,
"g": 0,
"b": 0
},
"alpha": 1,
"baseColor": {
"r": 0.7019607843137254,
"g": 0,
"b": 0
},
"metallic": 0.1,
"roughness": 0,
"occlusionStrength": 1,
"nodiff": true,
"nofrediff": true,
"noref": true,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"noalbedo": true,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"environmentTexture": "path:/3ds/assets/materialLibNew/skyboxs/,name:heibai_t",
"environmentLevel": 0.9,
"environmentIndex": 0,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
},
"blinn1": {
"materialType": "PBRMaterial",
"emissiveColor": {
"r": 0,
"g": 0,
"b": 0
},
"alpha": 1,
"albedoColor": {
"r": 0.9019607843137255,
"g": 0.9019607843137255,
"b": 0.9019607843137255
},
"reflectivityColor": {
"r": 1,
"g": 1,
"b": 1
},
"reflectionColor": {
"r": 1,
"g": 1,
"b": 1
},
"ambientColor": {
"r": 0,
"g": 0,
"b": 0
},
"metallic": 0,
"microSurface": 1,
"indexOfRefraction": 0.66,
"directIntensity": 1,
"emissiveIntensity": 1,
"environmentIntensity": 1,
"specularIntensity": 1,
"ambientTextureStrength": 1,
"useRoughnessFromMetallicTextureAlpha": true,
"useRoughnessFromMetallicTextureGreen": false,
"useMetallnessFromMetallicTextureBlue": false,
"useAmbientOcclusionFromMetallicTextureRed": false,
"useAmbientInGrayScale": false,
"useAlphaFromAlbedoTexture": false,
"useMicroSurfaceFromReflectivityMapAlpha": false,
"useRadianceOverAlpha": true,
"useSpecularOverAlpha": true,
"nodiff": true,
"nofrediff": true,
"noref": true,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"albedoTexture": "path:/3ds/assets/materialLibNew/textures/,name:磨砂_细01.jpg",
"albedoLevel": 1.3,
"albedoUS": 1,
"albedoVS": 1,
"albedoIndex": 0,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
}
}
};
var json1 = {
"materials": {
"blinn1": {
"materialType": "PBRMaterial",
"emissiveColor": {
"r": 0,
"g": 0,
"b": 0
},
"alpha": 1,
"albedoColor": {
"r": 0.9019607843137255,
"g": 0.9019607843137255,
"b": 0.9019607843137255
},
"reflectivityColor": {
"r": 1,
"g": 1,
"b": 1
},
"reflectionColor": {
"r": 1,
"g": 1,
"b": 1
},
"ambientColor": {
"r": 0,
"g": 0,
"b": 0
},
"metallic": 0,
"microSurface": 1,
"indexOfRefraction": 0.66,
"directIntensity": 1,
"emissiveIntensity": 1,
"environmentIntensity": 1,
"specularIntensity": 1,
"ambientTextureStrength": 1,
"useRoughnessFromMetallicTextureAlpha": true,
"useRoughnessFromMetallicTextureGreen": false,
"useMetallnessFromMetallicTextureBlue": false,
"useAmbientOcclusionFromMetallicTextureRed": false,
"useAmbientInGrayScale": false,
"useAlphaFromAlbedoTexture": false,
"useMicroSurfaceFromReflectivityMapAlpha": false,
"useRadianceOverAlpha": true,
"useSpecularOverAlpha": true,
"nodiff": true,
"nofrediff": true,
"noref": true,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"albedoTexture": "path:/3ds/assets/materialLibNew/textures/,name:磨砂_细01.jpg",
"albedoLevel": 1.3,
"albedoUS": 1,
"albedoVS": 1,
"albedoIndex": 0,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
}
}
};
var json2 = {
"materials": {
"blinn1": {
"materialType": "PBRMaterial",
"emissiveColor": {
"r": 0,
"g": 0,
"b": 0
},
"alpha": 1,
"albedoColor": {
"r": 1,
"g": 0.8392156862745098,
"b": 0.9254901960784314
},
"reflectivityColor": {
"r": 1,
"g": 1,
"b": 1
},
"reflectionColor": {
"r": 1,
"g": 1,
"b": 1
},
"ambientColor": {
"r": 0,
"g": 0,
"b": 0
},
"metallic": 0,
"microSurface": 1,
"indexOfRefraction": 0.66,
"directIntensity": 1,
"emissiveIntensity": 1,
"environmentIntensity": 1,
"specularIntensity": 1,
"ambientTextureStrength": 1,
"useRoughnessFromMetallicTextureAlpha": true,
"useRoughnessFromMetallicTextureGreen": false,
"useMetallnessFromMetallicTextureBlue": false,
"useAmbientOcclusionFromMetallicTextureRed": false,
"useAmbientInGrayScale": false,
"useAlphaFromAlbedoTexture": false,
"useMicroSurfaceFromReflectivityMapAlpha": false,
"useRadianceOverAlpha": true,
"useSpecularOverAlpha": true,
"nodiff": true,
"nofrediff": true,
"noref": true,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"albedoTexture": "path:/3ds/assets/materialLibNew/textures/,name:磨砂_细01.jpg",
"albedoLevel": 1.3,
"albedoUS": 1,
"albedoVS": 1,
"albedoIndex": 0,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
}
}
};
var json3 = {
"materials": {
"blinn1": {
"materialType": "PBRMaterial",
"emissiveColor": {
"r": 0,
"g": 0,
"b": 0
},
"alpha": 1,
"albedoColor": {
"r": 1,
"g": 0.9176470588235294,
"b": 0.7607843137254902
},
"reflectivityColor": {
"r": 1,
"g": 1,
"b": 1
},
"reflectionColor": {
"r": 1,
"g": 1,
"b": 1
},
"ambientColor": {
"r": 0,
"g": 0,
"b": 0
},
"metallic": 0,
"microSurface": 1,
"indexOfRefraction": 0.66,
"directIntensity": 1,
"emissiveIntensity": 1,
"environmentIntensity": 1,
"specularIntensity": 1,
"ambientTextureStrength": 1,
"useRoughnessFromMetallicTextureAlpha": true,
"useRoughnessFromMetallicTextureGreen": false,
"useMetallnessFromMetallicTextureBlue": false,
"useAmbientOcclusionFromMetallicTextureRed": false,
"useAmbientInGrayScale": false,
"useAlphaFromAlbedoTexture": false,
"useMicroSurfaceFromReflectivityMapAlpha": false,
"useRadianceOverAlpha": true,
"useSpecularOverAlpha": true,
"nodiff": true,
"nofrediff": true,
"noref": true,
"nofreref": true,
"norefra": true,
"nofrerefra": true,
"noopa": true,
"nofreopa": true,
"noemi": true,
"nofreemi": true,
"nospe": true,
"nobump": true,
"albedoTexture": "path:/3ds/assets/materialLibNew/textures/,name:磨砂_细01.jpg",
"albedoLevel": 1.3,
"albedoUS": 1,
"albedoVS": 1,
"albedoIndex": 0,
"noambient": true,
"norelectivity": true,
"nometallic": true,
"noenvironment": true,
"nobase": true,
"noocclusion": true,
"nonormal": true,
"nomicro": true,
"nomr": true,
"nosg": true
}
}
};

initSceneByJSON(json);

四、动画缓冲

//定义动画缓冲函数 - 平方缓冲
var easingFunction = new BABYLON.QuadraticEase();
easingFunction.setEasingMode(BABYLON.EasingFunction.EASIGMODE_EASEINOUT);

五、显示隐藏点心

function showMesh(mesh){
BABYLON.Animation.CreateAndStartAnimation('show', mesh, 'visibility', 2, 2, mesh.visibility, 1 ,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, easingFunction, function(){
lock = false;
});
}
function hideMesh(mesh){
BABYLON.Animation.CreateAndStartAnimation('hide', mesh, 'visibility', 2, 2, mesh.visibility, 0 ,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, easingFunction, function(){
lock = false;
});
}

六、改变冰淇淋主体颜色

function toggleMaterial(color3, json){
var bql = scene.getMeshByName("BQL");

//step1: 创建Animation 对象
var animationColor = new BABYLON.Animation("Color", "material.albedoColor", 30, BABYLON.Animation.ANIMATIONTTYPE_COLOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

//step2: 动画健 数组
var keys = [];

keys.push({
frame: 0,
value: bql.material.albedoColor
});

keys.push({
frame: 10,
value: color3
});

//step3: 将动画阵列添加到 animation 对象
animationColor.setKeys(keys);

//step4: 动画链接到bql
bql.animations = [];
bql.animations.push(animationColor);

//step5: 启动动画
scene.beginAnimation(bql, 0, 10, false, 1, function(){
initSceneByJSON(json);
lock = false;
})

}

七、改变冰淇淋点心类型

function changeType(){
$(".testType-group li").click(function(){

if(lock){ //开关lock 根据index为材质改变颜色的时候 true
return
}

var index = $(".testType-group li").index($(this));

if(index <= 2){
$(".testType-group li.type").removeClass("active");
$(this).addClass("active");
}else{
if($(this).attr("class") == "active"){
$(this).removeClass("active");
}else{
$(this).addClass("active");
}
}

//局部变量 为下面使用重新定义一次
var ala = scene.getMeshByName("ALA");
var zs = scene.getMeshByName("ZS");
var hf = scene.getMeshByName("HF");

switch (index){
case 0:
lock = true;
//Forreall3d.trackEvent('_trackEvent', 'dq冰淇凌', '按钮', '原味');
toggleMaterial(new BABYLON.Color3(0.9294117647058824, 0.9294117647058824, 0.9294117647058824), json1);
break;
case 1:
lock = true;       
             //Forreall3d.trackEvent('_trackEvent', 'dq冰淇凌', '按钮', '草莓味');
toggleMaterial(new BABYLON.Color3(1, 0.8392156862745098, 0.9254901960784314), json2);
break;
case 2:
lock = true;
//Forreall3d.trackEvent('_trackEvent', 'dq冰淇凌', '按钮', '榴莲味');
toggleMaterial(new BABYLON.Color3(1, 0.9176470588235294, 0.7607843137254902), json3);
break;
case 3:
lock = true;
//Forreall3d.trackEvent('_trackEvent', 'dq冰淇凌', '按钮', '华夫脆');
if ($(this).attr("class") == "active") {
showMesh(hf)
} else {
hideMesh(hf)
}
break;
case 4:
lock = true;
//Forreall3d.trackEvent('_trackEvent', 'dq冰淇凌', '按钮', '芝士蛋糕');
if ($(this).attr("class") == "active") {
showMesh(zs)
} else {
hideMesh(zs)
}
break;
case 5:
lock = true;
//Forreall3d.trackEvent('_trackEvent', 'dq冰淇凌', '按钮', '奥利奥');
if ($(this).attr("class") == "active") {
showMesh(ala)
} else {
hideMesh(ala)
}
break;
}
})
}

八、冰淇淋模型倒置摇摆
1、给所有网格模型添加同一个父对象：球体，用来控制所有模型

//所有网格旋转 - 球体父对象
var sphere = 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;
}
}
});

var rotation = new BABYLON.Animation("allmesh","rotation", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var keys2 = [];
keys2.push({
frame: 20,
value: new BABYLON.Vector3(0, 0, 0)
});
keys2.push({
frame: 25,
value: new BABYLON.Vector3(0, 0, -0.1)
});
keys2.push({
frame: 30,
value: new BABYLON.Vector3(0, 0, 0.1)
});
keys2.push({
frame: 35,
value: new BABYLON.Vector3(0, 0, -0.1)
});
keys2.push({
frame: 40,
value: new BABYLON.Vector3(0, 0, 0)
});
rotation.setKeys(keys2);
rotation.setEasingFunction(easingFunction);
sphere.animations = [];
sphere.animations.push(rotation);

2、动画+自动旋转：实现冰淇淋“倒杯不洒”效果

$('.btn').click(function(){
if(lock && !autoRotate){
return
}

lock = true;
autoRotate.pause();

//动画前为防止闪动 - 定义限制为null
var lowbeta = scene.activeCamera.lowerBetaLimit;
var upperbeta = scene.activeCamera.upperBetaLimit;
var lowradius = scene.activeCamera.lowerRadiusLimit;
var upperradius = scene.activeCamera.upperRadiusLimit;

scene.activeCamera.lowerBetaLimit = null;
scene.activeCamera.upperBetaLimit = null;
scene.activeCamera.lowerRadiusLimit = null;
scene.activeCamera.upperRadiusLimit = null;

BABYLON.Animation.CreateAndStartAnimation("beta", scene.activeCamera, "beta", 2, 2, scene.activeCamera.beta, -1.436, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, easingFunction, function(){
scene.beginAnimation(sphere, 20, 40, false, 0.3, function(){
BABYLON.Animation.CreateAndStartAnimation("beta", scene.activeCamera, "beta", 2, 2, scene.activeCamera.beta, 1.436, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, easingFunction);
BABYLON.Animation.CreateAndStartAnimation("alpha",scene.activeCamera,"alpha", 2, 2, scene.activeCamera.alpha, -Math.PI / 2, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT,easingFunction);
lock = false;

//恢复 相机限制
scene.activeCamera.lowerBetaLimit = lowbeta;
scene.activeCamera.upperBetaLimit = upperbeta;
scene.activeCamera.lowerRadiusLimit = lowradius;
scene .activeCamera.upperRadiusLimit = upperradius;

autoRotate.restart(0.0015, "left");
})

});
BABYLON.Animation.CreateAndStartAnimation("alpha", scene.activeCamera, "alpha", 2, 2, scene.activeCamera.alpha, Math.PI / 2 , BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, easingFunction)

});

九、冰淇淋自动及手动旋转

//相机自动旋转
setTimeout(function(){
autoRotate = new RotateCamera(camera, "alpha", 0.0015, "left");
},3000);

function RotateCamera(camera, property, speed, Dir){
var rotateState = Dir;
var touchstartX = 0;
this.pause = function(){
speed = 0;
scene.onBeforeRenderObservable.removeCallback(autoRotate);
};
this.restart = function(_speed,_rotateState){
speed = _speed;
if(_rotateState == "left" || _rotateState == "right"){
rotateState = _rotateState;
}
scene.onBeforeRenderObservable.removeCallback(autoRotate);
scene.onBeforeRenderObservable.add(autoRotate);
};

//手机  左右旋转事件
document.querySelector("canvas").addEventListener("touchstart",function(e){
touchstartX = e.touches[0].clientX;
});
document.querySelector("canvas").addEventListener("touchmove",function(e){
if(e.touches[0].clientX - touchstartX > 0){
rotateState = "left"
}else{
rotateState = "right"
}
});

//PC端
scene.onPointerObservable.add(function(e){
touchstartX = e.event.clientX;
},1);
scene.onPointerObservable.add(function(e){
if(e.event.clientX - touchstartX > 0){
rotateState = "left";
}else{
rotateState = "right";
}
},2);

function autoRotate(){
//scene.activeCamera
if(camera instanceof BABYLON.FreeCamera){
if(rotateState == 'left'){
camera.rotation[property] -= speed;
}else{
camera.rotation[property] += speed;
}
}

if(camera instanceof BABYLON.ArcRotateCamera){
if(rotateState == 'left'){
camera[property] -= speed;
}else{
camera[property] += speed;
}
}
}

scene.onBeforeRenderObservable.add(autoRotate);
}

十、其它知识点补充

1、Color3 和Color4

new BABYLON.Color3(0, 0, 1);  //分别表示rgb
new BABYLON.Color4(0, 0, 1, 0);  //分别表示rgba,最后一个是apha 透明通道
new BABYLON.Color4.FromString("#ffffffff"); //颜色转换函数

2、公共引用的原JS文件

...\3ds\js\bak_online
loader-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-x  center/cover;

background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。

background: url(../img/choose.png)  no-repeat  center/contain;

 background-size的contain特定值会保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域。 

版权声明：本文原创，非本人允许不得转载