国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

3D標簽云

chenjiang3 / 902人閱讀

摘要:資料正文部分了解了幾個公式之后,標簽云的旋轉其實就很簡單了。題外通過這次的練習才知道,學好數學是多么重要啊革命尚未成功,同志還需很努力參考文章解析標簽云,其實很簡單

開始之前

文章開始之前,應該了解幾個重要的公式。回憶一下我們逝去的高中。

重要概念:

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

弧度跟角度的轉換公式是:弧度 = π/180 * 角度。

公式:

1、在空間直角坐標系中,以坐標原點為球心,半徑為R的球面的參數方程為:

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

說明:θ為點跟圓心的連線與z軸的夾角,Φ是點跟圓心連線在xy平面投影線與x軸的夾角(可以根據需要建立不同的坐標系,或者取不同的夾角,坐標的表達方式可以有很多,但原理是類似的)。

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

2、旋轉公式:

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

說明:(x,y)是開始的坐標,θ是旋轉的角度,(x1,y1)是結束的坐標。球繞某一條軸的旋轉可以抽象成圓繞圓心旋轉,根據旋轉前的坐標和角度可以求出旋轉后的坐標。

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

正文部分

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

原理差不多說完了,接下來開始具體的代碼實現過程。

設置坐標

設置坐標是最重要,也是相對難的一步,因為我們要達到平均分布,避免分布太過集中或者重疊。因為半徑是固定的,所以我們從角度出發,調整角度達到平均分布的目的。接下來我們引入一位大神的式子,我也不知道出處是那里,但是確實很好用,式子如下:

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

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

具體的代碼如下:

分配坐標:

var init = function() {
    const tagEle = cloud.querySelectorAll(".tag"),
        tagLen = tagEle.length;
    for(let i = 0; i < tagLen; i++) {
        // 設置隨機坐標,平均分布
        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軸坐標: x=r*sinθ*cosΦ
            y = R * Math.sin(a) * Math.sin(b), // y軸坐標: x=r*sinθ*cosΦ
            z = R * Math.cos(a),        // z軸坐標: z=r*cosθ
            t = new tag(tagEle[i] , x , y , z);

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

設置坐標及參數:

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);
// 原點是 (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 都是取關于z坐標的遞增函數,所以可以根據需要調整函數達到更好的顯示效果。

旋轉

開始的時候我們簡單介紹了圓的旋轉,球的旋轉其實類似圓。例如繞z軸旋轉,其實改變的是x,y坐標的值,z坐標的值并沒有變化。理解了這一層,我們可以得出繞x軸旋轉的和y軸旋轉的函數,分別為:

/*
繞x軸旋轉
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軸旋轉
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的大小來達到旋轉的目的了,值越大,單位時間旋轉的角度越大,也就是旋轉的速度越快。當然,旋轉360度跟沒旋轉的效果是一樣的,所以我們應該合理的設置單位時間和每一次旋轉的角度值,讓我們的眼睛知道它是個球,它在轉!!!

全部代碼

這是我在百度前端學院的一個課程練習的代碼,代碼全部放在Github上,希望對您有一點幫助。同時,Github求關注!?。?/p>

預覽效果: http://alvin-liu.github.io/FrontCode/src/tagcloud/

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

結束

以上內容來自一個前端低手的個人總結與整理,不足之處,還請指正。

題外:通過這次的練習才知道,學好數學是多么重要啊!??!

革命尚未成功,同志還需很努力!!!

參考文章:

解析3D標簽云,其實很簡單

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81911.html

相關文章

  • 基于計算的軟件實現3D打印的潛力

    摘要:打印正在改變產品設計測試和制造的方式,而基于云計算的軟件也正在幫助打印實現它的潛力。例如,一直在用基于云計算的軟件來為客戶定制化制造一款名為的產品。今年月,另外一家主要的打印公司宣布他們將追求一種新的基于云計算的軟件策略。  3D打印正在改變產品設計、測試和制造的方式,而基于云計算的軟件也正在幫助3D打印實現它的潛力。在云計算的幫助下,任何能連上互聯網的人可以創造、調整存儲和流設計,并將二者...

    Tychio 評論0 收藏0
  • 計算將怎樣助力3D打印應用普及?

    摘要:打印正在改變產品設計測試和制造的方式,而基于云計算的軟件也正在幫助打印實現它的潛力。在云計算的幫助下,任何能連上互聯網的人可以創造調整存儲和流設計,并將二者發送到世界上任何地方的打印機上。  3D打印正在改變產品設計、測試和制造的方式,而基于云計算的軟件也正在幫助3D打印實現它的潛力。在云計算的幫助下,任何能連上互聯網的人可以創造、調整存儲和流設計,并將二者發送到世界上任何地方的3D打印機上...

    diabloneo 評論0 收藏0
  • Printr更新計算3D打印管理系統Formide

    摘要:近日,總部位于阿姆斯特丹的公司更新了其基于云計算的打印管理系統?;谠朴嬎愕拇蛴」芾硐到y的開發速度快,能提供超過桌面打印機自身的強大的功能,這非常令人著迷。比如,最新研制出的特色功能打印機的共享。更棒的是,公司宣布通過互聯網更新?! 〗?,總部位于阿姆斯特丹的Printr公司更新了其基于云計算的3D打印管理系統——Formide。2015年年初,這家公司發布了一款外形像寶石的3D打印機控制器...

    Jioby 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<