Question

我希望我的页面完全是一个3D空间，我不太了解3D，但我的想法是让身体成为我的视口，而世界是我转换内容所在的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()的功能如何？我不确定这是否是正确的方法，或者我是否应该以不同的方式进行。

Answer 1

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

由于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 3D页面 - 相机实现

1 个答案: