Three.JS-学习 The WebGL earth (2)---globe.js分析

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>
View Code
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();

 

posted on 2014-04-25 18:17  我心自由  阅读(1478)  评论(0编辑  收藏  举报