我希望我的页面完全是一个 3D 空间，我对 3d 知之甚少，但我的想法是让 body 成为我的视口(viewport)，而世界是我转换后的内容所在的 div。我需要一个将方向和位置向量(或相机对象？)作为参数并在内部使用 CSS 转换的函数，它使世界 div 转换，以便屏幕面向页面的所需部分。 示例页面，简单的房间。
<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() 函数会怎样？我不确定这是否是正确的方法，或者我是否应该采取不同的方法。
最佳答案
Keith Clark's CSS3 first-person shooter似乎使用如下 HTML 结构:
<div id="viewport">
<div id="camera">
<div id="assembly">
<!-- Geometry elements inside here -->
</div>
</div>
</div>
在他的演示中，“相机”处理旋转，但移动是通过平移“组件”来处理的，“组件”是其余元素的容器。其中一个重要的部分是将透视应用于视口(viewport)并将 preserve-3d 应用于相机，以便在其中使用真正的 3D 空间:
#viewport {
-webkit-perspective: 700px;
}
#camera {
-webkit-transform-style: preserve-3d;
}
由于 preserve-3d 样式，嵌套在程序集中的几何元素的 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)";
}
当然，以上所有仅支持 WebKit 的 3D 转换风格，但扩展它以支持 Mozilla 变体和标准(无前缀)变体应该是一件简单的事情。
关于css - 完整的 CSS 3D 页面 - 相机实现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15284044/