babylon.js 3D人物动画实现(blender 制作)

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>

效果

相关推荐
蓝倾5 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove12 分钟前
常见 npm 报错问题
前端·npm
sunbyte12 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子13 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua17 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_33 分钟前
暑期前端训练day5
前端
uncleTom66639 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥42 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF1 小时前
如何 测试Labview是否返回数据 ?
前端
Spider_Man1 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm