Browse Source

Update Creating-a-scene.html

jackie_han 6 years ago
parent
commit
3f36822a8c
1 changed files with 10 additions and 9 deletions
  1. 10 9
      docs/manual/zh/introduction/Creating-a-scene.html

+ 10 - 9
docs/manual/zh/introduction/Creating-a-scene.html

@@ -80,17 +80,17 @@
 		camera.position.z = 5;
 		camera.position.z = 5;
 		</code>
 		</code>
 
 
-		<p>To create a cube, we need a <strong>BoxGeometry</strong>. This is an object that contains all the points (<strong>vertices</strong>) and fill (<strong>faces</strong>) of the cube. We'll explore this more in the future.</p>
+		<p>要创建一个立方体,我们需要一个<strong>BoxGeometry</strong>(立方体)对象. 这个对象包含了一个立方体中所有的顶点(<strong>vertices</strong>)和面<strong>faces</strong>。未来我们将在这方面进行更多的探索。</p>
 
 
-		<p>In addition to the geometry, we need a material to color it. Three.js comes with several materials, but we'll stick to the <strong>MeshBasicMaterial</strong> for now. All materials take an object of properties which will be applied to them. To keep things very simple, we only supply a color attribute of <strong>0x00ff00</strong>, which is green. This works the same way that colors work in CSS or Photoshop (<strong>hex colors</strong>).</p>
+		<p>接下来,对于这个立方体,我们需要给它一个材质来让它有颜色。Three.js自带了几种材质,但在这里我们使用的是<strong>MeshBasicMaterial</strong>。所有的材质是一个将应用于立方体的属性对象。 简单起见, 我们在这里只应用一个color属性,值为<strong>0x00ff00</strong>,也就是绿色。这里所做的事情就相当于在CSS或者Photoshop里使用十六进制(<strong>hex colors</strong>)的颜色格式来设置颜色。</p>
 
 
-		<p>The third thing we need is a <strong>Mesh</strong>. A mesh is an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.</p>
+		<p>第三步,我们需要一个<strong>Mesh</strong>(网格)。 网格是包含有一个几何体以及应用在在此几何体上的材质的对,我们可以直接将网格对象插入到我们的场景中,并在其中自由移动。</p>
 
 
-		<p>By default, when we call <strong>scene.add()</strong>, the thing we add will be added to the coordinates <strong>(0,0,0)</strong>. This would cause both the camera and the cube to be inside each other. To avoid this, we simply move the camera out a bit.</p>
+		<p>默认情况下,当我们调用<strong>scene.add()</strong>的时候,物体将会被添加到坐标为<strong>(0,0,0)</strong>的位置。可或许会使得摄像机的位置和立方体相互重叠(也就是摄像机位于立方体中)。为了防止这种情况的发生,我们只需要将摄像机稍微向外移动一些。</p>
 
 
-		<h2>Rendering the scene</h2>
+		<h2>渲染场景</h2>
 
 
-		<p>If you copied the code from above into the HTML file we created earlier, you wouldn't be able to see anything. This is because we're not actually rendering anything yet. For that, we need what's called a <strong>render or animate loop</strong>.</p>
+		<p>在此之前,如果你从上面复制了我们已经写好的代码到一个HTML文件中,你将不会在其中看到任何东西。这是因为我们还没有对它进行真正的渲染。为此,我们需要调用一个所谓“<strong>渲染</strong>”或者“<strong>动画循环</strong>”的东西。</p>
 
 
 		<code>
 		<code>
 		function animate() {
 		function animate() {
@@ -100,11 +100,12 @@
 		animate();
 		animate();
 		</code>
 		</code>
 
 
-		<p>This will create a loop that causes the renderer to draw the scene every time the screen is refreshed (on a typical screen this means 60 times per second). If you're new to writing games in the browser, you might say <em>"why don't we just create a setInterval ?"</em> The thing is - we could, but <strong>requestAnimationFrame</strong> has a number of advantages. Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.</p>
+		<p>在这里我们创建了一个循环——这使得渲染器能够在每次屏幕刷新时对场景进行绘制(在大多数屏幕上,刷新率一般是60次/秒)。如果你正在浏览器里写一个游戏,你或许会说<em>“为什么我们不直接用setInterval来实现刷新的功能呢?”</em>当然啦,我们的确可以用setInterval,但是,<strong>requestAnimationFrame</strong>有很多的优点。最重要的一点或许是当用户切换到其它的标签页时,它会暂停,因此不会浪费用户宝贵的处理器资源以及损耗电池的寿命。</p>
 
 
-		<h2>Animating the cube</h2>
+		<h2>使立方体动起来</h2>
 
 
-		<p>If you insert all the code above into the file you created before we began, you should see a green box. Let's make it all a little more interesting by rotating it.</p>
+		<p>
+			 在开始之前,如果你已经将上面的代码写入到了你所创建的文件中,你应当已经可以看到一个绿色的盒子。让我们来做一些更加有趣的事——让它旋转起来。</p>
 
 
 		<p>Add the following right above the <strong>renderer.render</strong> call in your <strong>animate</strong> function:</p>
 		<p>Add the following right above the <strong>renderer.render</strong> call in your <strong>animate</strong> function:</p>