初学WebGL引擎-BabylonJS：第8篇-阴影网格与活动

【playground】-shadows（阴影）

源码

var createScene = function () {

    var scene = new BABYLON.Scene(engine);

    // Setup environment

    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 90, BABYLON.Vector3.Zero(), scene);

    camera.lowerBetaLimit = 0.1;

    camera.upperBetaLimit = (Math.PI / 2) * 0.9;

    camera.lowerRadiusLimit = 30;

    camera.upperRadiusLimit = 150;

    camera.attachControl(canvas, true);

    // light1

    var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);

    light.position = new BABYLON.Vector3(20, 40, 20);

    light.intensity = 0.5;

    var lightSphere = BABYLON.Mesh.CreateSphere("sphere", 10, 2, scene);

    lightSphere.position = light.position;

    lightSphere.material = new BABYLON.StandardMaterial("light", scene);

    lightSphere.material.emissiveColor = new BABYLON.Color3(1, 1, 0);

    // light2

    var light2 = new BABYLON.SpotLight("spot02", new BABYLON.Vector3(30, 40, 20),

                                                new BABYLON.Vector3(-1, -2, -1), 1.1, 16, scene);

    light2.intensity = 0.5;

    var lightSphere2 = BABYLON.Mesh.CreateSphere("sphere", 10, 2, scene);

    lightSphere2.position = light2.position;

    lightSphere2.material = new BABYLON.StandardMaterial("light", scene);

    lightSphere2.material.emissiveColor = new BABYLON.Color3(1, 1, 0);

    // Ground

    var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/heightMap.png", 100, 100, 100, 0, 10, scene, false);

    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);

    groundMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);

    groundMaterial.diffuseTexture.uScale = 6;

    groundMaterial.diffuseTexture.vScale = 6;

    groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);

    ground.position.y = -2.05;

    ground.material = groundMaterial;

    // Torus

    var torus = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);

    // Shadows

    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

    shadowGenerator.getShadowMap().renderList.push(torus);

    shadowGenerator.useVarianceShadowMap = true;

    var shadowGenerator2 = new BABYLON.ShadowGenerator(1024, light2);

    shadowGenerator2.getShadowMap().renderList.push(torus);

    shadowGenerator2.usePoissonSampling = true;

    ground.receiveShadows = true;

    // Animations

    var alpha = 0;

    scene.registerBeforeRender(function () {

        torus.rotation.x += 0.01;

        torus.rotation.z += 0.02;

        torus.position = new BABYLON.Vector3(Math.cos(alpha) * 30, 10, Math.sin(alpha) * 30);

        alpha += 0.01;

    });

    return scene;

}

效果

笔记

这期官方下载包无图，建议将前面地图那节的图worldHeightMap.jpg作为本节使用。效果也较为可以

以下是个人理解翻译

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>

    <title>Babylon - Getting Started</title>

    <!-- link to the last version of babylon -->

    <script src="js/babylon.2.2.max.js"></script>

</head>

<style>

    html, body {

        overflow: hidden;

        width   : 100%;

        height  : 100%;

        margin  : 0;

        padding : 0;

    }

    #renderCanvas {

        width   : 100%;

        height  : 100%;

        touch-action: none;

    }

</style>

