7

私は、Vcom3D の Gesture Builder といくつかの点で非常によく似た、オープンな手話ジェスチャー ビルダーを開発しています。このページの下部にある製品デモを参照してください。

主な目標は、プラグインやブラウザー アドオンをインストールする必要なく、このアプリをすべての主要なブラウザーで動作させることです。

Vcom3D の Gesture Builder のアバターのように、制御可能な腕と指を持つ関節のある人間のキャラクターを作成する最も簡単な方法を見つけるのに問題があります。

ここに画像の説明を入力

MakeHuman や Blender など、3D モデルの開発に役立つ可能性のある多くの 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 に答える