Pełna strona CSS 3D - implementacja kamery

Chcę, aby moja strona była całkowicie przestrzenią 3D, nie wiem zbyt wiele o 3d, ale moim pomysłem jest, aby ciało było moim widokiem-portem, a świat jest divem, gdzie mój zawartość przekształcona znajduje się. Potrzebuję funkcji, która pobiera wektor orientacji i pozycji (lub obiektu kamery?) Jako parametr, a wewnętrznie z transformacjami CSS, przekształca świat div tak, aby ekran był skierowany do pożądanej części strony. Przykładowa strona, prosty pokój.Pełna strona CSS 3D - implementacja kamery

<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>

Scenariusz.

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

Jak funkcjonowałaby transform()? Nie jestem pewien, czy to właściwe podejście, czy powinienem zrobić to inaczej.

Źródło

2013-03-07 olanod

To wygląda jak duplikat http://stackoverflow.com/questions/7988874/webkit-3d-css-rotate-camera-like-in-a-first-person-shooter, który ma link do tego wpisu na blogu wyjaśniając jedno doświadczenie autorów: http://blog.keithclark.co.uk/creating-3d-worlds-with-html-and-css/ –

Keith Clark's CSS3 first-person shooter zdaje się wykorzystywać strukturę HTML jak poniżej:

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

W swoim demo „Camera” zajmuje się obrotem ale ruch jest obsługiwany przez tłumaczeniu „zespół”, który jest kontenerem dla reszta elementów. Ważnym elementem jest to, aby zastosować perspektywę do rzutni i zachować-3D do kamery tak, że prawdziwa przestrzeń 3D jest używany wewnątrz niego:

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

swoje elementy geometrii zagnieżdżone wewnątrz zespołu będą mieli 3D przekształca interpretować względem położenia zespołu ze względu na styl preserve-3d.

Możemy realizować swoje przekształcić funkcję coś takiego:

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)"; 
}

Oczywiście wszystkie powyższe obsługuje tylko smak pakietu WebKit 3D przekształca ale powinna być prosta sprawa, aby przedłużyć ten wspierać wariant Mozilla i standardowy (nieprefiksowany) wariant.

Źródło

2013-03-17 17:42:04

+1 za powiązanie tego CSS3 FPS ... absolutnie oszałamiające –

Doskonale, nie byłem świadomość, że było to możliwe dzięki HTML/CSS! Dziękuję Ci – Awena

Pełna strona CSS 3D - implementacja kamery

Odpowiedz

Powiązane problemy