初学WebGL引擎-BabylonJS：第4篇-灯光动画与丛林场景 / 憋错料

前几章接触的案例都是接近静态的，由这张开始开始接触大量动态的内容，包括

球体灯光，变动的形体，以及一个虚拟的丛林场景

下章我会试着结合1-9案例的内容做出一个demo出来

【playground】-lights（灯光）

源码

var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    // Setup camera
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
    camera.setPosition(new BABYLON.Vector3(-10, 10, 0));
    camera.attachControl(canvas, true);

    // Lights
    var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 10, 0), scene);
    var light1 = new BABYLON.PointLight("Omni1", new BABYLON.Vector3(0, -10, 0), scene);
    var light2 = new BABYLON.PointLight("Omni2", new BABYLON.Vector3(10, 0, 0), scene);
    var light3 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene);

    var material = new BABYLON.StandardMaterial("kosh", scene);
    var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);

    // Creating light sphere
    var lightSphere0 = BABYLON.Mesh.CreateSphere("Sphere0", 16, 0.5, scene);
    var lightSphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene);
    var lightSphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene);

    lightSphere0.material = new BABYLON.StandardMaterial("red", scene);
    lightSphere0.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
    lightSphere0.material.specularColor = new BABYLON.Color3(0, 0, 0);
    lightSphere0.material.emissiveColor = new BABYLON.Color3(1, 0, 0);

    lightSphere1.material = new BABYLON.StandardMaterial("green", scene);
    lightSphere1.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
    lightSphere1.material.specularColor = new BABYLON.Color3(0, 0, 0);
    lightSphere1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);

    lightSphere2.material = new BABYLON.StandardMaterial("blue", scene);
    lightSphere2.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
    lightSphere2.material.specularColor = new BABYLON.Color3(0, 0, 0);
    lightSphere2.material.emissiveColor = new BABYLON.Color3(0, 0, 1);

    // Sphere material
    material.diffuseColor = new BABYLON.Color3(1, 1, 1);
    sphere.material = material;

    // Lights colors
    light0.diffuse = new BABYLON.Color3(1, 0, 0);
    light0.specular = new BABYLON.Color3(1, 0, 0);

    light1.diffuse = new BABYLON.Color3(0, 1, 0);
    light1.specular = new BABYLON.Color3(0, 1, 0);

    light2.diffuse = new BABYLON.Color3(0, 0, 1);
    light2.specular = new BABYLON.Color3(0, 0, 1);

    light3.diffuse = new BABYLON.Color3(1, 1, 1);
    light3.specular = new BABYLON.Color3(1, 1, 1);

    // Animations
    var alpha = 0;
    scene.beforeRender = function () {
        light0.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, 10 * Math.cos(alpha));
        light1.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, -10 * Math.cos(alpha));
        light2.position = new BABYLON.Vector3(10 * Math.cos(alpha), 0, 10 * Math.sin(alpha));

        lightSphere0.position = light0.position;
        lightSphere1.position = light1.position;
        lightSphere2.position = light2.position;

        alpha += 0.01;
    };

    return scene;
}

效果

笔记：

定义光源-点光源：

new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 10, 0), scene);//（3个光点）

定义光源-定向光源：

new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene);//（类似于太阳）

光源参数树立：

light0.diffuse = new BABYLON.Color3(1, 0, 0);//（扩散光源）
light0.specular = new BABYLON.Color3(1, 0, 0);//（镜面光源）

球体光源处理：

    lightSphere0.material.diffuseColor = new BABYLON.Color3(0, 0, 0);//（球体扩散光源）
    lightSphere0.material.specularColor = new BABYLON.Color3(0, 0, 0);//（球体镜面光源）
    lightSphere0.material.emissiveColor = new BABYLON.Color3(1, 0, 0);//（球体反射光源）

事件处理：

