完整的CSS 3D頁面 - 相機實現

我希望我的頁面完全是3D空間，我對3D不太瞭解，但我的想法是讓身體成爲我的視口，而世界是一個div，轉換的內容駐留。我需要一個將方向和位置矢量（或相機對象？）作爲參數並在內部使用CSS轉換的函數，它可以轉換世界div，以便屏幕面向頁面的所需部分。示例頁面，簡單的空間。完整的CSS 3D頁面 - 相機實現

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

腳本。

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

transform()函數是怎麼回事？我不確定這是否是正確的方法，或者我應該採取不同的方式。

來源

2013-03-07 olanod

這感覺像是一個http://stackoverflow.com/questions/7988874/webkit-3d-css-rotate-camera-like-in-a-first-person-shooter的副本，它有一個鏈接到這篇博文解釋一個作者的經驗：http://blog.keithclark.co.uk/creating-3d-worlds-with-html-and-css/ – 2013-03-17 17:09:55

Keith Clark's CSS3 first-person shooter似乎用一個HTML結構如下所示：

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

在他演示了「相機」處理旋轉，但運動是翻譯「集結號」，這是集裝箱的處理其餘的元素。這方面的一個重要組成部分，是對3D保存，應用透視視口和相機，使真正的3D空間的使用它裏面：嵌套在組件內

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

你的幾何元素都會有自己的3D轉換解釋由於preserve-3d風格，相對於組件的位置。

然後我們就可以實現你的變換函數是這樣的：

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

當然，以上所有的只支持3D的WebKit的味道轉換，但它應該是一個簡單的事情擴展，以支持Mozilla的變種和標準（非前綴）變體。

來源

2013-03-17 17:42:04

+1爲鏈接，CSS3的FPS ...絕對令人驚歎 – 2013-03-18 12:45:29

優秀，我不是意識到這可能與HTML/CSS！謝謝 – Awena 2014-09-14 18:47:24

完整的CSS 3D頁面 - 相機實現

回答

相關問題