|
|
@@ -10,12 +10,12 @@
|
|
|
<body>
|
|
|
<h1>[name]</h1><br />
|
|
|
|
|
|
- <p>The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</p>
|
|
|
+ <p>这一部分的目标是对three.js来做一个简要的介绍。我们将建立一个包含有旋转立方体的场景来开始这一部分。为了防止你遇到麻烦时需要帮助，一个已经完成的例子在可以在页面下方找到。</p>
|
|
|
|
|
|
<h2>开始之前</h2>
|
|
|
-
|
|
|
- <p>Before you can use three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of [link:https://threejs.org/build/three.js three.js] in the js/ directory, and open it in your browser.</p>
|
|
|
-
|
|
|
+ <p>
|
|
|
+ 在你开始使用three.js之前，你需要一个地方来显示它；将下列HTML代码保存为你电脑上的一个HTML页面，同时将[link:https://threejs.org/build/three.js three.js]复制到js/目录下，然后在你的浏览器中打开这个页面。
|
|
|
+ </p>
|
|
|
<code>
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
@@ -36,11 +36,11 @@
|
|
|
</html>
|
|
|
</code>
|
|
|
|
|
|
- <p>That's all. All the code below goes into the empty <script> tag.</p>
|
|
|
+ <p>好了，接下来的所有代码将会写入到空的<script>标签中。</p>
|
|
|
|
|
|
- <h2>Creating the scene</h2>
|
|
|
+ <h2>创建一个场景</h2>
|
|
|
|
|
|
- <p>To actually be able to display anything with three.js, we need three things: scene, camera and renderer, so that we can render the scene with camera.</p>
|
|
|
+ <p>为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。</p>
|
|
|
|
|
|
<code>
|
|
|
var scene = new THREE.Scene();
|
|
|
@@ -51,19 +51,19 @@
|
|
|
document.body.appendChild( renderer.domElement );
|
|
|
</code>
|
|
|
|
|
|
- <p>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer.</p>
|
|
|
+ <p>在这儿我们花一点点时间来解释一下这儿发生了什么。我们现在建立了场景、相机和渲染器。</p>
|
|
|
|
|
|
- <p>There are a few different cameras in three.js. For now, let's use a <strong>PerspectiveCamera</strong>.</p>
|
|
|
+ <p>three.js里有几种不同的相机，在这里，我们使用的是<strong>PerspectiveCamera</strong>（透视摄像机）。</p>
|
|
|
|
|
|
- <p>The first attribute is the <strong>field of view</strong>. FOV is the extent of the scene that is seen on the display at any given moment. The value is in degrees.</p>
|
|
|
+ <p>第一个属性是<strong>视场角（FOV）</strong>。视场角就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是一个角度。</p>
|
|
|
|
|
|
- <p>The second one is the <strong>aspect ratio</strong>. You almost always want to use the width of the element divided by the height, or you'll get the same result as when you play old movies on a widescreen TV - the image looks squished.</p>
|
|
|
+ <p>第二个值是<strong>长宽比（aspect ratio）</strong>。 也就是你用一个物体的宽除以它的高的比值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。</p>
|
|
|
|
|
|
- <p>The next two attributes are the <strong>near</strong> and <strong>far</strong> clipping plane. What that means, is that objects further away from the camera than the value of <strong>far</strong> or closer than <strong>near</strong> won't be rendered. You don't have to worry about this now, but you may want to use other values in your apps to get better performance.</p>
|
|
|
+ <p>接下来的两个值是<strong>远剪切面</strong>和<strong>近剪切面</strong>。 也就是说当物体所在的位置比摄像机的<strong>远剪切面</strong>远或者所在位置比<strong>近剪切面</strong>近的时候，该物体超出的部分将不会被渲染到场景中。现在你或许并不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。</p>
|
|
|
|
|
|
- <p>Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don't have WebGL support for some reason.</p>
|
|
|
+ <p>接下来是渲染器。这里是施展魔法的地方。除了我们在这里用到的WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器，当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，可以使用这几种渲染器进行降级。</p>
|
|
|
|
|
|
- <p>In addition to creating the renderer instance, we also need to set the size at which we want it to render our app. It's a good idea to use the width and height of the area we want to fill with our app - in this case, the width and height of the browser window. For performance intensive apps, you can also give <strong>setSize</strong> smaller values, like <strong>window.innerWidth/2</strong> and <strong>window.innerHeight/2</strong>, which will make the app render at half size.</p>
|
|
|
+ <p>除了创建一个渲染器的实例之外，我们还需要在我们的应用程序里设置一个渲染器的大小尺寸。比如说，我们可以使用所需要的这个渲染区域的宽高，来将渲染器渲染出的场景，使其填充满我们的应用程序。因此，我们可以将渲染器宽高设置为浏览器窗口宽高。 对于性能比较敏感的应用程序来说，你可以给<strong>setSize</strong>传入一个较小的值，例如<strong>window.innerWidth/2</strong>和<strong>window.innerHeight/2</strong>，这将使得app在渲染时以一半的长宽尺寸渲染场景。</p>
|
|
|
|
|
|
<p>If you wish to keep the size of your app but render it at a lower resolution, you can do so by calling <strong>setSize</strong> with false as <strong>updateStyle</strong> (the third argument). For example, <strong>setSize(window.innerWidth/2, window.innerHeight/2, false)</strong> will render your app at half resolution, given that your <canvas> has 100% width and height.</p>
|
|
|
|
gogoend