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 的实现细节。