摘要：資料正文部分了解了幾個(gè)公式之后，標(biāo)簽云的旋轉(zhuǎn)其實(shí)就很簡單了。題外通過這次的練習(xí)才知道，學(xué)好數(shù)學(xué)是多么重要啊革命尚未成功，同志還需很努力參考文章解析標(biāo)簽云，其實(shí)很簡單

文章開始之前，應(yīng)該了解幾個(gè)重要的公式?；貞浺幌挛覀兪湃サ母咧?。

重要概念：

sinθ、cosθ的值得大小區(qū)間是[-1,1];

弧度跟角度的轉(zhuǎn)換公式是：弧度 = π/180 * 角度。

公式：

1、在空間直角坐標(biāo)系中，以坐標(biāo)原點(diǎn)為球心，半徑為R的球面的參數(shù)方程為:

x = r * sinθ * cosΦ;   
y = r * sinθ * sinΦ;  
z = r * cosθ;

說明：θ為點(diǎn)跟圓心的連線與z軸的夾角，Φ是點(diǎn)跟圓心連線在xy平面投影線與x軸的夾角（可以根據(jù)需要建立不同的坐標(biāo)系，或者取不同的夾角，坐標(biāo)的表達(dá)方式可以有很多，但原理是類似的）。

資料：http://baike.baidu.com/item/%E7%90%83%E9%9D%A2?fr=aladdin

2、旋轉(zhuǎn)公式：

x1 = cosθ * x - sinθ * y;
y1 = cosθ * y + sinθ * x;

說明：（x,y）是開始的坐標(biāo)，θ是旋轉(zhuǎn)的角度，（x1,y1）是結(jié)束的坐標(biāo)。球繞某一條軸的旋轉(zhuǎn)可以抽象成圓繞圓心旋轉(zhuǎn)，根據(jù)旋轉(zhuǎn)前的坐標(biāo)和角度可以求出旋轉(zhuǎn)后的坐標(biāo)。

資料：http://www.cnblogs.com/ywxgod/archive/2010/08/06/1793609.html

了解了幾個(gè)公式之后，3D標(biāo)簽云的旋轉(zhuǎn)其實(shí)就很簡單了。原理就是把標(biāo)簽當(dāng)成一個(gè)點(diǎn)，通過設(shè)置不同的θ，Φ把它們平均分布在球面的各個(gè)坐標(biāo)點(diǎn)上。 旋轉(zhuǎn)x軸或者y軸達(dá)到球體旋轉(zhuǎn)的目的。z軸是一條虛擬出來的軸，它與我們的屏幕垂直。我們不能真的實(shí)現(xiàn)一個(gè)立體的球體出來，但是我們可以通過"近大遠(yuǎn)小"達(dá)到視覺的欺騙，呈現(xiàn)一種立體的感覺。

原理差不多說完了，接下來開始具體的代碼實(shí)現(xiàn)過程。

設(shè)置坐標(biāo)是最重要，也是相對難的一步，因?yàn)槲覀円_(dá)到平均分布，避免分布太過集中或者重疊。因?yàn)榘霃绞枪潭ǖ?，所以我們從角度出發(fā)，調(diào)整角度達(dá)到平均分布的目的。接下來我們引入一位大神的式子，我也不知道出處是那里，但是確實(shí)很好用，式子如下：

θ = arccos(((2 * i) - 1) / len - 1);
Φ = θ * sqrt(len * π);

第一個(gè)式子arccos中的((2 * i) - 1) / len - 1其實(shí)是一個(gè)[-1,1]區(qū)間上關(guān)于0對稱分布的等差數(shù)列，通過反余弦轉(zhuǎn)換成弧度值，的確是一個(gè)很高明的式子，學(xué)渣的我確實(shí)想不出來。第二個(gè)式子，是關(guān)于θ的等差（變量只有θ），不過參數(shù)sqrt(len * π)的取值就不是很懂了，還望知情的大神告知。

具體的代碼如下：

分配坐標(biāo)：

