Conversione di dati OBJ in CSS3D

Ho trovato un sacco di formule e cosa no, ma il 3D non è il mio forte, quindi sono in perdita di cosa specificamente da usare. Il mio obiettivo è convertire i dati in un file obj 3D (vertici, normali, facce) in CSS3D (larghezza, altezza, rotateX, Y, Z e/o trasformazioni simili).Conversione di dati OBJ in CSS3D

Ad esempio 2 semplici piani

g plane1 
# simple along along Z axis 
v 0.0 0.0 0.0 
v 0.0 0.0 1.0 
v 0.0 1.0 1.0 
v 0.0 1.0 0.0 

g plane2 
# plane rotated 90 degrees along Y-axis 
v 0.0 0.0 0.0 
v 0.0 1.0 0.0 
v 1.0 1.0 0.0 
v 1.0 0.0 0.0 

f 1 2 3 4 
f 5 6 7 8

Potrebbe questi dati essere convertiti:

#plane1 { 
    width: X; 
    height: Y; 
    transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx) 
} 

#plane2 { 
    width: X; 
    height: Y; 
    transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx) 
} 

/* Or something equivalent such as transform: matrix3d() */

Il problema principale è come ottenere X/Y/Z-rotazione di un piano 4 punto dalla sua matrice di coordinate x, y, z?

UPDATE # 1 - 11/12/12 Quindi, sulla base delle risposte fornite, ho incontrato la funzione non ottimizzata da http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToEuler/index.htm di seguito:

/* 
    -v 0.940148 -0.847439 -1.052535 
    -v 0.940148 -0.847439 0.947465 
    -v -1.059852 -0.847439 0.947465 
    -v -1.059852 -0.847439 -1.052535 
    -v 0.940148 1.152561 -1.052534 
    -v 0.940147 1.152561 0.947466 
    -v -1.059852 1.152561 0.947465 
    v -1.059852 1.152561 -1.052535 

    f 1 2 3 4 
    f 5 8 7 6 
    f 1 5 6 2 
    f 2 6 7 3 
    f 3 7 8 4 
    f 5 1 4 8 
*/ 

var f = { 
    'm00' : 0.940148, 
    'm01' : -0.847439, 
    'm02' : -1.052535, 
    'm10' : 0.940148, 
    'm11' : -0.847439, 
    'm12' : 0.947465, 
    'm20' : -1.059852, 
    'm21' : -0.847439, 
    'm22' : 0.947465 
} 

// Assuming the angles are in radians. 
if (f.m10 > 0.998) { // singularity at north pole 
    heading = Math.atan2(f.m02, f.m22); 
    attitude = Math.PI/2; 
    bank = 0; 
} else if (f.m10 < -0.998) { // singularity at south pole 
    heading = Math.atan2(f.m02,f.m22); 
    attitude = -Math.PI/2; 
    bank = 0; 
} else { 
    heading = Math.atan2(-f.m20, f.m00); 
    bank = Math.atan2(-f.m12, f.m11); 
    attitude = Math.asin(f.m10); 
}

sto ottenendo risultati, ma io Non sono sicuro che i miei calcoli siano corretti e sto anche ottenendo risposte miste su ciò che corrisponde a quale asse. Intestazione = y, bank = x, e attitude = z? Sto anche convertendo ciascuno in gradi se questo è importante.

fonte

2012-11-09 Don Boots

possibile duplicato di Matrix per angoli di Eulero: http://stackoverflow.com/ questions/11137591/matrix-to-eulerangles – FlavorScape

Hai misurato le prestazioni? Crea benchmark con la quantità desiderata di trasformazioni css3d in base a valori di input casuali.Se rimarrà su una macchina bersaglio, il tuo lavoro sarà inutile. Il file obj medio contiene un'enorme quantità di facce. – JAre

Non era un problema di prestazioni. È venuto giù per palese matematica scorretta da parte mia. I file OBJ utilizzati sono stati creati appositamente pensando a CSS3D in modo che abbiano una quantità minima di poligoni. –

enter image description here

Leggi questo http://www.songho.ca/opengl/gl_matrix.html Spiega praticamente tutto e non v'è l'attuazione.

Oltre a ciò la soluzione CSS 3D avrà prestazioni inferiori (ordine di grandezza) principalmente perché ogni pice di superficie rappresentata è elemento DOM, è anche molto limitato - è possibile trovare numerosi materiali su questo problema (record IO di Google per esempio)

Se avete bisogno di framework dichiarativo 3D si potrebbe desiderare di guardare x3dom

per disegnare una casella 3D è sufficiente includere uno script js x3dom e incorporare questa dichiarazione nella tua pagina:

<body> 
    <h1>Hello X3DOM World</h1> 
    <x3d width="400" height="300"> 
    <scene> 
     <shape> 
     <box></box> 
     </shape> 
    </scene> 
    </x3d> 
</body>

Analizzerà i tag <x3d> sulla pagina e genererà un'implementazione WebGL o Flash appropriata con buone prestazioni.

x3d ha modo di importare risorse da Blender, Maya e 3ds Max. Ecco qualche buona lettura: x3domIntroTutorial.pdf

IE 11 sosterrà WebGL e IE10 verrà aggiornata automaticamente a IE 11 in modo che solo non supportare browser desktop (disabilitato per impostazione predefinita) sarà Safari. Apple sarà costretto ad abilitarlo per impostazione predefinita. Con il supporto completo del desktop non ci vorrà molto tempo per essere completamente mobile perché è un mercato altamente competitivo. E abbiamo un framework WebGL altamente accessibile come three.js. Quindi non v'è alcun senso nel farlo con i CSS 3D

AGGIORNAMENTO: iOS 8 Safari permetterà il supporto WebGL per impostazione predefinita: http://caniuse.com/webgl

fonte

2012-11-10 07:52:36 JAre

Grazie per l'aggiornamento. Di solito sono un ritardatario di questo tipo di tecnologie, ma le informazioni di cui sopra sono più che sufficienti per farmi iniziare su un percorso più corretto. –

@DonBoots I framework 3D consentono di rendere questa transizione il più agevole possibile. A questo punto, nessuno su questo pianeta può sapere tutto sulla grafica 3d è troppo grande e troppo profondo. Ma con un buon set di strumenti puoi imparare nuove cose gradualmente e fare affidamento sui comportamenti di default dei framework in alcuni casi complessi. – JAre

Conversione di dati OBJ in CSS3D

risposta

Problemi correlati