1.1 Three.js基本框架.docxVIP

1.1 Three.js基本框架在本网站/jiaoyanzu/wuli/ShowArticle.aspx?articleId=1248第1课 绘制一个三角形等一系列文章中，使用的都是WebGL原生API来编程。但之后就应该自己编写一个代码库，以用于随后的通用3D编程，这样就可以将相对复杂的原生API封装起来，提高编程效率。现在有很多不错的WebGL开源框架，Three.js就是其中的一个，它是一个3D JavaScript库，封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。它是由西班牙程序员Ricardo Cabello Miguel开发的，此人更出名的网名为Mr.doob。Three.js在地址为http://mrdoob.github.io/three.js/http://mrdoob.github.io/three.js/，在那儿你可以下载到全部源代码、文档和示例，我使用的版本为r71。本文会建立一个Three.js基本框架，以后的示例都是在这个框架的基础上实现的。我们会将“第1课 绘制一个三角形”的步骤用这个框架再实现一次。接下来的绝大多数示例都参考自《Learning Three.js：The Javascript 3D Library for WebGL》，在本网站可下载到此书的电子英文版和源代码。基本框架在WebGL原生API中，要在页面上生成内容，大致需要以下几步：创建WebGL上下文创建顶点缓冲（和索引缓冲）创建顶点着色器和片段着色器编译着色器创建程序对象和链接着色器绘制场景而要构建一个Three.js框架，必须拥有三样东西：渲染器（renderer）对象：负责创建WebGL上下文，绘制场景。场景（scene）对象：场景是最上级的对象，用于容纳所有的其他图形对象（网格、相机等）。相机（camera）对象：定义我们在渲染好的scene中能够看到些什么。下面就是网页代码：!DOCTYPE htmlhtmlhead title示例01.01 – 基本框架/title script src=Scripts/jquery-2.1.3.min.js/script script src=Scripts/Threejs/three.min.js/script style body{ /* 将margin设置为0，overflow设置为hidden，可让浏览器显示全屏 */ margin: 0; overflow: hidden; } /style/headbody !-- 作为Canvas容器的div -- div id=WebGL-output/divscript type=text/javascript // 页面加载完毕后，就可以运行Three.js了。 $(function () { var stats = initStats(); // 创建渲染器，并设置视口大小和清除色 var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0x00204d); renderer.setSize(window.innerWidth, window.innerHeight); // 将WebGL的输出canvas放置到div中 $(#WebGL-output).append(renderer.domElement); // 创建scene对象，用来容纳网格、相机、光源等对象 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 设置相机位置，观察目标设置为场景中央 camera.position.x = 0; camera.position.y = 0; camera.position.z = 3; camera.lookAt(scene.position); renderer.render(scene, camera); });/script/body/html以上代码还使用了jquery库，这不是必须的，但可以让某些DOM操作更加便捷。若现在运行程序，只会显示墨绿色的背景，我们需要在场景中添加一个黄色的三角形。添加网格（Mesh）对象Three.js中绘制的绝大多数对象都是网格（Mesh），一个Mesh通常是由一个几何体（Geometry）对象和一个材质（Material）对象组合而成。其中Geometry对象保存了Mesh对象的顶点信息和索引信息，而Material对象保存