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

时间：2016-02-17 22:26:09 阅读：5301 评论：0 收藏：0 [点我收藏+]

标签：

【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;
}

View Code

效果

技术分享

笔记

这期官方下载包无图，建议将前面地图那节的图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;
}

View Code

效果

技术分享

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篇-阴影网格与活动

标签：

原文地址：http://www.cnblogs.com/slxb/p/5155274.html

踩

(1)

(2)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行