<body>

    <canvas id="renderCanvas"></canvas>

    <script>

    window.addEventListener('DOMContentLoaded', function() {

        //获取画布对象

       var canvas = document.getElementById('renderCanvas');

       //加载巴比伦3D引擎

       var engine = new BABYLON.Engine(canvas, true);

       //创建场景

       var createScene = function () {

    var scene = new BABYLON.Scene(engine);

    //还是相机

    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 90, BABYLON.Vector3.Zero(), scene);

    camera.lowerBetaLimit = 0.1;

    camera.upperBetaLimit = (Math.PI / 2) * 0.9;

    camera.lowerRadiusLimit = 30;

    camera.upperRadiusLimit = 150;

    camera.attachControl(canvas, true);

    // 定向光源

    var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);

    light.position = new BABYLON.Vector3(20, 40, 20);

    //强度

    light.intensity = 0.5;

    //球体光源1

    var lightSphere = BABYLON.Mesh.CreateSphere("sphere", 10, 2, scene);

    lightSphere.position = light.position;

    lightSphere.material = new BABYLON.StandardMaterial("light", scene);

    lightSphere.material.emissiveColor = new BABYLON.Color3(1, 1, 0);

    //球体光源2

    var light2 = new BABYLON.SpotLight("spot02", new BABYLON.Vector3(30, 40, 20),

                                                new BABYLON.Vector3(-1, -2, -1), 1.1, 16, scene);

    light2.intensity = 0.5;

    var lightSphere2 = BABYLON.Mesh.CreateSphere("sphere", 10, 2, scene);

    lightSphere2.position = light2.position;

    lightSphere2.material = new BABYLON.StandardMaterial("light", scene);

    lightSphere2.material.emissiveColor = new BABYLON.Color3(1, 1, 0);

    // 地形图

    var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/worldHeightMap.jpg", 100, 100, 100, 0, 10, scene, false);

    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);

    groundMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);

    groundMaterial.diffuseTexture.uScale = 6;

    groundMaterial.diffuseTexture.vScale = 6;

    groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);

    ground.position.y = -2.05;

    ground.material = groundMaterial;

    // 环形

    var torus = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);

    // 创建阴影

    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

    //设置阴影根据光点light，作用于torus（环形）

    shadowGenerator.getShadowMap().renderList.push(torus);

    //方差阴影图?

    shadowGenerator.useVarianceShadowMap = true;

    var shadowGenerator2 = new BABYLON.ShadowGenerator(1024, light2);

    shadowGenerator2.getShadowMap().renderList.push(torus);

    //适用泊松采样

    shadowGenerator2.usePoissonSampling = true;

    //接收阴影

    ground.receiveShadows = true;

    // Animations

    var alpha = 0;

    //设置环形的运动轨迹与自身翻转

    scene.registerBeforeRender(function () {

        torus.rotation.x += 0.01;

        torus.rotation.z += 0.02;

        torus.position = new BABYLON.Vector3(Math.cos(alpha) * 30, 10, Math.sin(alpha) * 30);

        alpha += 0.01;

    });

    return scene;

}

        //赋予该场景于变量

        var scene = createScene();

        //在引擎中循环运行这个场景

        engine.runRenderLoop(function(){

            scene.render();

        });

        //追加事件：帆布与大小调整程序

        window.addEventListener('resize', function(){

            engine.resize();

        });

    });

</script>

</body>

</html>

【playground】-import meshes（导入模型网格）

效果：

注释后的源码

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>

    <title>Babylon - Getting Started</title>

    <!-- link to the last version of babylon -->

    <script src="js/babylon.2.2.max.js"></script>

</head>

<style>

    html, body {

        overflow: hidden;

        width   : 100%;

        height  : 100%;

        margin  : 0;

        padding : 0;

    }

    #renderCanvas {

        width   : 100%;

        height  : 100%;

        touch-action: none;

    }

</style>

<body>

    <canvas id="renderCanvas"></canvas>

    <script>

    window.addEventListener('DOMContentLoaded', function() {

        //获取画布对象

       var canvas = document.getElementById('renderCanvas');

       //加载巴比伦3D引擎

       var engine = new BABYLON.Engine(canvas, true);

       //创建场景

       var createScene = function () {

        var scene = new BABYLON.Scene(engine);

        //光源

        var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

        //相机

        var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);

        camera.attachControl(canvas, false);

        //机翻 第一个参数可以用来指定要导入的网格。我们导入所有网格

        //个人理解：查看过skull.babylon，是较为简单类似于JSON的格式。精细度比较高

        BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {

            // 相机的设置目标第一进口网

            camera.target = newMeshes[0];

        });

        // 光源绑定在相机上

        scene.registerBeforeRender(function () {

            light.position = camera.position;

        });

        return scene;

    }

        //赋予该场景于变量

        var scene = createScene();

        //在引擎中循环运行这个场景

        engine.runRenderLoop(function(){

            scene.render();

        });

        //追加事件：帆布与大小调整程序

        window.addEventListener('resize', function(){

            engine.resize();

        });

    });

</script>

</body>

</html>

文件大致的内容

【playground】-actions（活动）

源码：

