Сочлененный 3D человек в HTML5

Question

Я разрабатываю конструктор жестов открытого языка жестов, в некотором роде очень похожий на Vest3D's Gesture Builder - см. Демо-версию продукта внизу this page.

Основная цель состоит в том, чтобы заставить это приложение работать во всех основных браузерах без необходимости устанавливать дополнения для плагина или браузера.

У меня возникли проблемы с поиском наиболее простым способом создания сочлененного человеческий характера, которые будут иметь управляемые руки и пальцы, так же, как аватар из Gesture Builder Vcom3D в:

Я гугл много, и проверяемый многие создатели трехмерных человеческих моделей/манипуляторы, такие как 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/