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

随机推荐

Redis服务之常用数据类型
上一篇博客我们聊了下redis的主从复制.aof持久化.集群.慢日志相关配置指令的说明,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13416534.html ...
Qt使用MD5加密
Qt中包含了大部分常用的功能,比如json.数据库.网络通信.串口通信以及今天说的这个MD5加密: Qt中将字符串进行MD5加密其实比较简单,代码如下: #include <QCoreAppli ...
“随手记”开发记录day03
今天完成了进入页面还有记账页面出现的问题,在登录页面中由于布局采用的错误后边的view把前面的view遮住,看不出来,我们查找方法,找到了设置权重的办法解决明天打算完成加号里面的内容
铁大树洞与市面上现有APP对比
写在前面铁大树洞这款APP严格来说并没有可以参照的对象,但如果非要说的话也可以有.这里我们选取百度贴吧进行对比. 百度贴吧可以看到,百度贴吧的贴吧首页排版要更加好看,且在首页添加了各种分类.也许我 ...
数据洞察 | Python解读地摊——你想好摆摊去卖什么了吗？
知乎上有一个问题:疫情结束后,你最想做的一件事是什么? 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去 ...
Hive: Reflect UDF
Reflect UDF JAVA类和方法通常用于处理用户希望在hive中使用的确切的函数.相比与封装一个UDF然后调用这个方法,这些方法主要通过反射UDF去调用.Reflect使用Java反射去实例 ...
牛客 51011 可达性统计（拓扑排序，bitset)
牛客 51011 可达性统计(拓扑排序,bitset) 题意: 给一个 n个点,m条边的有向无环图,分别统计每个点出发能够到达的点的数量(包括自身) \(n,m\le30000\). 样例: 10 1 ...
akka-typed(9) - 业务分片、整合，谈谈lagom, 需要吗？
在讨论lagom之前,先从遇到的需求开始介绍:现代企业的it系统变得越来越多元化.复杂化了.线上.线下各种系统必须用某种方式集成在一起.从各种it系统的基本共性分析:最明显的特征应该是后台数据库的角色 ...
.NET 跨平台框架Avalonia UI: 填坑指北(一)：熟悉UI操作
Avalonia 是一个跨平台的 .NET UI 框架,支持 Windows.Linux.Mac OSX... (以及Android IOS soon..) 本篇主要介绍Avalonia开发过程和L ...
看完就能掌握的PHP核心技术 - 面向对象
继承和多态类的组合与继承假设我们有两个类,一个 person,另外一个是 family:在 family 类中我们创建 person 类中的对象,并且我们把这个对象视为 family 类的一个属性 ...

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

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

随机推荐

热门专题