您的位置：首页 > Web前端 > JavaScript

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

2014-04-25 18:17 495 查看

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 ] 程序的基本框架：从之前提到的教程里，找个一个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>basic2</title>
<style>
body {
background: #ffffff;
overflow:hidden;
}
</style>
<script src="./js/Three_r49.js"></script>

<script>
window.addEventListener("DOMContentLoaded", function(){

var viewAngle = 80;
var width  = window.innerWidth;
var height = window.innerHeight;
var near   = 1;
var far    = 1000;

// renderer (canvas)
var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

// create a scene
var scene = new THREE.Scene();

// set a camera
var aspect = width / height;
var camera = new THREE.PerspectiveCamera( viewAngle, aspect, near, far );
camera.position.z = 500;
scene.add( camera );

// set a directional light
var directionalLight = new THREE.DirectionalLight( 0xffffff, 5 );
directionalLight.position.z = 3;
scene.add( directionalLight );

// cube geometry (200 x 200 x 200 and each segments) with textures;
var geometry = new THREE.CubeGeometry(200, 200, 200, 1, 1, 1,
[
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture("./pic/1.png")}), // right
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // left
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // top
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // bottom
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}), // back
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('./pic/1.png')}) // front
]);
var material =  new THREE.MeshFaceMaterial();
var cubeMesh = new THREE.Mesh( geometry, material);
scene.add( cubeMesh );
renderer.render( scene, camera );
window.addEventListener('mousemove', function (e) {
var mouseX = ( e.clientX - width / 2 );
var mouseY = ( e.clientY - height / 2 );
cubeMesh.rotation.x = mouseY * 0.005;
cubeMesh.rotation.y = mouseX * 0.005;
renderer.render( scene, camera );
}, false);
}, false);
</script>
</head>
<body>
</body>
</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文件，只有下面两句话。

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

整个js 由两个语句构成，DAT 声明为一个类对象， Globe 类的构造函数，返回一个类对象，这么理解可能更容易一些。 js 类创建和函数没什么其别都是function函数，所以，function可以理解为 Globe的构造函数（暂且这么理解，不是很准确），里面申明 Globe类的私有和共用变量和函数。

var 创建私有变量和函数。

this. 创建公有函数和变量。关于this 的指代，觉得比较混乱，用的时候分情况。

function 关键字申明函数体。

Globe类构造函数function(container, colorFn) 中，通过函数名（）的方式调用函数；,例如 init（）是对，function init(){...} 函数的调用。

init();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航