Un umano 3D articolato in HTML5

Question

Sto sviluppando un generatore di gesti di linguaggio dei segni aperti, in qualche modo molto simile a Gesture Builder di Vcom3D: vedere la demo del prodotto nella parte inferiore di this page.

L'obiettivo principale è far funzionare questa app in tutti i principali browser senza la necessità di installare plug-in o componenti aggiuntivi del browser.

sto avendo problemi a trovare il modo più semplice per creare un carattere umano articolato, che avrebbe braccia e le dita controllabili, proprio come l'avatar dal costruttore Gesto di Vcom3D:

ho concentrandoci molto e controllato molti creatori/manipolatori di modelli umani 3D, come MakeHuman e Blender, che potrebbero essere utili per lo sviluppo di un modello 3D, ma non ho idea di come potrei usarlo all'interno di un ambiente HTML5.

Avete qualche idea? Sarei molto grato!

Modifica: Chico3001 ha fornito un'ottima risposta spiegando come implementare l'animazione utilizzando elementi Javascript e HTML5. Tuttavia, il mio vero problema è come creare sprite relativamente belli che potrei usare per creare tali animazioni?

Answer 1

Mi piace il commento: "Vuoi dire, si vuole costruire una navicella spaziale, ma non sai come costruire una moto"

Non penso che gli sprite ti aiuteranno molto lontano. Il tuo screenshot di esempio indica che vuoi ruotare gli oggetti e vuoi anche dargli un'idea di 3D, che include ombreggiature e altri extra interessanti.

Se qualcuno mi avrebbe guadagnare tempo (un sacco di tempo) e ho avuto il compito di costruire un costruttore gesto 3D, vorrei basare tutto il mio lavoro sulle cose del genere:

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

È necessario utilizzare elementi canvas e JavaScript per creare le animazioni, quindi modificare le immagini quando rileva alcune azioni

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); 
     } 
    }); 
}); 

Questo esempio carica uno sprite orizzontale con 2 immagini e quando ti sposti sopra l'immagine cambia dalla prima metà alla seconda metà, per la tua applicazione devi caricare molti sprite e poi cambiarli

è anche possibile utilizzare i plugin jQuery per fare animazioni come http://spritely.net/