7

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

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

我在寻找最简单的方法来创建清晰的人类角色时遇到问题，该方法将具有可控制的手臂和手指，就像 Vcom3D 的 Gesture Builder 中的化身一样：

在此处输入图像描述

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

你有什么想法？我将不胜感激！

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

4

2 回答 2

4

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

我不认为精灵会帮助你很远。您的示例屏幕截图表明您想要旋转对象，并且您想要给它一个 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

于 2013-10-18T12:26:19.607 回答
3

您需要使用画布元素和 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/

于 2013-10-12T03:49:25.553 回答