HTML5の関節式3D人間

Question

私はVcom3Dのジェスチャービルダーと非常によく似たオープン手話ジェスチャービルダーを開発しています。this pageの製品デモをご覧ください。

主な目標は、プラグインやブラウザのアドオンをインストールする必要なく、すべての主要なブラウザでこのアプリケーションを動作させることです。私はたくさんググれ、チェック

：

私はちょうどVcom3Dのジェスチャービルダーからアバターとして、制御可能な腕と指を持っているでしょう関節型人間のキャラクターを作成する最も簡単な方法を、見つけるの問題を抱えていますMakeHumanやBlenderのような、3Dモデルを開発するのに役立つ多くの3Dヒューマンモデルの作成者やマニピュレータですが、HTML5環境内でどのように使用できるかわかりません。

ご意見はありますか？私はとても感謝しています！

編集： Chico3001は、JavascriptとHTML5要素を使用してアニメーションを実装する方法を説明する本当に良い回答です。しかし、私の本当の問題は、このようなアニメーションを作成するのに使うことができる比較的良い見た目のスプライトを作成する方法です。

Answer 1

のようなアニメーションを作るためにjqueryのプラグインを使用することができます：「？あなたは意味、あなたは宇宙船を構築したいのですが、自転車を構築する方法がわかりません」

私はスプライトが非常に遠くに役立つとは思わない。あなたのサンプルスクリーンショットは、オブジェクトを回転させたいということを示しています。また、シェーディングや他の素敵なエキストラを含む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

あなたはいくつかのアクション

を

HTML検知した場合に、その後、アニメーションを作成するために、canvas要素とJavaScriptを使用して画像を変更する必要があり

：

<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つのイメージの水平スプライトがあり、イメージの上を移動すると、最初の半分から2番目の半分に変化します。アプリケーションでは、多くのスプライトをロードする必要があります。その後、彼らに

を変更するあなたも、私はコメントを好きhttp://spritely.net/