javascript
/
three.js
mirror de 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]复制到js/目录下，然后在你的浏览器中打开这个页面。
		</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>，这将使得app在渲染时以一半的长宽尺寸渲染场景。</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>Add the following right above the <strong>renderer.render</strong> call in your <strong>animate</strong> function:</p>

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

		<p>This will be run every frame (normally 60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the animate loop. You can of course call other functions from there, so that you don't end up with a <strong>animate</strong> function that's hundreds of lines.</p>

		<h2>The result</h2>
		<p>Congratulations! You have now completed your first three.js application. It's simple, you have to start somewhere.</p>

		<p>The full code is available below. Play around with it to get a better understanding of how it works.</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>