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>

效果

相关推荐
IT_陈寒28 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start1 小时前
前端基础一、HTML5
前端·html·html5
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童1 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源