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、計算方法：