Three.JS-學習 The WebGL earth (1)---globe.html 分析

【Three.JS】The WebGL earth (1)

　　上一篇中總結了threejs的學習資料，將webgl earth 做爲學習的一個目標。 初步經過學習想達到目的以下：

（1）javascript 語言的深刻理解

（2）js 如何開發複雜的程序

（3）globe 紋理是如何貼圖的

　　首先來看一個這個程序的構成，打開 earth.html  引用的幾個js文件：

1 <script type="text/javascript" src="./js/ThreeWebGL.js"></script>
2 <script type="text/javascript" src="./js/ThreeExtras.js"></script>
3 <script type="text/javascript" src="./js/RequestAnimationFrame.js"></script>
4 <script type="text/javascript" src="./js/Detector.js"></script>
5 <script type="text/javascript" src="./js/Tween.js"></script>
6 <script type="text/javascript" src="./js/globe.js"></script>
7 <script type="text/javascript">

View Code

一、ThreeWebGL.js   threejs的 JavaScript 3D library 庫文件

二、ThreeExtras.js  threejs 擴展庫文件

三、RequestAnimationFrame.js  這個與動畫有關，有時間再仔細瞭解一下

四、Detector.js  應該用來判斷顯卡、瀏覽器是否是支持webgl 的

五、Tween.js  這個庫用來實現緩動效果的，很好用，先不仔細研究

六、globe.js   這個就是實現地球效果的 工程文件了。 下面主要研究這個globe js 和 earth .html 是怎麼回事

 

第一步，建立globe對象 。

  var globe = new DAT.Globe(container);

javascript 建立類對象的方式頗有意思。找到一點詳細的資料，爲了方便書寫，這個博文叫資料1。http://www.cnblogs.com/lidabo/archive/2011/12/17/2291238.html

打開globe.js 咱們能夠找到

var DAT = DAT || {}; 

按照資料1中的總結，看看這兩個類的建立，DAT={} 代表 DAT 是一個類對象。DAT.Globe 實際上 是DAT 內部的一個對象，而建立DAT的目的，我想大概相似於命名空間的意思

DAT.Globe = function(container, colorFn) {...}

globe 對象的建立方法相似 資料1中的第四種： 帶參數的構造函數。javascript 經過function 關鍵字建立函數和類。這個function的返回值是一個this。

所以，第一步建立globe對象時，var globe =new DAT.Globe(container)  獲得了一個 Globe 對象。好像有點廢話，不事後面這個地方還會作比較。

建立globe 對象後，咱們在earth.html 文件中，能夠搜索一下，發現 globe 類對象調用了一些函數方法：主要有：

globe.addData(.....); 
globe.createPoints(); 
globe.animate();

在globe.js中咱們能夠看到 ：

  this.addData = addData;
  this.createPoints = createPoints;
  this.renderer = renderer;
  this.scene = scene;

在函數內部經過var 建立的addData 等函數方法，只在 function內部可見 ，若是但願Globe.addData()這樣來調用的話，就須要，使用上面的語句建立「成員函數」 ，使其外部可見。

第二步，從加載人口數據，解析並傳入 globe 對象。主要經過以下代碼：

 1    var xhr;
 2         TWEEN.start();
 3         xhr = new XMLHttpRequest();
 4         xhr.open('GET', './data/population909500.json', true);
 5         xhr.onreadystatechange = function(e) {
 6             if (xhr.readyState === 4) {
 7                 if (xhr.status === 200) {
 8                     var data = JSON.parse(xhr.responseText);
 9                     window.data = data;
10                     for (i=0;i<data.length;i++) {
11                         globe.addData(data[i][1], {format: 'magnitude', name: data[i][0], animated: true});
12                     }
13                     globe.createPoints();
14                     settime(globe,0)();
15                     globe.animate();
16                 }
17             }
18         };
19         xhr.send(null);

View Code

 這裏面值得學習的類有如下幾個：

（1）XMLHttpRequest 對象（參考http://www.w3school.com.cn/xmldom/dom_http.asp）

XMLHttpRequest 對象提供了對 HTTP 協議的徹底的訪問，包括作出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 能夠同步或異步地返回 Web 服務器的響應，而且可以以文本或者一個 DOM 文檔的形式返回內容。

（2）鼠標事件的添加，函數調用，與函數引用

 

 1         var settime = function(globe, t) {
 2              return function() {
 3                 new TWEEN.Tween(globe).to({time: t/years.length},500).easing(TWEEN.Easing.Cubic.EaseOut).start();
 4                 var y = document.getElementById('year'+years[t]);
 5                 if (y.getAttribute('class') === 'year active') {
 6                     return;
 7                 }
 8                 var yy = document.getElementsByClassName('year');
 9                 for(i=0; i<yy.length; i++) {
10                     yy[i].setAttribute('class','year');
11                 }
12                 y.setAttribute('class', 'year active');
13            };
14         };

View Code

 

settime()函數 在html 中兩兩次被調用 ，第一次 settime(globe,0)(); 第二次，是增長  鼠標響應事件。

        for(var i = 0; i<years.length; i++) {
            var y = document.getElementById('year'+years[i]);
            y.addEventListener('mouseover', settime(globe,i), false);
        }

這裏我以爲settime 函數 的申明 值得學習和分析一下。先來看：

        var settime = function(globe, t) {
             return function() {
                new TWEEN.Tween(globe).to({time: t/years.length},500).easing(TWEEN.Easing.Cubic.EaseOut).start();
                var y = document.getElementById('year'+years[t]);
                if (y.getAttribute('class') === 'year active') {
                    return;
                }
                var yy = document.getElementsByClassName('year');
                for(i=0; i<yy.length; i++) {
                    yy[i].setAttribute('class','year');
                }
                y.setAttribute('class', 'year active');
           };
        };

View Code

 因爲settime 函數返回的是一個匿名函數的引用，因此 在調用settime(globe,0)() 後面這個括號就容易理解了。

addEventListener('mouseover', settime(globe,i), false); 
中間這個參數licener ，須要的正式一個函數參數的引用，或者  函數體。

settime函數的寫法好處是能夠，向綁定的事件處理函數傳遞參數。

第三步，實現緩動效果。這個主要用到了tween.js 這個庫。網上比較多人用，找到一個不錯的介紹，有時間再仔細看，先記錄一下：

View Code

到這裏，globe.html 這個也面的基本內容，都分析完了。從頁面裏面，咱們能夠學習到一下經常使用的 函數和知識點，羅列一下

一、 script 文件的引用：<script type="text/javascript" src="./js/ThreeWebGL.js"></script>

二、經過id 查找 dom 標籤，document.getElementById('container');

三、獲取元素的屬性，y.getAttribute('class') === 'year active' 。

四、===表示，不但值要相同，類型也要相同 ，==表示值要相同。

五、XMLHttpRequest  用來處理http 請求

六、addEventListener  爲 元素添加鼠標事件，響應函數 。

btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false); 

執行順序爲method1->method2->method3 

 七、最後是google 用於網站統計的代碼，有時間再看

 1 <script type="text/javascript">
 2 
 3     var _gaq = _gaq || [];
 4     _gaq.push(['_setAccount', 'UA-23152241-1']);
 5     _gaq.push(['_trackPageview']);
 6 
 7     (function() {
 8         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 9         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
10         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
11     })();
12 
13 </script>

View Code

 

這一篇，主要介紹了globe.html 頁面的 基本結構， 從下一篇開始，重點關注 globe.js 的實現細節。