var init = function() {
    const tagEle = cloud.querySelectorAll(".tag"),
        tagLen = tagEle.length;
    for(let i = 0; i < tagLen; i++) {
        // 設(shè)置隨機(jī)坐標(biāo)，平均分布
        let a = Math.acos((2 * (i + 1) - 1) / tagLen - 1),        // θ = arccos(((2*(i+1))-1)/len - 1)
            b = a * Math.sqrt(tagLen * Math.PI),  // Φ = θ*sqrt(all * π)
            x = R * Math.sin(a) * Math.cos(b), // x軸坐標(biāo): x=r*sinθ*cosΦ
            y = R * Math.sin(a) * Math.sin(b), // y軸坐標(biāo): x=r*sinθ*cosΦ
            z = R * Math.cos(a),        // z軸坐標(biāo): z=r*cosθ
            t = new tag(tagEle[i] , x , y , z);

        tagEle[i].style.color = "#" + Math.floor(Math.random() * 0xffffff).toString(16);    // 設(shè)置隨機(jī)顏色
        tags.push(t);
        t.move();    // 初始化位置
    }
    animate();  // 旋轉(zhuǎn)
};

設(shè)置坐標(biāo)及參數(shù)：

let scale = _focalLength / (_focalLength - this.z),
    alpha = (this.z + R) / (2 * R),
    ele = this.ele;
ele.style.fontSize = 14 * scale + "px";
ele.style.opacity = alpha + 0.5;
ele.style.zIndex = parseInt(scale * 100);
// 原點(diǎn)是 (cloud.offsetWidth/2, cloud.offsetHeight/2)
ele.style.left = this.x + cloud.offsetWidth / 2 - ele.offsetWidth/2 + "px";        
ele.style.top = this.y + cloud.offsetHeight / 2 - ele.offsetHeight/2 + "px";

scale、alpha 都是取關(guān)于z坐標(biāo)的遞增函數(shù)，所以可以根據(jù)需要調(diào)整函數(shù)達(dá)到更好的顯示效果。

開始的時(shí)候我們簡單介紹了圓的旋轉(zhuǎn)，球的旋轉(zhuǎn)其實(shí)類似圓。例如繞z軸旋轉(zhuǎn)，其實(shí)改變的是x,y坐標(biāo)的值，z坐標(biāo)的值并沒有變化。理解了這一層，我們可以得出繞x軸旋轉(zhuǎn)的和y軸旋轉(zhuǎn)的函數(shù)，分別為：

/*
繞x軸旋轉(zhuǎn)
y = ycosθ - zsinθ;
z = ysinθ + zcosθ;
*/
function rotateX() {
    let cos = Math.cos(angleX),
        sin = Math.sin(angleX);
    tags.forEach(function(tag) {
        let y = tag.y * cos - tag.z * sin,
            z = tag.z * cos + tag.y * sin;
        tag.y = y;
        tag.z = z;
    })
};
/*
繞y軸旋轉(zhuǎn)
x = xcosθ - zsinθ;
z = xsinθ + zcosθ;
*/
function rotateY() {
    let cos = Math.cos(angleY),
        sin = Math.sin(angleY);
    tags.forEach(function(tag) {
        let x = tag.x * cos - tag.z * sin,
            z = tag.z * cos + tag.x * sin;
        tag.x = x;
        tag.z = z;
    })
};

于是我們就能通過控制angleX、angleY的大小來達(dá)到旋轉(zhuǎn)的目的了，值越大，單位時(shí)間旋轉(zhuǎn)的角度越大，也就是旋轉(zhuǎn)的速度越快。當(dāng)然，旋轉(zhuǎn)360度跟沒旋轉(zhuǎn)的效果是一樣的，所以我們應(yīng)該合理的設(shè)置單位時(shí)間和每一次旋轉(zhuǎn)的角度值，讓我們的眼睛知道它是個(gè)球，它在轉(zhuǎn)?。?！

這是我在百度前端學(xué)院的一個(gè)課程練習(xí)的代碼，代碼全部放在Github上，希望對您有一點(diǎn)幫助。同時(shí)，Github求關(guān)注?。?！

預(yù)覽效果： http://alvin-liu.github.io/FrontCode/src/tagcloud/

代碼地址： https://github.com/Alvin-Liu/FrontCode/blob/gh-pages/src/tagcloud/js/tagcloud.js

以上內(nèi)容來自一個(gè)前端低手的個(gè)人總結(jié)與整理，不足之處，還請指正。

題外：通過這次的練習(xí)才知道，學(xué)好數(shù)學(xué)是多么重要?。。。?/p>

革命尚未成功，同志還需很努力！??！

參考文章：

解析3D標(biāo)簽云，其實(shí)很簡單