web-dev-qa-db-ja.com

THREE JSの2つのJSカウンターパートにありますか

私はWebGLへのインターフェースとしてThreeJSをよく学んでいます。これまでのご協力ありがとうございます。

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

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

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

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

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

しかし、私の気持ちは、2DインタラクティブアニメーションにthreeJSのパワーを使用することは自然ではないということです。

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

30
Tom Impelluso

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

31
hughsk

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

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

ここで素晴らしいデモ: http://jonobr1.github.io/two.js/

20
Matt Sweeney

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スプライトをうまく処理できないことです。

10
Jamie Fearon

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

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

http://lib.ivank.net/?p=demos

別のライブラリ、fabricjs.comを見つけました。非常に強力ですが遅いです。

5
Phyo Arkar Lwin

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

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

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

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

2
Mikko Ohtamaa

2D視覚化を探している場合、最適なオプションはD3またはTwo.jsです。

https://d3js.org

https://two.js.org

時々、物事をバターで覆うために簡単なナイフが必要になることがあります。 Three.jsは、滑らかなグラフィックを実現するという点では、チェーンソーに非常によく似ています。それは、より3次元に向けられています。

0
Konkret