three.js基础几何体：立方体，球，圆柱的绘制

学习交流欢迎加群：789723098，博主会将一些demo整理共享       

作为three.js的学习入门，一直在思考要怎样写才可以更符合初学者，对于我自己来说，本身也不是资深的玩家，也是入门不久的菜鸟，但我愿意与大家分享我的经验。我觉得three.js不应对一些基础性的东西介绍太多，因为其是基于WenGL开发的第三方库，如果延伸下去那就会没完没了，这也违背了three.js开发的初衷(为喜欢前端图形学开发，却没有良好的webgl和js基础的人群准备，使三维图形的开发变得更加容易)，所以接下来就从绘制基础的几何体开始吧，结合实际例子，这样更加简单粗暴。如果大家喜欢原生WebGL开发可以关注我另外的博客分栏：点击打开链接。

在开始代码实例以前，先讲讲几种几何体的代码实现方式：

(1) 平面

 

new THREE.PlaneGeometry(100,100,10,10)

括号里的内容分别对应平面的长，宽，长方向等分量，宽方向等分量，第三第四个参数这么形容可能不太恰当，但实在找不出更恰当的形容，这里的意思是这样的，沿着长的方向将其分为10等分，沿着宽的方向将其分为10等分，参数可以根据大家的需要自己设置哈。

(2) 立方体

创建立方体的代码为：

 

new THREE.CubeGeometry(20, 20, 20, 10, 10, 10);

这里括号里的参数分别对应：长、宽、高、长方向等分量、宽方向等分量、高方向等分量；参数可以根据自己需要调整。

(3) 球体

创建球体的代码如下：

 

new THREE.SphereGe