【DQ冰淇淋】—— Babylon 冰淇淋三维互动营销项目总结
前言：在学习过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 = /(?: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
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
}
}
};
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特定值会保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域。
版权声明：本文原创，非本人允许不得转载
【DQ冰淇淋】—— Babylon 冰淇淋三维互动营销项目总结的更多相关文章
- 基于Cesium三维地图项目记录_通视分析功能的实现
实现了剖面分析功能之后,下面来看看如何实现通视分析,还是基本按照之前的思路实现: 了解软件LocaScape是怎么实现的: 网址如下:http://www.locaspace.cn/V3.0/help ...
- [比较老的文章]三维渲染引擎 OGRE 与 OSG 的比较综述
1 .引言随着计算机可视化.虚拟现实技术的飞速发展,人们对实时真实感渲染以及场景复杂度提出了更高的要求.传统的直接使用底层图形接口如OpenGL.DirectX开发图形应用的模式越来越暴露出开发复杂性 ...
- 开源三维地球GIS引擎Cesium常用功能的开发
Cesium是一个非常优秀的三维地球GIS引擎(开源且免费).能够加载各种符合标准的地图图层,瓦片图.矢量图等都支持.支持3DMax等建模软件生成的obj文件,支持通用的GIS计算:支持DEM高程图. ...
- GitHub 热点速览 Vol.14：周获 2k+ Vim 掀起三维编程风
作者:HelloGitHub-小鱼干 摘要(用于 公众号/博客园等地方)寓教于乐,应该是上周 Trending 的主题了,无论是被多人转发推荐的三维 Vim 项目 Vim³ 或者是流体运动的 WebG ...
- [转载]基于TFS实践敏捷-工作项跟踪
工作项跟踪(1) 可跟踪性是软件过程的重要能力,TFS主要是以工作项来实现过程的可跟踪性.曾有人问:"你们实际项目里的工作项是怎么样的?能不能让我们看看?"我也一直很好奇别的公司T ...
- TFS(Team Foundation Server)敏捷使用教程(四)：工作项跟踪（1）
工作项跟踪(1) 可跟踪性是软件过程的重要能力,TFS主要是以工作项来实现过程的可跟踪性.曾有人问:"你们实际项目里的工作项是怎么样的?能不能让我们看看?"我也一直很好奇别的公司T ...
- 开源图形库 c语言-图形图像库 集合[转]
开源图形库 c语言-图形图像库 集合[转] Google三维API O3D O3D 是一个开源的 Web API 用来在浏览器上创建界面丰富的交互式的 3D 应用程序.这是一种基于网页的可控3D标准. ...
- Matlab计算机视觉/图像处理工具箱推荐
Matlab计算机视觉/图像处理工具箱推荐 转载http://cvnote.info/matlab-cv-ip-toolbox/ 计算机视觉/图像处理研究中经常要用到Matlab,虽然其自带了图像处理 ...
- 为什么qt成为c++界面编程的第一选择
为什么qt成为c++界面编程的第一选择 一.前言 为什么现在QT越来越成为界面编程的第一选择,笔者从事qt界面编程已经有接近8年,在这之前我做C++界面都是基于MFC,也做过5年左右.当时为什么会从M ...
随机推荐
- PAT乙级 1001(C)+1054(Java)
准备一天两道题,就这样吧,先从水题开始. 1001.点击查看 分析:看懂题就应该写出来了,注意边界与0情况的处理. #include<stdio.h> #include<math.h ...
- Leetcode 565.数组嵌套
数组嵌套 索引从0开始长度为N的数组A,包含0到N - 1的所有整数.找到并返回最大的集合S,S[i] = {A[i], A[A[i]], A[A[A[i]]], ... }且遵守以下的规则. 假设选 ...
- oracle中用rownum分页并排序的查询SQL语句
oracle的sql语句中没有limit,limit是mysql中特有的,在oracle中可用rownum来表示,用于查询结果中的前N行数据. 如要查询emp表中的前5行数据,可用如下语句: sele ...
- mybatis的使用及详解
一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以 ...
- Log4j官方文档翻译(三、配置)
之前的章节介绍了log4j的核心组件,本章将会通过配置文件介绍一下核心组建的配置. 主要在配置文件中配置log4j的日志级别,定义appender.layout等. log4j.properties是 ...
- BZOJ 2818： Gcd（欧拉函数）
GCDDescription 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. Input 一个整数N Output 如题 Sample Input 4 ...
- TTL 和 RS-232
下面详细讲解下面这三种的区别 USB转TTL串口板(常用芯片PL2303,CH340) USB转RS-232串口线 TTL转RS-232串口板,RS-232转TTL串口板(常用芯片MAX3232,MA ...
- Unity3D 绘制扇形/环形
using UnityEngine; using System.Collections; using System.Collections.Generic; public class Cone : M ...
- Xcode 真机调试报错：This application's application-identifier entitleme
This application's application-identifier entitlement does not match that of the installed appli ...
- 一个简单的NoSQL内存数据库—Berkeley DB基本操作的例子
一个简单的NoSQL内存数据库—Berkeley DB基本操作的例子 最近,由于云计算的发展,数据库技术也从结构式数据库发展到NoSQL数据库,存储模式从结构化的关系存储到现在如火如荼的key/val ...