一、开始制作

    1、开始构建一个3D虚拟展馆场景，包括一个旋转立方体。

    2、开始使用three.js之前，将HTML代码保存在计算机上，在HTML文件所在的js目录下复制js，然后在浏览器中打开HTML文件。

    二、创造场景

    1、借助three.js，为了让您的场景真正使用three.js显示，我们需要：场景、相机、渲染器，使用相机来渲染场景。

    2、接下来的两个是远剪面和近剪面。当物体远离相机的远剪面或近剪面时，物体的超出部分不会渲染到场景中。不用担心值的影响，可以在应用程序中设置它，以便在未来获得更好的渲染性能。

    三、渲染器

    1、除了WebGLRender渲染器，Three.js还提供了其他几种渲染器。由于用户使用的浏览器太旧或因其他原因不支持WebGL，这些渲染器可以用于降级。

    2、除了创建渲染器的例子外，还需要在应用程序中设置渲染器的大小。例如，可以使用所需渲染区域的宽度，使渲染场景充满应用程序。

    3、可以将渲染器的宽度设置为浏览器窗口的宽度。

    4、对于性能敏感的应用程序，可以将set size传输到一个较小的值，使应用程序在渲染过程中以一半的长度和宽度渲染场景。

    5、假如想让应用程序保持大小，但是用较低的分辨率渲染，可以在调用set size时将false传输到第三个参数。

    6、在HTML文档中添加渲染元素，即使用渲染元素展示场景。

    四、继续添加

    1、要建立一个立方体，需要一个立方体对象。这个对象包含了立方体的所有顶部和表面。

    2、然后需要给这个立方体一种颜色的材料。Three.js有几种材料，所有材料都是将应用于立方体的属性对象。

    3、需要一个网格，网格是一种包含几何和应用于这些几何的对象。直接将网格对象放入场景中，这样它们就可以在场景中自由移动。

    4、在默认情况下，调用scenene时，可能会使相机的位置与立方体重叠。为了防止这种情况发生，只需稍微向外移动相机。

    五、渲染场景

    1、如果现在写的代码从上面复制到HTML文件，不会在里面看到任何东西。这是因为还没有真正渲染它。因此需要调用一种叫做“渲染”或“动画循环”的东西。

    2、创建一个循环，使渲染器能够在刷新每个屏幕时绘制场景。最重要的是，当用户切换到其他标签页面时，它将暂停而不会浪费宝贵的处理器资源和电池寿命。