7

我希望我的页面完全是一个 3D 空间，我对 3d 了解不多，但我的想法是让 body 成为我的视口，世界是我转换后的内容所在的 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()？我不确定这是否是正确的方法，或者我是否应该采取不同的做法。

4

1 回答 1

16

Keith Clark 的 CSS3 第一人称射击游戏似乎使用如下 HTML 结构：

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

在他的演示中，“相机”处理旋转，但移动是通过平移“组件”来处理的，“组件”是其余元素的容器。其中一个重要的部分是将透视应用到视口并将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 变体和标准（无前缀）变体应该是一件简单的事情。

于 2013-03-17T17:42:04.583 回答