var createScene = function () {

    var scene = new BABYLON.Scene(engine);

    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

    camera.setPosition(new BABYLON.Vector3(20, 200, 400));

    camera.attachControl(canvas, true);

    camera.lowerBetaLimit = 0.1;

    camera.upperBetaLimit = (Math.PI / 2) * 0.99;

    camera.lowerRadiusLimit = 150;

    scene.clearColor = new BABYLON.Color3(0, 0, 0);

    var light1 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);

    var light2 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);

    var light3 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);

    light1.diffuse = BABYLON.Color3.Red();

    light2.diffuse = BABYLON.Color3.Green();

    light3.diffuse = BABYLON.Color3.Blue();

    // Define states

    light1.state = "on";

    light2.state = "on";

    light3.state = "on";

    // Ground

    var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false);

    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);

    groundMaterial.specularColor = BABYLON.Color3.Black();

    ground.material = groundMaterial;

    // Boxes

    var redBox = BABYLON.Mesh.CreateBox("red", 20, scene);

    var redMat = new BABYLON.StandardMaterial("ground", scene);

    redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    redMat.emissiveColor = BABYLON.Color3.Red();

    redBox.material = redMat;

    redBox.position.x -= 100;

    var greenBox = BABYLON.Mesh.CreateBox("green", 20, scene);

    var greenMat = new BABYLON.StandardMaterial("ground", scene);

    greenMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    greenMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    greenMat.emissiveColor = BABYLON.Color3.Green();

    greenBox.material = greenMat;

    greenBox.position.z -= 100;

    var blueBox = BABYLON.Mesh.CreateBox("blue", 20, scene);

    var blueMat = new BABYLON.StandardMaterial("ground", scene);

    blueMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    blueMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    blueMat.emissiveColor = BABYLON.Color3.Blue();

    blueBox.material = blueMat;

    blueBox.position.x += 100;

    // Sphere

    var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 20, scene);

    var sphereMat = new BABYLON.StandardMaterial("ground", scene);

    sphereMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    sphereMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    sphereMat.emissiveColor = BABYLON.Color3.Purple();

    sphere.material = sphereMat;

    sphere.position.z += 100;

    // Rotating donut

    var donut = BABYLON.Mesh.CreateTorus("donut", 20, 8, 16, scene);

    // On pick interpolations

    var prepareButton = function (mesh, color, light) {

        var goToColorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", color, 1000, null, true);

        mesh.actionManager = new BABYLON.ActionManager(scene);

        mesh.actionManager.registerAction(

            new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", BABYLON.Color3.Black(), 1000))

            .then(new BABYLON.CombineAction(BABYLON.ActionManager.NothingTrigger, [ // Then is used to add a child action used alternatively with the root action.

                goToColorAction,                                                 // First click: root action. Second click: child action. Third click: going back to root action and so on...

                new BABYLON.SetValueAction(BABYLON.ActionManager.NothingTrigger, mesh.material, "wireframe", false)

            ]));

        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, mesh.material, "wireframe", true))

            .then(new BABYLON.DoNothingAction());

        mesh.actionManager.registerAction(new BABYLON.SetStateAction(BABYLON.ActionManager.OnPickTrigger, light, "off"))

            .then(new BABYLON.SetStateAction(BABYLON.ActionManager.OnPickTrigger, light, "on"));

    }

    prepareButton(redBox, BABYLON.Color3.Red(), light1);

    prepareButton(greenBox, BABYLON.Color3.Green(), light2);

    prepareButton(blueBox, BABYLON.Color3.Blue(), light3);

    // Conditions

    sphere.actionManager = new BABYLON.ActionManager(scene);

    var condition1 = new BABYLON.StateCondition(sphere.actionManager, light1, "off");

    var condition2 = new BABYLON.StateCondition(sphere.actionManager, light1, "on");

    sphere.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnLeftPickTrigger, camera, "alpha", 0, 500, condition1));

    sphere.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnLeftPickTrigger, camera, "alpha", Math.PI, 500, condition2));

    // Over/Out

    var makeOverOut = function (mesh) {

        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh.material, "emissiveColor", mesh.material.emissiveColor));

        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh.material, "emissiveColor", BABYLON.Color3.White()));

        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, "scaling", new BABYLON.Vector3(1, 1, 1), 150));

        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh, "scaling", new BABYLON.Vector3(1.1, 1.1, 1.1), 150));

    }

    makeOverOut(redBox);

    makeOverOut(greenBox);

    makeOverOut(blueBox);

    makeOverOut(sphere);

    // scene's actions

    scene.actionManager = new BABYLON.ActionManager(scene);

    var rotate = function (mesh) {

        scene.actionManager.registerAction(new BABYLON.IncrementValueAction(BABYLON.ActionManager.OnEveryFrameTrigger, mesh, "rotation.y", 0.01));

    }

    rotate(redBox);

    rotate(greenBox);

    rotate(blueBox);

    // Intersections

    donut.actionManager = new BABYLON.ActionManager(scene);

    donut.actionManager.registerAction(new BABYLON.SetValueAction(

        { trigger: BABYLON.ActionManager.OnIntersectionEnterTrigger, parameter: sphere },

        donut, "scaling", new BABYLON.Vector3(1.2, 1.2, 1.2)));

    donut.actionManager.registerAction(new BABYLON.SetValueAction(

        { trigger: BABYLON.ActionManager.OnIntersectionExitTrigger, parameter: sphere }

        , donut, "scaling", new BABYLON.Vector3(1, 1, 1)));

    // Animations

    var alpha = 0;

    scene.registerBeforeRender(function () {

        donut.position.x = 100 * Math.cos(alpha);

        donut.position.y = 5;

        donut.position.z = 100 * Math.sin(alpha);

        alpha += 0.01;

    });

    return scene;

}

