3D房间，从零到移动观察3D房间

代码见我的github：

<a href="https://github.com/qq20004604/some_demo/tree/master/3d%e6%88%bf%e9%97%b4">https://github.com/qq20004604/some_demo/tree/master/3d%e6%88%bf%e9%97%b4</a>

demo地址见：（对手机不友好，不建议用手机打开，流量耗费约500kb）

<a href="http://jianwangsan.cn/3droom/3droom.html">http://jianwangsan.cn/3droom/3droom.html</a>

本文内容参考学习【张鑫旭】的文章所写。

demo链接域名为zhagnxinyu的，则引自其个人网站。

如果对某些概念不能理解，可以查看以下链接来看示意图。

参考链接：

<a href="http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/">http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/</a>

dom结构如下：

3d在z轴上的结构如下：

perspective：

translatez：

具体的话，请看demo图片（我自己画的）：

当视角固定时，某个动画元素靠近用户时，只能看到部分区域的示意图.png

简单来说，就是所有动画元素的根元素。

所有动画元素都在这个元素上显示，通过设置舞台元素的大小，可以控制显示动画元素的范围。

而通过设置overflow:hidden这样的属性，让动画元素不能超出舞台元素显示。

本属性是指，你从距离多少px的位置来查看该元素。

具体而言，指视角（人的眼睛），距离屏幕的距离，所看到的3d模型投影在舞台元素上的2d画面。

简单来说，你透过窗户往外看，窗口大小是固定的，当你距离窗户越近，能看到的外面景色就越多，当你距离窗户越远，能看到外面的景色就越小。（依然是参考上面那个图片）

设置这个属性，可以限制图片只在指定区域内显示。

用于方便容器定位其相对位置。

用于定位观察焦点在舞台元素上的位置，默认是居中。

将几个位置相关的动画元素放在同一个容器里，然后只需要设置他们相对于容器的位置即可。（例如创建一个长方体）

当需要调整动画元素的位置、旋转方向等时，只需要调整他们的容器的位置即可，便可以改变容器内所有元素的位置。

用于应用于父元素，设置其子元素是否继承3d，默认是flat（不继承），在使用3d时，应该使用preserve-3d这个值。

另外，【张鑫旭】的文章中说应该应用给舞台元素，但我在实践中发现，如果取消容器的该属性，单纯给舞台元素的话，则不能正常显示。

用于调整容器的位置。除了z之外，还可以修改x和y。或者干脆使用translate3d(x, y, z)这样的形式。

以下指容器移动相对于舞台元素

x：+右-左；

y：+下-上；（这个请参考html的xy轴坐标体系理解）

z：+近-远；

这2个属性用于对容器进行旋转。

简单来说，如果我们要旋转一个立方体，

首先，肯定要有一根轴线，即rotatex/y/z（沿x轴y轴z轴旋转）；

其次，我们需要确定这跟轴线在三维空间中的位置（注意，这里的三维空间，指的是相对于当前元素：如容器，的三维空间，而不是整个html的三维空间）；

因此，我们需要通过transform-origin给出的原点，来确定旋转时，坐标的基准点（即计算旋转时，x、y、z轴相交会的那个点）；有了点之后，再加上旋转轴就可以确定旋转情况了。

其中，transform-origin的x和y可以使用px也可以使用百分比（其左上角的点坐标为x:0, y:0），默认是50% 50%（居中）；

而默认z的值为0，可以使用px，但不能使用百分比。

至于rotatex(45deg)，表示沿x轴旋转45度，360deg是旋转一圈（和初始一样），正值是顺时针，负值是逆时针；

另外请注意，旋转的顺时针和逆时针跟轴的方向有关（x向右，y向下，z靠近用户）

多个动画元素放在同一个容器里，组成一个整体（比如说长方体）。

动画元素只需要考虑相对于容器的位置即可。

同容器元素

当元素是半透明时，则默认可以看到元素的背面情况。但若属性设置为hidden，则背面元素将不可见。

需要注意，旋转动画元素时，例如长100，宽100，深度是500时，我们需要设置上下左右四个方向的dom的基准位置。例如，放置于下方的元素，其除了设置transform-origin:0 100%;之外，应设置为bottom:0; left:0这样（只有这样才能构成一个长方体，不明白的话仔细想想，或者自己动手试试）

舞台元素

————】动画容器之根元素

————————】动画容器一

————————————】动画元素1、2、3……

————————】动画容器二

————————】动画容器三

由于所有的 动画元素 相对于 动画容器 的坐标是固定的；

动画容器元素 相对于 动画容器根元素 是固定的；

因此，只需要控制 动画容器跟元素 的旋转坐标圆心和旋转角度，即可形成整个场景的变换。

可能存在的潜在缺陷：假如场景里的结点很多，也许会有性能方面的问题？不确定。

有没有替代的方案？不确定

基础属性：

角度弧度换算：

xz平面上前进的计算函数：

前进行为完成的函数：

后退同理，其中计算坐标变化的函数，把+x变为-x（-x变为+x），z轴同理，变换正负即可。

向上看：

下来复习3d旋转的css属性：

因此，我们需要得知从哪里（观察点，即上面的x，y，z坐标）来旋转这个3d模型。

讲道理说，这个不是很好理解，需要有一定3d空间想象的能力。这里使用rotatey来确定左右旋转的情况，然后使用rotate3d来确定左右旋转后，上下旋转的情况。

1、由于我们已知当前点的x、y、z坐标，因此，在计算中假设其为0，在最终算出来的结果上再加上当前点的x、y、z坐标值即可；

2、我们需要有2个圆，第一个圆用于确定左右旋转，第二个圆用于确定上下旋转。

3、第一个圆使用rotatey属性，他的初始三点坐标是：圆心o(0,0,0)，圆顶点a(0,1,0)，圆第三点b(1,0,0)。这个圆面对的方向（ob射线的左边为面对方向，例如，初始情况下，面向指从(0,0,0)-(1,0,0)这个线段往(0,0,-1)-(1,0,-1)这个线段看去。注意：z轴远离我们是负值），即为我们观察的方向。其中：o和a为固定值，b点以o为圆心，长度1为半径，在xz轴平面移动，即可改变代表面向的方向。例如，当b旋转-90deg时，我们正好看向初始情况下，我们左手边（rotatey(-90deg)），此时，b坐标为(0,0,-1);

4、第二个圆根据第一个圆而变化。具体而言，第二个圆的圆心o为(0,0,0)，其中一个点为第一个圆的点b，另一个点初始是(0,1,0)，但无需去注意他，因为我们只需要知道第二个圆的倾斜角度即可，具体而言，是rotate3d的第四个参数。其中，正值往上看，负值往下看。

5、因此，我们最重要的是，计算出第一个圆的点b的坐标，而这个坐标，可以根据左右旋转时的角度得知。

6、计算方法：