码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-11-02 21:35:00      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:stand   rest   normal   win   loader   ajax   背景图片   oms   spi   

前言:在学习过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
                    }
                }
            };
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].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/Jquery 三维冰淇淋展示项目总结

标签:stand   rest   normal   win   loader   ajax   背景图片   oms   spi   

原文地址:https://www.cnblogs.com/ljq66/p/9898198.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!