资源描述
用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>
<title>My first Three.js app</title>
<style>canvas { 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 带有几种材质，但是我们现在将使用最基本的材质MeshBasicMaterial。所有的材质都需要一个具有各种属性的可以
应用的物体。为了简易化，我们只用一个绿色0x00ff00的颜色属性。这和CSS或Photoshop的十六进制颜色原理一样。
我们需要的第三样东西是网模。网模是一种采用几何形体并应用材质的物体，我们可以将它插入到场景中，并且可以自由的移动。
默认状态下，当我们调用场景添加scene.add()过程的时候，一个物体将会被添加到坐标系的原点(0,0,0)。这会导致摄像机和立方体陷入其中。为了避免这一问题，
我们就简单的把摄像机移出来一点。
渲染场景
如果你将以上的代码复制到我们之前创建的HTML文件中，你可能看不到任何东西。这是因为我们还没有渲染任何东西。为了显示场景，我们需要调用渲染循环。
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
这段程序会创建一个循环，让渲染器以每秒60次的频率描绘场景。如果你是个用浏览器写游戏程序的新手，你也许会问：“为什么我们不用setInterval来实现循环呢
？”实际情况是：我们本来也是可以这样使用的，但是requestAnimationFrame过程却拥有许多优势。也许最重要的一个优势就是：当用户跳转到其它浏览器窗口的
时候，它就会暂停，因此不会浪费宝贵的计算能力和电池寿命。
让立方体动起来
如果你把以上的所有代码都插入到我们开头创建的文件，你应该会看到一个绿色的盒子。让我们把它转动起来，变得有趣点。
请把以下的代码添加到上面的渲染器程序的renderer.render一行之上。
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
这个会以每秒60帧的频率运行每一帧，让立方体获得漂亮的旋转动画。一般而言，任何你要在游戏或应用运行时要移动或变化的行为都必须通过渲染循环。当然
你也可以从这个循环访问其他程序，这样你就不需要写成百行的渲染器程序了。
大功告成
恭喜你！你现在已经完成了第一个Three.js应用程序。这个非常简易，但是你必须有个开端。
下面是完整的代码。把玩把玩，以便更好得理解其工作原理。
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script>
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);
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;
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
