32

WebGLへのインターフェースとしてThreeJSをよく学んでいます。皆様、前回はお世話になりました。

私は 3D ダイナミクスへの新しいアプローチを開発しており、教科書に 3D コンポーネントを追加したいと考えています。例はここにあります: http://eon.sdsu.edu/~impellus/DMF/

彼らは最高ではありませんが、私は学んでいます。

並行して、2D Statics と 2D INTERACTIVE Free Body Diagrams でいくつかのアニメーションを調査したいと思います。目標は、オブジェクトを提示し、その側面をスライスして、破棄されたセクションを力に置き換えることです (基本的には、接触を削除して自由体ダイアグラムをインタラクティブに構築することです)。通常、私は Flash を検討しますが、使用しないようにアドバイスされています。

ここで、threejs を使用してストリームライン、ストリークライン、パスラインに関する 2D チュートリアルを作成したことがわかります。

http://eon.sdsu.edu/~impellus/FLOW/

しかし、2D インタラクティブ アニメーションに threeJS の機能を使用するのは不自然だと感じています。

では、Three JS の Two JS バージョンがあるかどうかお尋ねしてもよろしいですか? 質問をするだけで、私が探しているものの証拠になるはずだと思いますが、もっと明確にさせてください。2D アニメーション専用の webGL へのインターフェイスを探しています。はい、threeJS を使用できますが、それは間違いだと思います。誰かが私を案内してもらえますか？

4

6 に答える 6

35

pixi.jsはつい最近リリースされました。これは、パフォーマンスのために WebGL に支えられた 2D エンジンですが、互換性のために 2D キャンバス フォールバックを備えています。私自身は使用していませんが、チェックする価値があります。

于 2013-03-24T02:48:26.597 に答える
21

Jono Brandel の two.js をチェックしてください。

https://github.com/jonobr1/two.js

素敵なデモ: http://jonobr1.github.io/two.js/

于 2013-04-17T22:22:42.850 に答える
13

2D エンジンの使用も検討しましたが、最終的には Three.js を使用しました。カメラが Z 方向に動かないように設定し、すべてのビジュアル要素を同じ z = 一定平面に配置する場合、それは 2D エンジンです。

対処しなければならない唯一のことは、平面上の要素の z オーダーです。これを行う 1 つの方法は、各要素にわずかに異なる Z 値を割り当てることです。

たとえば、Z = 0 平面に描画している場合、要素 1 を Z = 0 に描画し、要素 2 を Z = 0.0001 に描画するように設定すると、要素 2 は常に要素 1 の上に描画されます。

z オーダーを実現するより良い方法は、エンジンをハックして各要素の描画順序を設定し、ある要素を別の要素の前に強制的に描画することです。

また、three.js を使用する際のもう 1 つの問題は、(執筆時点では) 2D スプライトをうまく処理できないことです。

于 2012-07-13T11:28:24.897 に答える
5

IvanK は非常に高速で、Pixijs よりも多くの機能を備えていることがわかりました。

確認してください (自動フォールバックをサポートする webgl、canvas、svg レンダラーがあります)。

http://lib.ivank.net/?p=デモス

私は別のライブラリである fabricjs.com を見つけました。これは非常に強力ですが遅いです。

于 2013-04-26T17:59:03.907 に答える
2

この Javascript ゲーム エンジン リストで運試しをしてみてください:

https://github.com/bebraw/jswiki/wiki/Game-Engines

それらのいくつかは、スプライトまたは Box2d 物理を使用した 2D アニメーション専用です。

また、 http://www.sencha.com/products/animator/のように、2D HTML5 アニメーションを描画するための商用製品もあります。

于 2012-07-12T21:17:17.090 に答える