beforeRender

    var alpha = 0;
    scene.beforeRender = function () {
        light0.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, 10 * Math.cos(alpha));
        light1.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, -10 * Math.cos(alpha));
        light2.position = new BABYLON.Vector3(10 * Math.cos(alpha), 0, 10 * Math.sin(alpha));

        lightSphere0.position = light0.position;
        lightSphere1.position = light1.position;
        lightSphere2.position = light2.position;

        alpha += 0.01;
    };

以上代码基于alpha的自增，控制参数的变化

以上各参数还需要各位自行调节后run看看效果影响

【playground】-animations（动画）

源码

var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    //Boxes
    var box1 = BABYLON.Mesh.CreateBox("Box1", 10.0, scene);
    box1.position.x = -20;
    var box2 = BABYLON.Mesh.CreateBox("Box2", 10.0, scene);

    var materialBox = new BABYLON.StandardMaterial("texture1", scene);
    materialBox.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
    var materialBox2 = new BABYLON.StandardMaterial("texture2", scene);

    //Applying materials
    box1.material = materialBox;
    box2.material = materialBox2;

    //Positioning box
    box2.position.x = 20;

    // Creation of a basic animation with box 1
    //----------------------------------------

    //Create a scaling animation at 30 FPS
    var animationBox = new BABYLON.Animation("tutoAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    //Here we have chosen a loop mode, but you can change to :
    //  Use previous values and increment it (BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE)
    //  Restart from initial value (BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE)
    //  Keep the final value (BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT)

    // Animation keys
    var keys = [];
    //At the animation key 0, the value of scaling is "1"
    keys.push({
        frame: 0,
        value: 1
    });

    //At the animation key 20, the value of scaling is "0.2"
    keys.push({
        frame: 20,
        value: 0.2
    });

    //At the animation key 100, the value of scaling is "1"
    keys.push({
        frame: 100,
        value: 1
    });

    //Adding keys to the animation object
    animationBox.setKeys(keys);

    //Then add the animation object to box1
    box1.animations.push(animationBox);

    //Finally, launch animations on box1, from key 0 to key 100 with loop activated
    scene.beginAnimation(box1, 0, 100, true);

    // Creation of a manual animation with box 2
    //------------------------------------------
    scene.registerBeforeRender(function () {

        //The color is defined at run time with random()
        box2.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());

    });

    return scene;
}

效果

笔记

盒子动画

    var animationBox = new BABYLON.Animation("tutoAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

参数分别是：name，变化的值，频率（改成130可以看到绿色的跟抽风一样抖动），【该参数不确定】，频率结束后的处理类型

这里类型提供了以下几种（机器翻译）

/ /这里我们选择一个循环模式,但你可以改变:

/ /使用前值和增量(BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE)

/ /重新启动的初始值(BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE)

/ /保持最后的值(BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT)

接着定义动画过程中的参数

var keys = [];
    //At the animation key 0, the value of scaling is "1"
    keys.push({
        frame: 0,
        value: 1
    });

    //At the animation key 20, the value of scaling is "0.2"
    keys.push({
        frame: 20,
        value: 0.2
    });

    //At the animation key 100, the value of scaling is "1"
    keys.push({
        frame: 100,
        value: 1
    });

frame：为时间量

value：为属性值（此处为拉伸x的值）

//绑定值在动画中

animationBox.setKeys(keys);

//盒子加载动画

box1.animations.push(animationBox);

//场景内激活动画

scene.beginAnimation(box1, 0, 100, true);

以上为左边绿盒子的动画

面颜色闪动的动画代码如下

    scene.registerBeforeRender(function () {

        //The color is defined at run time with random()
        box2.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());

    });

通过Math的随机数改变box的三原色

【playground】-sprites（丛林场景）

废话不都说，先贴源码

