1、前言

首先你得要有个模型，需要符合 mixamo 所需的格式。

本文将会用 moxamo 生成多个动画，然后使用 blender 合并到一个模型中，然后使用 babylonjs 进行调用。

2、mixamo 制作动画

在线免费制作动画，www.mixamo.com/

3、用 Blender 合并动画到一个角色

动画制作完毕后导入到 blender 中，我制作了三个动画。

给每个动画都改个名字，不然一会分不清。

多余的元素删除，只保留一个动画就行

删除完毕后

左下角的视图注意要选择"非线性动画"

4、添加动画

5、导出

选择全部后导出为 glb

6、到 babylon 提供的测试页面播放动画测试

sandbox.babylonjs.com/

7、使用 babylon 渲染模型

babylon 渲染模型是相当简单的。只需要加载引擎和对应的模型loader就行。然后直接拿到动画进行播放即可。

xml 复制代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Babylon Template</title>

    <style>  
        html,
        body { 
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0; 
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="./babylon.js"></script>
    <script src="./glTFFileLoader.js"></script>

</head>

<body>

    <canvas id="renderCanvas"></canvas>

    <script>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
        
        const scene = test();

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
            scene.render();
        });
        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
            engine.resize();
        });

 
        function test() { 
            var scene = new BABYLON.Scene(engine); 
            const camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, 0), scene);

            BABYLON.SceneLoader.ImportMesh("", "./models/ani/", "test.glb", scene, function (newMeshes, particleSystems, skeletons, animationGroups) {
                const hero = newMeshes[0]; 
                var skeleton = skeletons[0];

                scene.createDefaultCameraOrLight(true, true, true); 
                console.log(hero, skeleton, animationGroups) 
                const dh_0 = scene.getAnimationGroupByName("dh_0");
                const dh_1 = scene.getAnimationGroupByName("dh_1");
                const dh_2 = scene.getAnimationGroupByName("dh_2");
                dh_1.start(true, 1.0, dh_1.from, dh_1.to, false);
  
            });

            return scene;
        }
    </script>

</body>

</html>

效果

babylon.js 3D人物动画实现（blender 制作）