Three.js简易入门.docVIP

用Three.js创建三维场景 本文的目的是简要介绍Three.js的使用方法。我们首先会设置一个有旋转立方体的三维场景。在本文的后面是一个可用的完整脚本示例。 Three.js是什么？ 如果你已经读到本文，那么你可能对Three.js已经有一些了解，也明白它对你有什么帮助，但是我们会尽量简要的描述它。 Three.js是使浏览器中的WebGL - 3D 变得非常简易的类库。一个简单的立方体要通过原始的WebGL 来实现需要几百行Javascript 和着色代码，但是如果用Three.js，则只需要很少的代码。 准备开始之前 如果要顺利使用Three.js，你先得有地方来显示它。请把以下的HTML代码存放到你的电脑上，同时将从Three.js的官方网站下载three.min.js文件存放到HTML文件同级目录下的js文件夹中，然后用你支持WebGL的浏览器打开HTML文件。 html head titleMy first Three.js app/title stylecanvas { width: 100%; height: 100% }/style /head body script src=js/three.min.js/script script // Our Javascript will go here. /script /body /html 这是所有HTML代码的整体样式。以下所有的代码都会放到script间空白的区域。 创建场景： 要实现对Three.js创建的物体的显示，我们需要三样东西：一个场景、一个摄像机、一个渲染器，这样我们就能用摄像机来渲染场景。 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); 现在让我来解释这些代码有什么作用。现在我们已经建立了一个场景、我们的摄像机和渲染器。在Three.js中有几种不同的摄像机，但是我们以后再讨论不同的摄 像机。现在，让我们使用透视场景摄像机PerspectiveCamera。代码中摄像机的第一个参数值是视界大小。 第二个参数是宽高比。几乎大多数时候都要用显示元素的宽度来除以高度，否则你会得到一个像在宽频电视机上看老电影一样被挤压变形的效果。 后面的连个参数代表近处和远处剪裁面。意思就是物体超过远端剪裁面或近端剪裁面就不会被渲染显示。现在你无需为这个操心，但是将来你要使你的游戏表现更佳的时候就需要用到其它的参数值了。 接下来是渲染器。这就是见证奇迹的时刻。除了我们在这里使用的WebGLRenderer渲染器，Three.js也带有其它一些渲染器，通常用于应对有些用户使用的比较旧的没有WebGL 支持的浏览器。 除了创建渲染器的实例，我们也需要设置渲染器对我们的程序的渲染尺寸。使用我们的游戏需要的填充区域的宽度和高度是个好主意，也就是使用浏览器窗口的 宽度和高度。对于追求更好表现的游戏，你也可以吧setSize的尺寸设置的小一些，比如window.innerWidth/2和window.innerHeight/2这样半大的解析尺寸。这不意味 着游戏只会填充窗口的一半大，但是会看起来比较模糊和放大。 最后，我们把渲染元素添加到我们的HTML文件里。这是一个canvas 画布元素，渲染器用它来将场景展现给我们。 “这些都很好，但是你答应的立方体在哪里呢？”让我们现在添加立方体。 var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; 要创建立方体，我们需要CubeGeometry立方体几何体。这是一个包含有立方体顶点（vertices)）和填充面（faces）的物体。我们会在将来进一步探讨几何形体。 除了几何形体，我们需要材质来着色。Three.js 带有几种材质，但是我们现在将使用