È presente alla controparte TWO JS di THREE JS

Question

Mi sto muovendo bene imparando ThreeJS come interfaccia a WebGL. Grazie a tutti per il vostro aiuto precedente.

Sto sviluppando un nuovo approccio a 3D Dynamics e vorrei un componente 3D per il libro di testo. Gli esempi si trovano qui: http://eon.sdsu.edu/~impellus/DMF/

Non sono i migliori, ma sto imparando.

In parallelo, vorrei esaminare alcune animazioni in Statistica 2D e Diagramma corpo libero INTERACTIVE 2D. L'obiettivo è presentare un oggetto, suddividerne gli aspetti e sostituire la sezione scartata con le forze (in pratica: per costruire in modo interattivo diagrammi corporei liberi rimuovendo i contatti). Normalmente, considererei Flash, ma mi è stato consigliato di non farlo.

Si può vedere qui che ho usato threejs per creare un tutorial 2D su linee di corrente, streaklines, pathlines:

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

Ma la mia sensazione è che non è naturale per utilizzare la potenza di threeJS per il 2D animazioni interattive.

Quindi posso chiedere se esiste una versione Two JS di Three JS? Penso che solo la domanda debba essere la prova di ciò che sto cercando, ma vorrei essere più chiaro. Sto cercando un'interfaccia per WebGL dedicata alle animazioni 2D. Sì, posso usare threeJS, ma penso che sarebbe un errore. Qualcuno potrebbe guidarmi?

Answer 1

Tenta la fortuna con questa lista motore di gioco Javascript:

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

Alcuni di essi sono dedicati alle animazioni 2D con sprite o Box2D fisica.

Inoltre vi sono prodotti commerciali per disegnare animazioni 2D HTML5, come http://www.sencha.com/products/animator/

Answer 2

Ho anche esplorato l'uso di un motore 2D ma alla fine appena usato Three.js. Se si imposta la videocamera in modo che non si muova mai nella direzione Z e si inseriscano tutti gli elementi visivi sullo stesso z = piano costante, si tratta di un motore 2D.

L'unica cosa che dovresti affrontare è l'ordine z degli elementi sull'aereo. Un modo per assegnare a ogni elemento un valore Z leggermente diverso:

Ad esempio, se stai disegnando sul piano Z = 0, puoi impostare l'elemento 1 da disegnare su Z = 0 e l'elemento 2 su Z = 0.0001, quindi l'elemento 2 sarà sempre disegnato sopra l'elemento 1.

Un modo migliore per ottenere z-order sarebbe hackerare il motore e impostare l'ordine di disegno per ciascun elemento in modo da forzare un elemento da disegnare prima di un altro

Un altro problema nell'utilizzo di three.js è che (al momento della scrittura) non gestisce molto bene gli sprite 2D.

Answer 3

pixi.js è stato rilasciato di recente: è un motore 2D supportato da WebGL per le prestazioni, ma con un fallback di tela 2D per compatibilità. Non l'ho usato da solo, ma vale la pena di provarlo.

Answer 4

Dai un'occhiata a Jono Brandel's two.js!

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

Nizza demo qui: http://jonobr1.github.io/two.js/

Answer 5

ho trovato IvanK abbastanza veloce e funzionalità di completarlo hanno un sacco più caratteristiche che Pixijs.

Controllarlo (dispone di renderer webgl, canvas, svg con supporto automatico di fallback).

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

ho trovato un'altra libreria, fabricjs.com, abbastanza potente ma lento.