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

随机推荐

面试必问的volatile关键字
原文: 卡巴拉的树 https://juejin.im/post/5a2b53b7f265da432a7b821c 在Java相关的岗位面试中,很多面试官都喜欢考察面试者对Java并发的了解程度, ...
不使用spring-boot-starter-parent作为依赖parent
背景环境在某些情况下由于某些原因,我们的项目不能使用spring-boot-starter-parent作为<parent>依赖,一定要有自己的<parent>,但同时还希望 ...
Tarjan算法学习笔记
前排提示:先学习拓扑排序,再学习Tarjan有奇效. -------------------------- Tarjan算法一般用于有向图里强连通分量的缩点. 强连通分量:有向图里能够互相到达的点的集 ...
JDBC报错:Cannot find class: com.mysql.jdbc.Driver
连接数据库的jar出现异常(通常报错:Cannot find class:com.mysql.jdbc.Drive), 问题:Connector的jar已经导入,还是出现 Cause: java.sq ...
Windows系统护眼色设置
Win10&Win8系统设置护眼色1. windows+R键调出运行窗口(或者鼠标右击开始键,选择运行)2. 在运行窗口中输入 regedit 调出注册表编辑器3. 按照如下顺序找到windo ...
面经手册 · 第2篇《数据结构，HashCode为什么使用31作为乘数？》
作者:小傅哥博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言在面经手册的前两篇介绍了<面试官都问我啥>和<认知自己的技术栈盲区 ...
记Java中有关内存的简单认识
一.Java内存划分分为五个部分,可以参考这篇笔记简单认识一下: https://www.cnblogs.com/unleashed/p/13268027.html 栈堆方法区本地方法栈寄存 ...
Springboot2.x整合logback slf4j
Springboot项目的pom里引入的parent <parent> <groupId>org.springframework.boot</groupId> &l ...
itest(爱测试) 开源一站式敏捷测试管理平台&极简项目管理,重大升级(接口测试)6.0.0 发布
itest 简介 itest 开源敏捷测试管理,testOps 践行者,极简的任务管理,测试管理,缺陷管理,测试环境管理,接口测试5合1,又有丰富的统计分析.可按测试包分配测试用例执行,也可建测试迭代 ...
MIT 6.828 | JOS | 关于虚拟空间和物理空间的总结
Question: 做lab过程中越来越迷糊,为什么一会儿虚拟地址是4G 物理地址也是4G ,那这有什么作用呢? 解决途径: 停下来,根据当前lab的进展,再回头看上学期操作系统的ppt & ...

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

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

随机推荐

热门专题