View on GitHub

Yinjie - GitHub.io

Welcome to the Yinjie's notes

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

perspective-origin

透视焦点,定义在.wrapper上 。小时候学过素描画的童鞋应该对这个不陌生,就是你透视图的消失点,这个是整个立体图形透视角度的体现。要是没有立体抽象思维,也没学过素描(哈哈~)就多看看文章后面的例子吧。

perspective-origin

transform-style

transform 变换的效果类型,定义在.stage上。 有两个属性值:flat(默认) / preserve-3d,这个关系到你调制的各类 transform 变换以什么的效果展现。 这个没什么说的,在这里当然是用 preserve-3d 了。

transform-style

一个综合的例子

在之前的文章里,给出过一个转动骰子的例子,以此为例,将上述的几个属性的动态变化呈现给大家。

通过以上三个属性完成整个立体场景的“舞台”搭建,我们就可以放开手脚正式布置场景了。

(下一篇:VR基础&页面级应用(4) — 场景搭建)