【DQ冰淇淋】—— Babylon/Jquery 三維冰淇淋展示專案總結
阿新 • • 發佈：2018-11-02
前言：在學習過Babylon.js基礎之後，我上手的第一個網頁端3D效果製作專案就是‘DQ冰淇淋’。這個小專案應用到了Babylon最基礎的知識，既可以選味道，選點心，也可以旋轉、倒置冰淇淋，互動起來十分有趣。專案地址：DQ冰淇淋
 |
 |
 |
| 草莓味搭配奧利奧 | 榴蓮味搭配奧利奧華夫脆 | 草莓味搭配奧利奧-倒杯 |
一、開啟http-server服務
在根目錄下開啟服務： $ http-server
Starting up http-server, serving ./
Available on:
http://10.0.2.61:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server
二、匹配不同客戶端
var os = function(){
var ua = navigator.userAgent,
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid
三、初始化場景材質等資源
1、初始化場景：設定背景透明，全部材質可pick
function initScene(){
//透明背景
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
//全部材質可pick
scene.meshes.forEach(function(mesh){
mesh.isPickable = true;
if(mesh.animations.length){
scene.beginAnimation(mesh, 0, 0, false)
}
});
//isready = true;
}
2、初始化相機：調整引數，限制範圍，設定變焦速度
function initCamera(){
camera = new BABYLON.ArcRotateCamera("Camera",0 ,0.8 ,0, new BABYLON.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
function initLight(){
var hem = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0),scene);
hem.intensity = 0.3;
//建立緩衝函式 - Bezier曲線自定義緩衝
//var easingFunction = new BABYLON.BezierCurveEase(.5,.21,.06,.98);
}
4、初始化材質：為模型材質命名，設定透明度，等待開啟除錯連結
function initMaterial(){
scene.getMeshByName("TA").material = new BABYLON.StandardMaterial("tamat",scene);
scene.getMeshByName("BZ").material = new BABYLON.StandardMaterial("bzmat",scene);
scene.getMeshByName("SZ").material = new BABYLON.StandardMaterial("SZmat",scene);
var ala = scene.getMeshByName("ALA");
var zs = scene.getMeshByName("ZS");
var hf = scene.getMeshByName("HF");
var bql = scene.getMeshByName("BQL");
zs.visibility = 0;
hf.visibility = 0;
//開啟聯機除錯
// if (os.isPc) {
// openDebug();
// }
}
5、初始化json：除錯工具生成的json檔案定義面板，覆蓋上面定義的材質紋理
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
}
}
};
View Code
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].clie