效果

4个物品分别追加了点击事件，圆圈和绿色半球的碰撞事件

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>

    <title>Babylon - Getting Started</title>

    <!-- link to the last version of babylon -->

    <script src="js/babylon.2.2.max.js"></script>

</head>

<style>

    html, body {

        overflow: hidden;

        width   : 100%;

        height  : 100%;

        margin  : 0;

        padding : 0;

    }

    #renderCanvas {

        width   : 100%;

        height  : 100%;

        touch-action: none;

    }

</style>

<body>

    <canvas id="renderCanvas"></canvas>

    <script>

    window.addEventListener('DOMContentLoaded', function() {

        //获取画布对象

       var canvas = document.getElementById('renderCanvas');

       //加载巴比伦3D引擎

       var engine = new BABYLON.Engine(canvas, true);

       //创建场景

       var createScene = function () {

    var scene = new BABYLON.Scene(engine);

    //相机

    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

    camera.setPosition(new BABYLON.Vector3(20, 200, 400));

    camera.attachControl(canvas, true);

    //设置相机的限制

    camera.lowerBetaLimit = 0.1;

    camera.upperBetaLimit = (Math.PI / 2) * 0.99;

    camera.lowerRadiusLimit = 150;

    //场景清除颜色

    scene.clearColor = new BABYLON.Color3(0, 0, 0);

    //三个光源

    var light1 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);

    var light2 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);

    var light3 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);

    //光源的处理

    light1.diffuse = BABYLON.Color3.Red();

    light2.diffuse = BABYLON.Color3.Green();

    light3.diffuse = BABYLON.Color3.Blue();

    // 光源状态默认为开

    light1.state = "on";

    light2.state = "on";

    light3.state = "on";

    // 地面

    var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false);

    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);

    groundMaterial.specularColor = BABYLON.Color3.Black();

    ground.material = groundMaterial;

    // 红色箱子

    var redBox = BABYLON.Mesh.CreateBox("red", 20, scene);

    //材质

    var redMat = new BABYLON.StandardMaterial("ground", scene);

    redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    redMat.emissiveColor = BABYLON.Color3.Red();

    redBox.material = redMat;

    redBox.position.x -= 100;

    var greenBox = BABYLON.Mesh.CreateBox("green", 20, scene);

    var greenMat = new BABYLON.StandardMaterial("ground", scene);

    greenMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    greenMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    greenMat.emissiveColor = BABYLON.Color3.Green();

    greenBox.material = greenMat;

    greenBox.position.z -= 100;

    var blueBox = BABYLON.Mesh.CreateBox("blue", 20, scene);

    var blueMat = new BABYLON.StandardMaterial("ground", scene);

    blueMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    blueMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    blueMat.emissiveColor = BABYLON.Color3.Blue();

    blueBox.material = blueMat;

    blueBox.position.x += 100;

    //球

    var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 20, scene);

    var sphereMat = new BABYLON.StandardMaterial("ground", scene);

    sphereMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    sphereMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

    sphereMat.emissiveColor = BABYLON.Color3.Purple();

    sphere.material = sphereMat;

    sphere.position.z += 100;

    // 圆环（甜甜圈）

    var donut = BABYLON.Mesh.CreateTorus("donut", 20, 8, 16, scene);

    // 点击时候插入？

    var prepareButton = function (mesh, color, light) {

        //定义一个插入值得操作（触发方式，操作对象，操作属性，属性变更值，动画时间，未知，未知）

        var goToColorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", color, 1000, null, true);

        //针对对象增加活动管理器

        mesh.actionManager = new BABYLON.ActionManager(scene);

        //管理器注册新的活动

        mesh.actionManager.registerAction(

            new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", BABYLON.Color3.Black(), 1000))

        //Combine 结合活动?

            .then(new BABYLON.CombineAction(BABYLON.ActionManager.NothingTrigger, [

            /// /然后用于添加一个子行动与根行动或者使用。

                goToColorAction,

                // 首先点击:根行动。第二点:子的行动。第三点:回到根行动等等……

                //修改属性的活动

                new BABYLON.SetValueAction(BABYLON.ActionManager.NothingTrigger, mesh.material, "wireframe", false)

            ]));

        //修改材质类型

        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, mesh.material, "wireframe", true))

            .then(new BABYLON.DoNothingAction());

        //修改光源开关

        mesh.actionManager.registerAction(new BABYLON.SetStateAction(BABYLON.ActionManager.OnPickTrigger, light, "off"))

            .then(new BABYLON.SetStateAction(BABYLON.ActionManager.OnPickTrigger, light, "on"));

    }

    prepareButton(redBox, BABYLON.Color3.Red(), light1);

    prepareButton(greenBox, BABYLON.Color3.Green(), light2);

    prepareButton(blueBox, BABYLON.Color3.Blue(), light3);

    // 环形追加活动

    sphere.actionManager = new BABYLON.ActionManager(scene);

    //追加触发条件

    var condition1 = new BABYLON.StateCondition(sphere.actionManager, light1, "off");

    //追加触发条件

    var condition2 = new BABYLON.StateCondition(sphere.actionManager, light1, "on");

    //追加修正视角的活动

    sphere.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnLeftPickTrigger, camera, "alpha", 0, 500, condition1));

    sphere.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnLeftPickTrigger, camera, "alpha", Math.PI, 500, condition2));

    //追加修正视角的活动

    // 批量注册结束时候产生的活动

    var makeOverOut = function (mesh) {

        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh.material, "emissiveColor", mesh.material.emissiveColor));

        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh.material, "emissiveColor", BABYLON.Color3.White()));

        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, "scaling", new BABYLON.Vector3(1, 1, 1), 150));

        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh, "scaling", new BABYLON.Vector3(1.1, 1.1, 1.1), 150));

    }

    makeOverOut(redBox);

    makeOverOut(greenBox);

    makeOverOut(blueBox);

    makeOverOut(sphere);

    // 场景适用互动

    scene.actionManager = new BABYLON.ActionManager(scene);

    var rotate = function (mesh) {

        //每一帧触发的活动，时期转动

        scene.actionManager.registerAction(new BABYLON.IncrementValueAction(BABYLON.ActionManager.OnEveryFrameTrigger, mesh, "rotation.y", 0.01));

    }

    rotate(redBox);

    rotate(greenBox);

    rotate(blueBox);

    // 接触处理

    donut.actionManager = new BABYLON.ActionManager(scene);

    //当接触开始的时候触发活动

    donut.actionManager.registerAction(new BABYLON.SetValueAction(

        { trigger: BABYLON.ActionManager.OnIntersectionEnterTrigger, parameter: sphere },

        donut, "scaling", new BABYLON.Vector3(1.2, 1.2, 1.2)));

    //当接触完毕的时候触发活动

    donut.actionManager.registerAction(new BABYLON.SetValueAction(

        { trigger: BABYLON.ActionManager.OnIntersectionExitTrigger, parameter: sphere }

        , donut, "scaling", new BABYLON.Vector3(1, 1, 1)));

    // 动画

    var alpha = 0;

    //注册持续事件

    scene.registerBeforeRender(function () {

        donut.position.x = 100 * Math.cos(alpha);

        donut.position.y = 5;

        donut.position.z = 100 * Math.sin(alpha);

        alpha += 0.01;

    });

    return scene;

}

        //赋予该场景于变量

        var scene = createScene();

        //在引擎中循环运行这个场景

        engine.runRenderLoop(function(){

            scene.render();

        });

        //追加事件：帆布与大小调整程序

        window.addEventListener('resize', function(){

            engine.resize();

        });

    });

