本篇文章目标是简要介绍利用three.js来创建场景。我们将首先设立一个场景，一个旋转的立方体。页面底部提供了一个工作示例，以防卡住并需要帮助。 效果体验网址：http://www.ikinsoft.com/3ddemo/three.html，效果图如下：

准备工作

在创建场景前，我们必须先引用three.js库。下图是HTML代码：

three创建场景的HTML代码

创建场景

利用three.js展示任何物体，我们需要三件事情：场景，相机和渲染器，也就是我们我们用相机来渲染场景。代码如下：

渲染场景代码

让我们花点时间来解释这几行代码。我们现在已经设置了场景，我们的相机和渲染器。在three.js中有几个不同的相机。在这是我们使用了PerspectiveCamera。使用该相机，第一个参数是设置是视图。

第二个是宽高比。您几乎总是希望使用元素的宽度除以高度，否则您将获得与在宽屏电视机上播放旧电影时相同的结果 - 图像看起来很干燥。

接下来的两个参数是远近的裁剪平面。这意味着远离摄像头的物体远远比近的物体不会被渲染。您现在不需要担心，但您可能希望在应用程序中使用其他值来获得更好的性能。

接下来是渲染器。这是神奇的地方。除了我们在这里使用的WebGLRenderer，three.js还提供了一些其它的渲染器，通常用作旧版浏览器的用户或对于没有WebGL支持的用户的回退。

除了创建渲染器实例，我们还需要设置我们想要渲染我们的应用程序的大小。使用我们的应用程序填充的区域的宽度和高度是一个好主意 - 在这种情况下，浏览器窗口的宽度和高度。对于性能密集型应用程序，您还可以给予setSize较小的值，如window.innerWidth / 2和window.innerHeight / 2，这将使应用程序呈现一半的大小。

如果您希望保留应用程序的大小，但是以较低的分辨率呈现，那么可以通过调用setSize（false）作为updateStyle（第三个参数）来执行此操作。例如，setSize（window.innerWidth / 2，window.innerHeight / 2，false）将以半分辨率渲染您的应用程序，因为您的<canvas>具有100％的宽度和高度。

最后但并非最不重要的是，我们将渲染器元素添加到我们的HTML文档中。这是渲染器用于向我们显示场景的<canvas>元素。

那么立方体如何显示呢？请看以下代码：

显示立方体

要创建多维数据集，我们需要一个BoxGeometry。这是一个包含多维数据集的所有点（顶点）和填充（面）的对象。我们将来会进一步探讨这个问题。

除了几何，我们需要一种材料来对其进行着色。Three.js有几种材料，但现在我们将坚持使用MeshBasicMaterial。所有材料都具有将要应用于其的属性对象。为了保持简单，我们只提供一个颜色属性0x00ff00，它是绿色的。它的工作原理与CSS或Photoshop（十六进制颜色）中的颜色相同。

我们需要的第三件事就是网格。网格是一个对象，它接受一个几何体，然后应用一个材质，然后我们可以插入到我们的场景中，并且可以自由移动。

默认情况下，当我们调用scene.add（）时，我们添加的东西将被添加到坐标（0,0,0）中。这将导致相机和多维数据集彼此在一起。为了避免这种情况，我们只需将相机移出一点。

渲染场景

如果您将代码从上面复制到我们之前创建的HTML文件中，您将无法看到任何内容。这是因为我们实际上并没有提供任何东西。为此，我们需要所谓的渲染循环。代码如下：

场景渲染

这将创建一个循环，使渲染器每秒画60次。如果你刚刚在浏览器中编写游戏，你可能会说“为什么我们不创建一个setInterval？事情是 - 我们可以，但requestAnimationFrame有许多优点，也许最重要的是它暂停当用户浏览到另一个浏览器标签时，因此不会浪费宝贵的处理能力和电池寿命。

动画立方体

如果将所有代码插入到您开始创建的文件之前，您应该看到一个绿色的框。让我们通过旋转让它变得更有趣。

这里还缺点东西，我们需要在渲染函数中renderer.render之前调用以下代码：

这将以每帧（每秒60次）运行，并给立方体一个很好的旋转动画。基本上，应用程序运行时要移动或更改的任何内容都必须通过渲染循环。你当然可以从那里调用其他函数，这样你就不会得到几百行的渲染函数。

结果

恭喜！您现在已经完成了您的前三个应用程序。很简单，你必须从某个地方开始。

下面提供了完整的代码。试试它，以更好地了解它的工作原理。

完整代码