babylonjs 动画特效(一)

最新推荐文章于 2023-03-15 10:01:12 发布

qianbo_insist

最新推荐文章于 2023-03-15 10:01:12 发布

阅读量721

点赞数

分类专栏： babylonjs 文章标签： babylonjs 特效动画

本文链接：https://blog.csdn.net/qianbo042311/article/details/126318835

版权

babylonjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

babylonjs 动画特效

使用babylonjs的animation 动画来制作，方框围绕方形物体做心跳在这里插入图片描述

show me the code

<HTML>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

<body>

    <canvas width="1280" height="720"></canvas>
</body>    

<script>
    var canvas = document.querySelector("canvas");
    var engine = new BABYLON.Engine(canvas, true);
    
    
    var delayCreateScene = 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);

    var box1 = BABYLON.Mesh.CreateBox("Box1", 3.0, scene);

    var materialBox = new BABYLON.StandardMaterial("mat", scene);
    materialBox.diffuseColor = new BABYLON.Color3(1, 0, 0);

    box1.material = materialBox;

    //Create a scaling animation at 30 FPS
    var animationBox = new BABYLON.Animation("tutoAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    // 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
    });

    animationBox.setKeys(keys);

    box1.animations.push(animationBox);

    setTimeout(async () => {
        var anim = scene.beginAnimation(box1, 0, 100, false);

        console.log("before");
        await anim.waitAsync();
        console.log("after");
    });

    return scene;
}

var scene = delayCreateScene();


var points = [];
var linesArr = [];
var hl;
var LineColor = new BABYLON.Color3(1, 1, 0)
function create() {
    
        linesArr.length = 0;
        points.push(new BABYLON.Vector3(5, 0, 5));
        points.push(new BABYLON.Vector3(5, 0, -5));
        points.push(new BABYLON.Vector3(-5, 0, -5));
        points.push(new BABYLON.Vector3(-5, 0, 5));
        points.push(points[0]); 
        hl = new BABYLON.HighlightLayer("hl1", scene, true);
        hl.blurVerticalSize = 5; //模糊
        hl.blurHorizontalSize = 5;
    
        for (let i = 0; i < 1; i++) {
            let LineMesh = BABYLON.MeshBuilder.CreateLines("rect" + i, { points: points }, scene);
            linesArr.push(LineMesh);
            hl.addMesh(LineMesh, this.LineColor);
        }

    };
    function startAnimation() {
        const frameRate = 10;
        const xSlide = new BABYLON.Animation("xSlide", "position.y", frameRate, 
        BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        const keyFrames = [];
        keyFrames.push({
            frame: 0,
            value: 0
        });
        keyFrames.push({
            frame: 1 * frameRate,
            value: 5
        });
        keyFrames.push({
            frame: 2 * frameRate,
            value: 10        });
        xSlide.setKeys(keyFrames);
        linesArr.forEach((item, index) => {
            console.log(index)
            item.animations.push(xSlide);
            this.scene.beginAnimation(item, 0, (index + 1.5) * 3, true);
        })

    };

    create();
    startAnimation();
engine.runRenderLoop(function() {
    scene.render();
});

window.addEventListener("resize", function() {
    engine.resize();
})

</script>
</html>