javascript
/
three.js
cermin dari https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<base href="../../../" />
		<script src="list.js"></script>
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
		<h1>创建一个场景（[name]）</h1><br />

		<p>这一部分将对three.js来做一个简要的介绍；我们将开始搭建一个场景，其中包含一个正在旋转的立方体。页面下方有一个已经完成的例子，当你遇到麻烦，或者需要帮助的时候，可以看一看。</p>

		<h2>开始之前</h2>
		<p>
			在开始使用three.js之前，你需要一个地方来显示它。将下列HTML代码保存为你电脑上的一个HTML文件，同时将[link:https://threejs.org/build/three.js three.js]复制到该HTML文件所在的目录下的js/目录下，然后在你的浏览器中打开这个HTML文件。
		</p>
		<code>
		&lt;!DOCTYPE html&gt;
		&lt;html&gt;
			&lt;head&gt;
				&lt;meta charset=utf-8&gt;
				&lt;title&gt;My first three.js app&lt;/title&gt;
				&lt;style&gt;
					body { margin: 0; }
					canvas { width: 100%; height: 100% }
				&lt;/style&gt;
			&lt;/head&gt;
			&lt;body&gt;
				&lt;script src="js/three.js"&gt;&lt;/script&gt;
				&lt;script&gt;
					// Our Javascript will go here.
				&lt;/script&gt;
			&lt;/body&gt;
		&lt;/html&gt;
		</code>

		<p>好了，接下来的所有代码将会写入到空的&lt;script&gt;标签中。</p>

		<h2>创建一个场景</h2>

		<p>为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。</p>

		<code>
		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 );
		</code>

		<p>我们花一点点时间来解释一下这里发生了什么。我们现在建立了场景、相机和渲染器。</p>

		<p>three.js里有几种不同的相机，在这里，我们使用的是<strong>PerspectiveCamera</strong>（透视摄像机）。</p>

		<p>第一个属性是<strong>视野角度（FOV）</strong>。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是一个角度。</p>

		<p>第二个值是<strong>长宽比（aspect ratio）</strong>。 也就是你用一个物体的宽除以它的高的比值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。</p>

		<p>接下来的两个值是<strong>远剪切面</strong>和<strong>近剪切面</strong>。 也就是说当物体所在的位置比摄像机的<strong>远剪切面</strong>远或者所在位置比<strong>近剪切面</strong>近的时候，该物体超出的部分将不会被渲染到场景中。现在你或许并不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。</p>

		<p>接下来是渲染器。这里是施展魔法的地方。除了我们在这里用到的WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器，当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，可以使用这几种渲染器进行降级。</p>

		<p>除了创建一个渲染器的实例之外，我们还需要在我们的应用程序里设置一个渲染器的大小尺寸。比如说，我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景填充满我们的应用程序。因此，我们可以将渲染器宽高设置为浏览器窗口宽高。对于性能比较敏感的应用程序来说，你可以给<strong>setSize</strong>传入一个较小的值，例如<strong>window.innerWidth/2</strong>和<strong>window.innerHeight/2</strong>，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。</p>

		<p>如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用<strong>setSize</strong>时，给<strong>updateStyle</strong>（第三个参数）传入false。例如，假设你的&lt;canvas&gt; 标签现在已经具有了100%的宽和高，调用<strong>setSize(window.innerWidth/2, window.innerHeight/2, false)</strong>将使得你的应用程序以一半的分辨率来进行渲染。</p>

		<p>最后，我们将<strong>renderer</strong>（渲染器）这个元素添加到我们的HTML文档中，这也就是渲染器使用&lt;canvas&gt;元素来将场景展现给我们。</p>

		<p><em>“嗯，看起来很不错，那你说的那个立方体在哪儿？”</em>接下来，我们就来对它继续进行添加。</p>

		<code>
		var geometry = new THREE.BoxGeometry( 1, 1, 1 );
		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
		var cube = new THREE.Mesh( geometry, material );
		scene.add( cube );

		camera.position.z = 5;
		</code>

		<p>要创建一个立方体，我们需要一个<strong>BoxGeometry</strong>（立方体）对象. 这个对象包含了一个立方体中所有的顶点（<strong>vertices</strong>）和面（<strong>faces</strong>）。未来我们将在这方面进行更多的探索。</p>

		<p>接下来，对于这个立方体，我们需要给它一个材质，来让它有颜色。Three.js自带了几种材质，在这里我们使用的是<strong>MeshBasicMaterial</strong>。所有的材质是都一个将会被应用于立方体的属性对象。在这里为了简单起见,我们只设置一个color属性，值为<strong>0x00ff00</strong>，也就是绿色。这里所做的事情，就相当于是在CSS或者Photoshop中使用十六进制(<strong>hex colors</strong>)的颜色格式来设置颜色。</p>

		<p>第三步，我们需要一个<strong>Mesh</strong>（网格）。 网格是包含有一个几何体以及应用在在此几何体上的材质的对象，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。</p>

		<p>默认情况下，当我们调用<strong>scene.add()</strong>的时候，物体将会被添加到坐标为<strong>(0,0,0)</strong>的位置。但这可能会使得摄像机的位置和立方体相互重叠（也就是摄像机位于立方体中）。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。</p>

		<h2>渲染场景</h2>

		<p>现在，如果你已经从上面复制了我们已经写好的代码到HTML文件中，你将不会在其中看到任何东西。这是因为我们还没有对它进行真正的渲染。为此，我们需要调用一个被叫做“<strong>渲染</strong>”或者“<strong>动画循环</strong>”的东西。</p>

		<code>
		function animate() {
			requestAnimationFrame( animate );
			renderer.render( scene, camera );
		}
		animate();
		</code>

		<p>在这里我们创建了一个循环——这使得渲染器能够在每次屏幕刷新时对场景进行绘制（在大多数屏幕上，刷新率一般是60次/秒）。如果你正在浏览器里写一个游戏，你或许会说<em>“为什么我们不直接用setInterval来实现刷新的功能呢？”</em>当然啦，我们的确可以用setInterval，但是，<strong>requestAnimationFrame</strong>有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，以及损耗电池的使用寿命。</p>

		<h2>使立方体动起来</h2>

		<p>
			在开始之前，如果你已经将上面的代码写入到了你所创建的文件中，你应当已经可以看到一个绿色的立方体。让我们来做一些更加有趣的事 —— 让它旋转起来。</p>

		<p>将下列代码添加到animate()函数中<strong>renderer.render</strong>调用的上方：</p>

		<code>
		cube.rotation.x += 0.01;
		cube.rotation.y += 0.01;
		</code>

		<p>这一段代码将在每一帧时被渲染时调用（正常情况下是60次/秒），这就让立方体有了一个看起来很不错的旋转动画。基本上来说，当应用程序运行时，如果你想要移动或者改变任何场景中的东西，都必须要经过这个动画循环。当然，在这个动画循环函数里，你也可以调用别的函数，这样你在写<strong>animate</strong>函数的时候，就不用在这里以成千上万的代码来结尾了。</p>

		<h2>结果</h2>
		<p>祝贺你！你现在已经成功完成了你的第一个Three.js应用程序。虽然它很简单，但现在你已经有了一个入门的起点。</p>

		<p>下面是完整的代码，请尽情运行它或者修改它，这将可以让你对它的工作机制有更加深入的了解。</p>

		<code>
		&lt;html&gt;
			&lt;head&gt;
				&lt;title&gt;My first three.js app&lt;/title&gt;
				&lt;style&gt;
					body { margin: 0; }
					canvas { width: 100%; height: 100% }
				&lt;/style&gt;
			&lt;/head&gt;
			&lt;body&gt;
				&lt;script src="js/three.js"&gt;&lt;/script&gt;
				&lt;script&gt;
					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.BoxGeometry( 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 animate = function () {
						requestAnimationFrame( animate );

						cube.rotation.x += 0.01;
						cube.rotation.y += 0.01;

						renderer.render( scene, camera );
					};

					animate();
				&lt;/script&gt;
			&lt;/body&gt;
		&lt;/html&gt;
		</code>
	</body>
</html>