web-dev-qa-db-fra.com

Y at-il à TWO JS la contrepartie de THREE JS

Je progresse bien en apprenant ThreeJS en tant qu’interface avec WebGL. Merci à tous pour votre aide précédente.

Je développe une nouvelle approche de la dynamique 3D et souhaite un composant 3D dans le manuel. Des exemples se trouvent ici: http://eon.sdsu.edu/~impellus/DMF/

Ils ne sont pas les meilleurs, mais j'apprends.

En parallèle, je souhaiterais étudier certaines animations en statique 2D et en diagramme de corps libre 2D INTERACTIF. L’objectif est de présenter un objet, d’en découper certains aspects et de remplacer la section mise au rebut par des forces (essentiellement: construire de manière interactive des diagrammes de corps libres en supprimant des contacts). Normalement, je considérerais Flash, mais on m'a déconseillé de le faire.

Vous pouvez voir ici que j'ai utilisé threejs pour créer un tutoriel 2D sur les lignes de profil, lignes de repère, lignes de tracé:

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

Mais j’estime qu’il n’est pas naturel d’utiliser la puissance de threeJS pour des animations interactives 2D.

Donc, puis-je demander s'il existe une version Two JS de Three JS? Je pense que simplement poser la question devrait être une preuve de ce que je cherche, mais laissez-moi être plus clair. Je recherche une interface WebGL dédiée aux animations 2D. Oui, je peux utiliser trois JS, mais je pense que ce serait une erreur. Quelqu'un pourrait-il me guider?

28
Tom Impelluso

pixi.js vient de paraître - c'est un moteur 2D soutenu par WebGL pour des performances optimales, mais avec un repli de canevas 2D pour des raisons de compatibilité. Je ne l'ai pas utilisé moi-même mais ça vaut le coup de vérifier.

30
hughsk

Découvrez les deux.js de Jono Brandel!

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

Belle démonstration ici: http://jonobr1.github.io/two.js/

20
Matt Sweeney

J'ai aussi exploré l'utilisation d'un moteur 2D, mais finalement, je n'ai utilisé que Three.js. Si vous configurez votre caméra pour qu'elle ne se déplace jamais dans la direction Z et que vous placez tous les éléments visuels sur le même plan z = constant, il s'agit d'un moteur 2D.

La seule chose à laquelle vous devez vous attaquer est l'ordre z des éléments dans le plan. Pour ce faire, attribuez à chaque élément une valeur Z légèrement différente:

Par exemple, si vous dessinez sur le plan Z = 0, vous pouvez définir l’élément 1 à Z = 0 et l’élément 2 à Z = 0,0001, de sorte que l’élément 2 sera toujours dessiné au-dessus de l’élément 1. 

Un meilleur moyen d’atteindre l’ordre z serait de pirater le moteur et de définir l’ordre de dessin de chaque élément afin de forcer un élément à être dessiné avant un autre.

Un autre problème lié à l'utilisation de three.js est qu'au moment de l'écriture, il ne gère pas très bien les sprites 2D.

10
Jamie Fearon

J'ai trouvé IvanK assez rapide et complet, il a beaucoup plus de fonctionnalités que Pixijs.

Vérifiez-le (il a webgl, canvas, rendus svg avec support de secours automatique).

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

j'ai trouvé une autre bibliothèque, fabricjs.com, assez puissante mais lente.

5
Phyo Arkar Lwin

Tentez votre chance avec cette liste de moteurs de jeux Javascript:

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

Certains d'entre eux sont dédiés aux animations 2D avec des sprites ou à la physique de Box2d.

Il existe également des produits commerciaux permettant de dessiner des animations 2D au format HTML5, comme http://www.sencha.com/products/animator/

2
Mikko Ohtamaa

Si vous recherchez une visualisation 2D, votre meilleure option serait D3 ou Two.js:

https://d3js.org

https://two.js.org

Parfois, vous avez besoin d'un simple couteau pour beurrer des objets. Three.js est très semblable à une scie à chaîne lorsqu'il s'agit juste d'obtenir des graphiques fluides. Il est plus orienté vers la 3 dimensions. 

0
Konkret