Pagina Full CSS 3D - implementazione della telecamera

Voglio che la mia pagina sia completamente uno spazio 3D, non so molto di 3d ma la mia idea è avere il corpo come mio porto di visualizzazione e il mondo è un div dove il mio il contenuto trasformato risiede. Ho bisogno di una funzione che consideri un vettore di orientamento e posizione (o oggetto della fotocamera?) E internamente alle trasformazioni CSS trasforma il mondo div in modo che lo schermo sia rivolto verso la parte desiderata della pagina. Pagina di esempio, stanza semplice.Pagina Full CSS 3D - implementazione della telecamera

<body> 
    <div id="world"> 
     <section id="left-wall">...</section> 
     <section id="right-wall">...</section> 
     <section id="front-wall">...</section> 
     <section id="floor">...</section> 
    </div> 
</body>

La sceneggiatura.

var cam = Camera(), 
    world = document.getElementById("world"); 
cam.setPosition([x,y,z]); 
cam.setOrientation([x,y,z]); 
transform(world,cam); // world gets transformed

Come sarebbe la funzione transform()? Non sono sicuro se sia l'approccio corretto o se dovrei farlo in modo diverso.

fonte

2013-03-07 olanod

Questo sembra un duplicato di http://stackoverflow.com/questions/7988874/webkit-3d-css-rotate-camera-like-in-a-first-person-shooter che ha un collegamento a questo post del blog spiegando l'esperienza di un autore: http://blog.keithclark.co.uk/creating-3d-worlds-with-html-and-css/ –

Keith Clark's CSS3 first-person shooter sembra utilizzare una struttura HTML come il seguente:

<div id="viewport"> 
    <div id="camera"> 
     <div id="assembly"> 
      <!-- Geometry elements inside here --> 
     </div> 
    </div> 
</div>

Nel suo demo la "camera" gestisce la rotazione, ma il movimento è gestito dal traducendo il "montaggio", che è il contenitore per il resto degli elementi. Una parte importante di questo è di applicare la prospettiva alla finestra e conservare-3d alla telecamera in modo che un vero spazio 3D viene utilizzato al suo interno:

#viewport { 
    -webkit-perspective: 700px; 
} 
#camera { 
    -webkit-transform-style: preserve-3d; 
}

tuoi elementi geometrici annidati all'interno del gruppo avranno il loro 3D trasforma interpretato relativo alla posizione dell'assemblea a causa dello stile preserve-3d.

Possiamo quindi implementare la tua trasformare funzione simile a questa:

function transform(cameraElem, assemblyElem, camera) { 
    var orient = camera.getOrientation(); 
    var pos = camera.getPosition(); 
    cameraElem.style.WebkitTransform = "rotateX(" + orient[0] + "deg) " + 
             "rotateY(" + orient[1] + "deg) " + 
             "rotateZ(" + orient[2] + "deg)"; 
    assemblyElem.style.WebkitTransform = "translate3d(" + (-pos[0]) + "px, " + 
                  (-pos[1]) + "px, " + 
                  (-pos[2]) + "px)"; 
}

Naturalmente tutto quanto sopra supporta solo il sapore di WebKit del 3D trasforma ma dovrebbe essere una semplice questione di estendere questo per sostenere la variante di Mozilla e la variante standard (non prefissata).

fonte

2013-03-17 17:42:04

+1 per collegare quel CSS3 FPS ... assolutamente stupendo –

Eccellente, non ero consapevole che questo era possibile con HTML/CSS! Grazie – Awena

Pagina Full CSS 3D - implementazione della telecamera

risposta

Problemi correlati