摘要：全景旋轉(zhuǎn)首先學(xué)習(xí)一下基礎(chǔ)坐標(biāo)系這個(gè)只要記住一下軸各自方向就可以，下面分析會(huì)用到。

從這里開始準(zhǔn)備攻略webgl（準(zhǔn)備挖新坑），F(xiàn)lutter框架當(dāng)然也會(huì)繼續(xù)補(bǔ)充，但是今天學(xué)習(xí)的不是webgl，而是css3d-engine這個(gè)庫(kù)，因?yàn)橹案慊顒?dòng)看到了一個(gè)全景旋轉(zhuǎn)活動(dòng)就是使用這個(gè)庫(kù)完成，頗為驚艷（一開始以為是webgl實(shí)現(xiàn)的，但是看了代碼才知道用CSS3就可以完成，雖然覺得還是應(yīng)該用webgl做比較合適），抱著好奇心于是學(xué)習(xí)一下，嗯，這個(gè)庫(kù)設(shè)計(jì)相當(dāng)精簡(jiǎn)，整個(gè)庫(kù)的代碼才800多行，所以代碼看下來沒啥壓力，今天順著一個(gè)例子來分析一下。

首先學(xué)習(xí)一下基礎(chǔ)坐標(biāo)系：

這個(gè)只要記住一下x,y,z軸各自方向就可以，下面分析會(huì)用到。

接下來就是今天分析的例子，也是來自css3d-engine的例子：

一個(gè)不停旋轉(zhuǎn)的全景圖，當(dāng)然我們把鏡頭拉開一點(diǎn)，發(fā)現(xiàn)其實(shí)它是一個(gè)圓柱體不停在旋轉(zhuǎn)：

只是我們的鏡頭剛好在圓柱體的里面，所以就看到全景圖不停在旋轉(zhuǎn)了。

再接著分析構(gòu)建整個(gè)場(chǎng)景的代碼：

 var s = new C3D.Stage();
 s.size(window.innerWidth, window.innerHeight).material({
    color: "#cccccc"
 }).update();

這里會(huì)初始化整個(gè)舞臺(tái)，也會(huì)創(chuàng)建默認(rèn)的攝像機(jī)：

initialize: function (params) {
    ...
    this.el.style[prefix + "Perspective"] = "800px";
    this.el.style[prefix + "TransformStyle"] = "flat";
    this.el.style[prefix + "Transform"] = "";
    this.el.style.overflow = "hidden";
    
    this.__rfix = new C3D.Sprite();
    this.el.appendChild(this.__rfix.el);
    
    this.__pfix = new C3D.Sprite();
    this.__rfix.el.appendChild(this.__pfix.el);
    
    this.setCamera(new C3D.Camera());
}

Stage初始化的時(shí)候，設(shè)置默認(rèn)的perspective是設(shè)為800px，而且會(huì)創(chuàng)建兩個(gè)Sprite輔助構(gòu)建場(chǎng)景（這兩個(gè)Sprite作用相當(dāng)?shù)拇?，?chǎng)景旋轉(zhuǎn)，拉進(jìn)拉遠(yuǎn)都是靠這兩個(gè)Sprite），最后設(shè)置攝像機(jī)；當(dāng)調(diào)起update方法然后會(huì)順著調(diào)起Stage的updateT方法：

updateT: function () {
            this.fov = fixed0(0.5 / Math.tan((this.camera.fov * 0.5) / 180 * Math.PI) * this.height);
            this.el.style[prefix + "Perspective"] = this.fov + "px";
            this.__rfix.position(fixed0(this.width / 2), fixed0(this.height / 2), this.fov).rotation(-this.camera.rotationX, -this.camera.rotationY, -this.camera.rotationZ).updateT();
            this.__pfix.position(-this.camera.x, -this.camera.y, -this.camera.z).updateT();
            return this;
        },

這里可以算是整個(gè)Stage計(jì)算的核心了，首先是Stage的fov計(jì)算，它依賴了Camera的fov，而Camera的fov默認(rèn)就是75（因?yàn)槿说挠行б暯蔷褪?5度），接著整個(gè)計(jì)算其實(shí)就是一個(gè)已知角度和對(duì)邊求鄰邊的公式：

這里計(jì)算方式其實(shí)出自Three.js，github上的討論。
回到Stage剛才初始化的時(shí)候，一開始一口氣創(chuàng)建三個(gè)嵌套的div:

我們?cè)趕tage設(shè)置好perspective屬性，在我的電腦（全屏）上計(jì)算出來的是619px，根據(jù)剛才的公式，是跟大家的瀏覽器高度有關(guān)，然后設(shè)置__rfix元素位置：屏幕居中，重點(diǎn)是Z軸位置的設(shè)置，可以看到設(shè)置的剛計(jì)算出來perspective等于translateZ(619px)，所以現(xiàn)在的位置（記住一開始的坐標(biāo)系，往屏幕外的為正，也就靠近視點(diǎn)）：

然后設(shè)置__pfix的位置，Z軸方向上，取了攝像機(jī)相反的方向，因?yàn)槲覀円话憷斫鈹z像機(jī)拉遠(yuǎn)拉近都是攝像機(jī)在移動(dòng)，但是整個(gè)場(chǎng)景往相反方向移動(dòng)其實(shí)也可以達(dá)到相同效果，所以這里就是整個(gè)場(chǎng)景移動(dòng)來到做到的：

現(xiàn)在再看，在剛才代碼可以看到當(dāng)camera的x,y,z更新的時(shí)候，其實(shí)通過位移__pfix來做到的；而camera的rotateX,rotageY,rotateZ更新的時(shí)候，則是通過旋轉(zhuǎn)__rfix來做到的。為什么這樣的設(shè)置，我們剛才看到__rfix把tranlateZ設(shè)置到視點(diǎn)上，其實(shí)目的是為了讓后面的元素可以以視點(diǎn)為原點(diǎn)進(jìn)行布局，這樣我們布局時(shí)可以通過控制跟視點(diǎn)的距離進(jìn)而控制用戶視野；而旋轉(zhuǎn)的時(shí)候也可以以視點(diǎn)為原點(diǎn)進(jìn)行旋轉(zhuǎn)，x，y，z移動(dòng)也是以視點(diǎn)為原點(diǎn)進(jìn)行，可以想象當(dāng)鏡頭拉遠(yuǎn)200px，再沿x軸旋轉(zhuǎn)45度的場(chǎng)景。

基本舞臺(tái)的構(gòu)建已經(jīng)明白了，繼續(xù)全景旋轉(zhuǎn)是怎樣做出來的：
首先整個(gè)場(chǎng)景是由20張129*1170的圖片組成一個(gè)圓柱體，那么這個(gè)圓柱體的半徑是多少尼？通過以下計(jì)算：

0.5* 129 / Math.tan(360 / 20 / 2 / 180 * Math.PI)

得出407px，所以代碼上把整個(gè)場(chǎng)景放到-400px也是應(yīng)該根據(jù)這個(gè)半徑得出來的：

  var pano = this.createPano(bgData, panoRect);
  pano.position(0, 0, -400).updateT();

所以現(xiàn)在整個(gè)場(chǎng)景是這樣的(可能橢圓更合適一點(diǎn)):

這個(gè)庫(kù)還是很不錯(cuò)的庫(kù)，也學(xué)習(xí)到一些3D相關(guān)的知識(shí)，可以考慮怎樣融入日常的活動(dòng)或者頁(yè)面里面，增加吸引力。