var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    // Create camera and light
    var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
    var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);
    camera.attachControl(canvas, true);

    // Create a sprite manager to optimize GPU ressources
    // Parameters : name, imgUrl, capacity, cellSize, scene
    var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png", 2000, 800, scene);

    //We create 2000 trees at random positions
    for (var i = 0; i < 2000; i++) {
        var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
        tree.position.x = Math.random() * 100 - 50;
        tree.position.z = Math.random() * 100 - 50;
        tree.isPickable = true;

        //Some "dead" trees
        if (Math.round(Math.random() * 5) === 0) {
            tree.angle = Math.PI * 90 / 180;
            tree.position.y = -0.3;
        }
    }

    //Create a manager for the player‘s sprite animation
    var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "textures/player.png", 2, 64, scene);

    // First animated player
    var player = new BABYLON.Sprite("player", spriteManagerPlayer);
    player.playAnimation(0, 40, true, 100);
    player.position.y = -0.3;
    player.size = 0.3;
    player.isPickable = true;

    // Second standing player
    var player2 = new BABYLON.Sprite("player2", spriteManagerPlayer);
    player2.stopAnimation(); // Not animated
    player2.cellIndex = 2; // Going to frame number 2
    player2.position.y = -0.3;
    player2.position.x = 1;
    player2.size = 0.3;
    player2.invertU = -1; //Change orientation
    player2.isPickable = true;

    // Picking
    spriteManagerTrees.isPickable = true;
    spriteManagerPlayer.isPickable = true;

    scene.onPointerDown = function (evt) {
        var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
        if (pickResult.hit) {
            pickResult.pickedSprite.angle += 0.5;
        }
    };

    return scene;
}

效果

效果描述：

1.随机产生树。2.运动的小人。3.树的点击事件。4.镜头的处理

笔记

树的处理

//建立一个精灵？个人理解为一个对象的引入。英文描述提示利用GPU运算，并且提供参数，机翻效果如下：名称，图片地址，能力,调用大小,场景。//此处作为管理处

    var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png", 2000, 800, scene);

//随机产生树2000个

    for (var i = 0; i < 2000; i++) {

//创建树
        var tree = new BABYLON.Sprite("tree", spriteManagerTrees);

//树坐标随机
        tree.position.x = Math.random() * 100 - 50;
        tree.position.z = Math.random() * 100 - 50;

//提供选择事件
        tree.isPickable = true;

        //随机选择，处理旋转树的角度，并且固定树在一个平面
        if (Math.round(Math.random() * 5) === 0) {
            tree.angle = Math.PI * 90 / 180;
            tree.position.y = -0.3;
        }
    }

人物的处理(动的角色)

    var player = new BABYLON.Sprite("player", spriteManagerPlayer);
    player.playAnimation(0, 40, true, 100);//动画处理
    player.position.y = -0.3;//定位
    player.size = 1.3;//模型大小（）
    player.isPickable = true;//选择事件

人物的处理(静态的角色)

    // Second standing player
    var player2 = new BABYLON.Sprite("player2", spriteManagerPlayer);
    player2.stopAnimation(); // 静止的动画
    player2.cellIndex = 2; // 帧数
    player2.position.y = -0.3;
    player2.position.x = 1;
    player2.size = 0.3;
    player2.invertU = -1; //改变方向？
    player2.isPickable = true;

管理处添加点击事件与点击反应（此处点击事件为旋转方向）

    spriteManagerTrees.isPickable = true;
    spriteManagerPlayer.isPickable = true;

    scene.onPointerDown = function (evt) {
        var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
        if (pickResult.hit) {
            pickResult.pickedSprite.angle += 0.5;
        }
    };

本章就到这里，下一张我会集中前1-9章学习到的内容。建立一个小场景

时间： 2024-08-06 11:58:36

初学WebGL引擎-BabylonJS：第4篇-灯光动画与丛林场景

初学WebGL引擎-BabylonJS：第4篇-灯光动画与丛林场景的相关文章

初学WebGL引擎-BabylonJS：第0篇-起因

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

初学WebGL引擎-BabylonJS：第3篇-方向纹理与相机

WebGL入门教程第1篇——六色立方

[WebKit内核] JavaScript引擎深度解析--基础篇（一）字节码生成及语法树的构建详情分析

IOS开发核心动画篇---核心动画简介

iOS开发UI篇—核心动画(基础动画)

iOS开发UI篇—核心动画(转场动画和组动画)

iOS开发UI篇—核心动画(关键帧动画)