</script>

</body>

</html>

初学WebGL引擎-BabylonJS：第8篇-阴影网格与活动的更多相关文章

初学WebGL引擎-BabylonJS：第0篇-起因
学习WebGL的BabylonJS是在一次偶然的情况下进行的,主要为了满足个人对全栈开发的欲望. 言归正传,下面开始简单说说相关过程 WebGL是什么?WebGL是基于html的客户端页面技术,基于h ...
初学WebGL引擎-BabylonJS：第1篇-基础构造
继续上篇随笔步骤如下: 一:http://www.babylonjs.com/中下载源码.获取其中babylon.2.2.js.建立gulp项目
初学WebGL引擎-BabylonJS：第6篇-碰撞交错与挑选
[playground]-collisions(碰撞) 先贴官方源码(机器翻译版本) var createScene = function () { var scene = new BABYLON.S ...
初学WebGL引擎-BabylonJS：第2篇-基础模型体验
此次学习进度会比之前快很多,有了合适的学习方法后也就会有更多的乐趣产生了. 接上一章代码上章代码 <!DOCTYPE html> <html> <head> &l ...
初学WebGL引擎-BabylonJS：第4篇-灯光动画与丛林场景
前几章接触的案例都是接近静态的,由这张开始开始接触大量动态的内容,包括球体灯光,变动的形体,以及一个虚拟的丛林场景下章我会试着结合1-9案例的内容做出一个demo出来 [playground]-l ...
初学WebGL引擎-BabylonJS：第3篇-方向纹理与相机
[playground]-rotatuib abd scaling(方向) 源码 var createScene = function () { var scene = new BABYLON.Sce ...
[WebKit内核] JavaScript引擎深度解析--基础篇（一）字节码生成及语法树的构建详情分析
[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...
用基于WebGL的BabylonJS来共享你的3D扫描模型
转自:http://www.geekfan.net/6578/ 用基于WebGL的BabylonJS来共享你的3D扫描模型杰克祥子 2014 年 2 月 26 日 0 条评论标签:3D扫描 , B ...
VTemplate模板引擎的使用--高级篇
VTemplate模板引擎的使用--高级篇在网站中,经常会有某个栏目的数据在多个页面同时使用到.比如新闻网站或电子商务网站的栏目列表,几乎在很多页面都会显示栏目导航.对于这种多个页面同时使用到的“数 ...

随机推荐

.NETCore中实现ObjectId反解
前言在设计数据库的时候,我们通常需要给业务数据表分配主键,很多时候,为了省事,我都是直接使用 GUID/UUID 的方式,但是在 MonggoDB 中,其内部实现了 ObjectId(以下统称为Oi ...
【BZOJ4318】OSU! 题解（期望）
题目链接题目大意:给定$n$个操作的成功率$p[i]$.连续成功操作$m$次可以贡献$m^3$的分数.问期望分数. 对于$(x+1)^3$ $=x^3+3x^2+3x+1$ 每多连续成功一次,对答案 ...
Docker技术入门与实战
Docker技术入门与实战下载地址https://pan.baidu.com/s/1bAoRQQlvBa-PXy5lgIlxUg 扫码下面二维码关注公众号回复100011 获取分享码本书目录结 ...
解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)...
在IDEA中将xxxMapper.xml文件创建在(src/main/java)目录中,运行报错:org.apache.ibatis.binding.BindingException: Invalid ...
java_数组的定义与操作
数组定义和访问数组概念数组概念: 数组就是存储多个数据的容器,数组的长度固定,多个数据的数据类型要一致. 数组的定义方式一数组存储的数据类型[] 数组名字 = new 数组存储的数据类型[长度 ...
VMware启动CentOS出错，提示"该虚拟机似乎正在使用中"
今天在使用VMware启动CentOS时,出现如下图1错误提示: 当点击“确定”按钮时,出现如下图2错误提示: 无奈,只能点击图1 中的“取消”按钮,进行问题的跟踪.分析.经过核实,发现上述问题是由于 ...
【Linux】添加Nginx代理配置只允许内部IP访问
location / { index index.jsp; proxy_next_upstream http_500 http_502 http_503 http_504 error timeout ...
Spring quartz中取得ServletContext
在开发javaWeb定时任务的时候,有些处理要取得应用的相对路径,这就需要用到ServletContext取得到这个路径解决思路是在web应用启动时,把ServletContext提前注入到Sche ...
CSS 定位总结
目录元素显示模式元素模式元素显示模式转换 CSS定位机制静态定位static 相对定位relative 绝对定位absolute 固定定位fixed 粘性定位sticky 定位小结一图流 CS ...
TortoiseGit的使用（一）
博客园换了新颜,立刻给我的感觉就是还不如原来的老古董界面呢.没办法呀,毕竟主要是习惯了.咱也不吐槽了,慢慢地,习惯就好,博客园也在逐步改善. 目录 Git和TortoiseGit下载安装稍微笼统地介 ...

初学WebGL引擎-BabylonJS：第8篇-阴影网格与活动

初学WebGL引擎-BabylonJS：第8篇-阴影网格与活动的更多相关文章

随机推荐

热门专题