當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

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

發布時間：2023/10/11 综合教程 127 老码农

生活随笔收集整理的這篇文章主要介紹了初学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篇-阴影网格与活动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

综合教程

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

總結