VR基础及其在页面级应用(3) — 场景基础
书接上文 VR基础及其在页面级应用(2) — 速度。 此系列的风格 —— 继续“点击这里”先查看例子。
通过前两篇的简要说明,了解了VR中的视角和位移的处理方法和原理。现在我们继续来简单的说一下 VR 场景的搭建。 本节文章很短,涉及知识也是大家常见的内容,但是非常重要,随便也培养一下3D场景的抽象感觉,以后就理解的快了。
页面 3D 基础
VR 场景肯定是一个 3D 立体场景,但“页面”只是一个2D平面。这就需要较多的利用 CSS3 的 3D 变化属性,这类相关的文章网上有的是。 在这里只提一下三个关联属性,用例子给你直接的感受。
例子代码:
<div class="wrapper" style="perspective: 1200px; perspective-origin: center center;">
<div class="stage" style="transform-style: preserve-3d;">
<section class="item" style="transform: rotateX(-45deg) translateZ(120px);"></section>
</div>
</div>
perspective
透视视距,这个要放在.wrapper
那一级。用于确定当前变换面距你的“眼睛”有多远。下图中的 d 就是假定你的眼睛到屏幕这张『纸』的距离,而 Z 就是『页面里的物体』在 z 轴方向上的位置,当 Z 的位置相对『纸』发生变化时,『物体』投映到屏幕上的真实大小就是
size = size * (d / (d-z))
这个很简单的公式,实际就是所谓『近大远小』的原理。
建议设置一个 >600 的值,太小的话页面元素“离你眼睛太近”,3D 变换时有可能会被你眼睛“挡住”哦。
perspective-origin
透视焦点,定义在.wrapper
上 。小时候学过素描画的童鞋应该对这个不陌生,就是你透视图的消失点,这个是整个立体图形透视角度的体现。要是没有立体抽象思维,也没学过素描(哈哈~)就多看看文章后面的例子吧。
transform-style
transform 变换的效果类型,定义在.stage
上。
有两个属性值:flat(默认) / preserve-3d,这个关系到你调制的各类 transform 变换以什么的效果展现。
这个没什么说的,在这里当然是用 preserve-3d
了。
一个综合的例子
在之前的文章里,给出过一个转动骰子的例子,以此为例,将上述的几个属性的动态变化呈现给大家。
通过以上三个属性完成整个立体场景的“舞台”搭建,我们就可以放开手脚正式布置场景了。
(下一篇:VR基础&页面级应用(4) — 场景搭建)