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 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎10 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip