Three.JS-学习 The WebGL earth (2)---globe.js分析
上一篇主要分析了globe.html 页面的构成，工程的主要核心就是globe.js , 为了实现学习的目的：
（1）javascript 语言的深入理解
（2）js 如何开发复杂的程序
（3）globe 纹理是如何贴图的，或者说 threeJS 是如何使用和建立三维效果的
有必要对globe.js深入了解，可能会涉及下面几个方面的知识：
（1）threeJS 的基本功能
（2）GLSL 着色语言是如何使用的
作为预备，有必要先了解一下[Threejs ] 程序的基本框架： 从之前提到的教程里，找个一个例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>basic2</title> 6 <style> 7 body { 8 background: #ffffff; 9 overflow:hidden; 10 } 11 </style> 12 <script src="./js/Three_r49.js"></script> 13 14 <script> 15 window.addEventListener("DOMContentLoaded", function(){ 16 17 var viewAngle = 80; 18 var width = window.innerWidth; 19 var height = window.innerHeight; 20 var near = 1; 21 var far = 1000; 22 23 // renderer (canvas) 24 var renderer = new THREE.WebGLRenderer(); 25 renderer.setSize( width, height ); 26 document.body.appendChild( renderer.domElement ); 27 28 // create a scene 29 var scene = new THREE.Scene(); 30 31 // set a camera 32 var aspect = width / height; 33 var camera = new THREE.PerspectiveCamera( viewAngle, aspect, near, far ); 34 camera.position.z = 500; 35 scene.add( camera ); 36 37 // set a directional light 38 var directionalLight = new THREE.DirectionalLight( 0xffffff, 5 ); 39 directionalLight.position.z = 3; 40 scene.add( directionalLight ); 41 42 // cube geometry (200 x 200 x 200 and each segments) with textures; 43 var geometry = new THREE.CubeGeometry(200, 200, 200, 1, 1, 1, 44 [ 45 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture("./pic/1.png")}), // right 46 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // left 47 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // top 48 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // bottom 49 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // back 50 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}) // front 51 ]); 52 var material = new THREE.MeshFaceMaterial(); 53 var cubeMesh = new THREE.Mesh( geometry, material); 54 scene.add( cubeMesh ); 55 renderer.render( scene, camera ); 56 window.addEventListener('mousemove', function (e) { 57 var mouseX = ( e.clientX - width / 2 ); 58 var mouseY = ( e.clientY - height / 2 ); 59 cubeMesh.rotation.x = mouseY * 0.005; 60 cubeMesh.rotation.y = mouseX * 0.005; 61 renderer.render( scene, camera ); 62 }, false); 63 }, false); 64 </script> 65 </head> 66 <body> 67 </body> 68 </html>
24 var renderer = new THREE.WebGLRenderer(); // 创建 render 画布
25 renderer.setSize( width, height );
26 document.body.appendChild( renderer.domElement ); // 将render.domElement DOM节点 加入 页面
27
28 // create a scene
29 var scene = new THREE.Scene(); // 创建一个场景
30
31 // set a camera
32 var aspect = width / height;
33 var camera = new THREE.PerspectiveCamera( viewAngle, aspect, near, far ); //创建一个相机
34 camera.position.z = 500;
35 scene.add( camera ); // 将相机加入场景
36
37 // set a directional light
38 var directionalLight = new THREE.DirectionalLight( 0xffffff, 5 ); 创建光源
39 directionalLight.position.z = 3;
40 scene.add( directionalLight ); // 将光源加入场景
41
42 // cube geometry (200 x 200 x 200 and each segments) with textures;
43 var geometry = new THREE.CubeGeometry(200, 200, 200, 1, 1, 1, //创建一个对象，定义纹理
44 [
45 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture("./pic/1.png")}), // right
46 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // left
47 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // top
48 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // bottom
49 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // back
50 new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}) // front
51 ]);
52 var material = new THREE.MeshFaceMaterial(); 这地方没看懂，为什么 有创建一次纹理
53 var cubeMesh = new THREE.Mesh( geometry, material); // 创建一个mesh
54 scene.add( cubeMesh ); // 将mesh 加入 场景
55 renderer.render( scene, camera ); // 将相机、场景，在canvas 中进行渲染
首先，还是从整体上来分析一下 globe.js 的构成。主要由三个部分来构成。1、私有变量和函数的申明；2、初始化函数，通过init（）函数的调用；3、申明公有函数提供给外部调用，主要通过this.公有函数名 = 私有函数名 ，来实现，变量也是如此。
关闭括弧，发现整个JS文件，只有下面两句话。
1 var DAT = DAT || {}; 2 DAT.Globe = function(container, colorFn){....}
整个js 由两个 语句构成，DAT 声明为一个类对象， Globe 类 的构造函数，返回一个类对象，这么理解可能更容易一些。 js 类 创建 和 函数 没什么其别都是function函数，所以，function可以理解为 Globe的构造函数（暂且这么理解，不是很准确）， 里面申明 Globe类的私有和共用 变量和函数。
var 创建 私有 变量和函数 。
this. 创建公有 函数和变量。关于this 的指代，觉得比较混乱，用的时候分情况。
function 关键字 申明函数体。
Globe类构造函数function(container, colorFn) 中，通过 函数名（） 的方式调用函数；,例如 init（） 是对，function init(){...} 函数 的调用。
1 init();