视频课程地址：www.bilibili.com/video/BV1g4…
我们现在从threejs的帮助文档中参考一段代码过来，学习一下如何渲染第一个三维对象。
我们先来创建一个场景对象，场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。
如果没有场景对象就无法渲染任何物体，后面章节我们会对场景对象进行详细的介绍。
再创建一个透视的摄像机，具体参数我们在后面的章节中详细介绍
摄像机决定了能够在场景中看到什么
我们基于摄像机的角度来计算场景对象在浏览器中会渲染成什么样子
第一个参数设置为75
透视摄像机只是其中的一种，还有一种正交投影摄像机
具体它们之间的差别后面会讲到
第二个参数为宽高比
整个页面的宽度除以页面的高度
第三个参数为0.1
第四个参数为1000
还需要创建一个渲染器
threejs有好几个渲染器，WebGLRender只是其中的一种
后面的章节中，我们会详细讲解每一种渲染器的用途和使用场景
将渲染器的大小设置为页面窗口的大小
window.innerWidth和window.innerHeight是整个页面的宽度和高度
我们需要把这个渲染器中的DOM元素对象添加到指定的DIV中
首先，我们通过id号获取DIV
然后再往这个DOM元素中追加渲染器的DOM元素作为它的儿子
现在开始创建一个立方几何体
threejs中有很多内置的几何体，也可以让我们自定义几何体，具体后面讲到
再来创建一个网格基础材质，并设置它的颜色
threejs有很多种材质，这里我们选取一个最简单的材质 ，设置材质的颜色，颜色的格式为RGB16进制
一共是6位，前面两位代表红色，中间两位代表绿色，最后两位代表蓝色
把立方几何体与基础材质进行组合后创建出一个新的网格对象
现在我们把立方体网格添加到场景中
设置透视摄像机在Z轴上的距离，也就是它与我们屏幕垂直的距离
最后一步，我们将场景和摄像机2个对象传入渲染器中
代码写完了，现在开始调试一下。右键启动本地服务和网页加载
现在我们运行一下，发现并没有绘制成功
控制台提示场景对象关键词没有定义
原来我们在代码的最上方漏写了一句import导入模块
我们需要使用哪个对象类型关键词，就在代码最上面将该关键词导入
接下来，我们把代码中用到的对象类型关键词都添加到import列表里面
场景关键词，透视摄像机关键词，渲染器关键词，正方形几何体，网格基础材质，网格，from后面写上three-j-s的路径
源代码目录在上上父目录，修改后再来运行，发现renderer对象没有找到，原来我们写错了，多了一个er。
再次运行一下，终于成功了。
我们修改一下基础材质对象的颜色，发现它变成了暗绿色，不错！是我们设置的颜色。
我们再修改它为红色，看看是否能成功。
嗯，还是不错的，修改成功了。
我们修改一下Z坐标的值，让它远离我们
发现方块变小了，确实远离了我们
我们再让立方体旋转一下，感受到它是一个三维立体
沿着X轴，Y轴同时旋转一定的角度，我们先来设置X轴的旋转角度
+=代表我们是它原有的基础上进行增量，0.01这个旋转角度太小了
现在我们设置Y轴的旋转角度，0.1这个旋转角度也有点小
还是0.5吧，这个旋转角度应该可以让我们看到比较明显的变化。
很好！效果出来了，现在就有立方体的感觉了
我们第一个三维对象就完美地渲染出来了
作者：动力IT实训
