Sublime Tex
Chrome浏览器调试
声明变量，详细代码如下图，具体用途说明都已经有备注。
新建场景（initScene）、相机（initCamera）、光源（initLight）和渲染器（initRenderer），这一块代码可参考文章《Three.js实现立方体旋转和球体跳动》，这里不作多余分析，详细代码如下图：
当场景比较复杂或者配置了比较耗资源的属性后，可能会出现性能瓶颈问题；这里新建了性能监测器（initStats），可以实时监测画面每秒传输帧数和画面渲染的时间，方便查看性能情况，详细代码如下图： 1.新建监测器（stats），并设置模式为0（0表示画面每秒传输帧数，1表示画面渲染的时间），在操作界面点击内容区域也可以进行模式切换； 2.设置监测器显示于左上角（stats.domElement），并添加到页面上； 3.返回监测器对象。
新建用户操作界面（initGUI）（使用用户操作界面调配出最佳效果也是常用的方法），这一块是本文的重点，详细分析如下： 1.定义对象controls，保存以下要修改的属性： rotationSpeed立方体旋转速度； cameraFov相机垂直视角，默认45，最佳视角； cameraNear相机近裁剪面，默认0.1； cameraFar相机远裁剪面，默认1000； numberOfObjects用于显示场景中所有对象的数量，默认只有相机和光源，所以设置2（可以使用scene.children.length获取,这样当增加其它光源或物体等，该数量不会出错；但要注意所有对象的初始化要放在该对象前面）； addCube是一个函数表达式，该函数用来新建一个大小随机颜色随机位置随机，且名字有序的一个立方体（注意更新numberOfObjects的数量）； removeCube是一个函数表达式，该函数用来删除最后一个立方体（注意更新numberOfObjects的数量）； outputObjects是一个函数表达式，该函数用来在chrome的console输出场景中所有对象的信息。 2.新建对象（gui），然后将对象（controls）传递给gui，并设置各个属性： rotationSpeed使用数字类型中的取值范围（0，0.5），可修改input的值或拖动滑块来改变立方体旋转的速度； addCube由于controls已经添加了函数表达式，这里只需要在操作界面添加条目，点击“addCube”则执行函数添加一个立方体； removeCube由于controls已经添加了函数表达式，这里只需要在操作界面添加条目，点击“removeCube”则执行函数删除最后一个立方体； cameraFov使用数字类型中的取值范围（0，100）和事件监听（onChange），当修改input的值或拖动滑块后，修改相机的垂直视角（注意调用camera.updateProjectionMatrix()，不然没有效果）； cameraNear使用数字类型中的取值范围（0.01，50）和事件监听（onChange），当修改input的值或拖动滑块后，修改相机的近裁剪面，当近裁剪面距离大于物体距离时，该物体会消失（注意调用camera.updateProjectionMatrix()，不然没有效果）； cameraFar使用数字类型中的取值范围（50，1000）和事件监听（onChange），当修改input的值或拖动滑块后，修改相机的远裁剪面，当远裁剪面距离小于物体距离时，该物体会消失（注意调用camera.updateProjectionMatrix()，不然没有效果）； outputObjects由于controls已经添加了函数表达式，这里只需要在操作界面添加条目，点击“outputObjects”则执行函数在chrome的console输出场景中所有对象的信息； numberOfObjects调用listen方法，当我们改变数据时，也会同步到操作界面。
添加动画效果，简单说就是利用requestAnimationFrame每隔一个动画帧重新渲染一次，由于设置了旋转弧度，所以会产生动画效果；详细代码如下图： 1.立方体旋转，设置了每隔一个动画帧重新渲染的时候，cube.rotation的（x，y，z）都进行累加（+= controls.rotationSpeed），从而产生旋转效果；由于累加值是受控制面板的rotationSpeed影响，所以在控制面板改变rotationSpeed值，会影响到立方体旋转的速度（注意判断THREE.Mesh才执行，不然会导致相机和光源也旋转）； 2.渲染的时候调用方法(stats.update()),从而实现性能的实时监测。
three.js版本102；
常用的构造器、属性和方法可参考《实例介绍three.js常用的构造器、属性和方法》，这里只分析特殊的代码。