初学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模板引擎的使用--高级篇在网站中,经常会有某个栏目的数据在多个页面同时使用到.比如新闻网站或电子商务网站的栏目列表,几乎在很多页面都会显示栏目导航.对于这种多个页面同时使用到的“数 ...

随机推荐

stat 命令家族（1）- 详解 vmstat
性能测试必备的 Linux 命令系列,可以看下面链接的文章哦 vmstat 介绍 Virtual Meomory Statistics,报告虚拟内存统计信息会统计进程信息.内存.交换区.IO.磁盘. ...
020_go语言中的接口
代码演示 package main import ( "fmt" "math" ) type geometry interface { area() float ...
安卓APP开发的初步了解
今天成功安装了Android Studio 并且对APP的开发框架结构进行了初步了解如上图:app基本结构情况下面来仔细解释一下各个方面目录的作用首先 manifests目录:包含Android ...
Flask 框架小记
Flask 框架小记 Flask 实例创建示例的代码 from flask import Flask # __name__ 是模块名, 用于反射导入模块 app = Flask(__name__, ...
02【Collection、泛型】
主要内容 Collection集合迭代器增强for 泛型第一章 Collection集合 1.1 集合概述在前面基础班我们已经学习过并使用过集合ArrayList<E> ,那么集合 ...
Docker容器网络-实现篇
通常,Linux容器的网络是被隔离在它自己的Network Namespace中,其中就包括:网卡(Network Interface).回环设备(Loopback Device).路由表(Routi ...
2020-04-09：TCP的四次挥手中为什么要有TIME_WAIT状态？
TIME_WAIT状态存在有两个原因.<1>可靠终止TCP连接.如果最后一个ACK报文因为网络原因被丢弃,此时server因为没有收到ACK而超时重传FIN报文,处于TIME_WAIT状态 ...
Q#–一个新年愿望清单
本文章为机器翻译.https://blogs.msdn.microsoft.com/visualstudio/2018/12/24/qsharp-wish-list-for-new-year/# 在以 ...
Kafka2.6.0发布——性能大幅提升
近日Kafka2.6版本发布,距离2.5.0发布只过去了不到四个月的时间. Kafka 2.6.0包含许多重要的新功能.以下是一些重要更改的摘要: 默认情况下,已为Java 11或更高版本启用TLSv ...
Python 函数为什么会默认返回 None？
Python 有一项默认的做法,很多编程语言都没有--它的所有函数都会有一个返回值,不管你有没有写 return 语句. 本文出自"Python为什么"系列,在正式开始之前,我们就 ...

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

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

随机推荐

热门专题