基于HTML5的铰接式三维人体

Question

我正在开发一个开放的手语手势生成器，在某些方面非常类似于Vcom3D的手势生成器--参见此页底部的产品演示。

其主要目标是使该应用程序在所有主要浏览器中工作，而不需要安装插件或浏览器插件。

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

​

​

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

你有什么想法吗？我会非常感激的！

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

Answer 1

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

我认为精灵帮不了你多大的忙。你的例子截图表明你想旋转物体，你也想给它一个3D的概念，这涉及到阴影和其他好的额外。

如果有人给我争取时间(很多时间)，而我的任务是建立一个3D手势生成器，我会把我所有的工作都建立在这样的基础上：

图形

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/这样的动画。

Answer 3

TensorFlow.js用户在JavaScript中发布了一个通用手势识别库：https://youtu.be/uU-u-5Eo65g?t=243，名为Project。