HTML5 中的铰接式 3D 人类

Question

我正在开发一个开放式手语手势生成器，在某些方面与 Vcom3D 的手势生成器非常相似 - 请参阅 this page 底部的产品演示。

主要目标是让这款应用在所有主流浏览器中都能正常运行，而无需安装插件或浏览器插件。

我很难找到最简单的方法来创建一个具有可控制手臂和手指的有关节的人类角色，就像 Vcom3D 的手势生成器中的化身一样：

我搜索了很多 3D 人体模型创建者/操纵器，例如 MakeHuman 和 Blender，这可能有助于开发 3D 模型，但我不知道如何在 HTML5 环境中使用它。

你有什么想法吗？非常感谢！

编辑： Chico3001 给出了一个非常好的答案，解释了如何使用 Javascript 和 HTML5 元素实现动画。然而，我真正的问题是如何创建可以用来创建此类动画的相对好看的精灵？

Answer 1

我喜欢这样的评论：“你的意思是，你想造一艘宇宙飞船，但不知道如何造一辆自行车？”

我认为这些精灵不会对你有太大的帮助。您的示例屏幕截图表明您想要旋转对象，并且您想要给它一个 3D 的概念，这涉及到阴影和其他不错的附加功能。

如果有人愿意为我争取时间（很多时间）并且我的任务是构建一个 3D 手势生成器，我会将我所有的工作都建立在这样的事情上：

http://de.wikipedia.org/wiki/Scalable_Vector_Graphics

http://www.lutanho.net/svgvml3d/

http://www.svgopen.org/2010/papers/58-WebGL__SVG/

http://javascript.open-libraries.com/multimedia/3d/svg-vml-3d-javscript-libraries/

http://debeissat.nicolas.free.fr/svg3d.php

Answer 2

您需要使用画布元素和javascript来创建动画，然后在检测到某些动作时更改图像

html:

<canvas id="#test" data-url="...url..."></canvas>

jquery:

$(document).ready(function(){
$('#test').each(function(index, element){
    var obj = $(this);
    var canvas = $(this)[0];
    var context = element.getContext('2d');

    var img = new Image();
    img.src = $(this).data('url');
    img.onload = function () {
        context.drawImage(img, 0, 0);
    };

    $(this).on({
        "mouseover" : function() {
            canvas.width = canvas.width;
            context.drawImage(img, img.width / 2,0,img.width / 2,img.height,0,0,img.width / 2,img.height);
        },
         "mouseout" : function() {
            canvas.width = canvas.width;
            context.drawImage(img, 0, 0);
        }
    });
});

这个例子加载了一个 2 图像水平精灵，当你在图像上移动时，它会从前半部分变为后半部分，对于你的应用程序，你需要加载许多精灵然后更改它们

你也可以使用jquery插件制作像http://spritely.net/这样的动画