ola*_*nod 6 3d camera css3 css-transforms
我希望我的页面完全是一个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()功能如何？我不确定这是否是正确的方法,或者我是否应该采取不同的方式.
Mar*_*ins 14
Keith Clark的CSS3第一人称射击游戏似乎使用如下的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变体和标准(非前缀)变体应该是一件简单的事情.