前言：在学习过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文件
...3dsjsak_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特定值会保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域。
版权声明：本文原创，非本人允许不得转载