本文搬自我的Github，有兴趣的可以一起来完善，这个为Three.js的Example进行注解方便初学者阅读

洳果没有设置viewport的width的话，网页很可能会超出手机屏幕宽度具体多宽，要看浏览器定义的默认宽度是多少 user-scalable=no规定了用户不能缩放网页，但有些浏览器对该项支持不是很好故需要设置minimum-scale和maximum-scale相同来限制用户缩放 统计插件(FPS，渲染时间chrome内存使用率)，min表示js代码经过压缩 fov(视场)：从相机位置能够看到的部分场景推荐默认值45 near(近面)：定义从距离相机多近的地方开始渲染场景。推荐默认值0.1 far(远面)：定义相机可以从它所处的位置看哆远默认值1000 //这里会使用之前设置的画笔颜色进行填充。而画笔颜色不一定要在本函数中进行设置 //three.js中的分组同一个分组中的对象可以一起执行某项操作，不用再进行遍历判断 雪碧图材质也叫精灵图 在Three.js中意思有点稍微不一样 一个精灵也就是一个平面，它的面总是朝向相机通常来说会采用一个部分透明的纹理 创建一个使用2d画布绘制的自定义精灵图材质 该材质在调用program方法之前，会自动将color设置到context对象上 //设置渲染器的"清除色"和"透明度" //设置屏幕像素比与Android上的DIP相仿，作用是在所有设备上的显示效果都相近 //设置待渲染场景的大小 //左上角的统计信息(FPS渲染时间，chrome内存使用率) useCapture可选。true：事件句柄在捕获阶段执行；false：默认事件句柄在冒泡阶段执行 //touch事件是针对手持设备的 //重新设置相机的宽高比。如果宽高比不对那么正方形可能就不是正方形了 //更新相机的投影矩阵 //重新设置渲染场景的大小 html的坐标轴是以左上角为(0,0)，右下方向為正方向 event.screenX鼠标相对于用户显示器屏幕左上角的X坐标 三个等号是恒等比较数值的同时也比较类型。 这里限制只有单指触摸的时候才执行相應的方法 即如下两个公式由于浏览器的X轴方向与WebGL的X轴方向相同，而Y轴方向相反所以X用正的，而Y用负的 //相机重新注视场景中央否则相機只会对着原lookAt计算出的向量方向