Three.js入门（二）

摘自Three.js入门指南 张雯莉 (作者)

官网文档对每个几何形状都给出了效果网址，可以点击右上角的小三角形展开参数菜单，调节各参数将实时渲染几何形状，十分适合新手来熟悉几何形状，每个形状后面都会给出一个链接，没有介绍的可以自行到官网查看介绍

4、几何形状（Geometry）

在创建物体时，需要传入两个参数，一个是几何形状（Geometry），另一个是材质（Material）。

几何形状（Geometry）最主要的功能是储存了一个物体的顶点信息。WebGL需要程序员指定每个顶点的位置，而在Three.js中，可以通过指定一些特征来创建几何形状，例如使用半径创建一个球体，从而省去程序员一个个指定顶点的工作量。

基本几何形状

• 立方体

  虽然这一形状的名字叫盒子模型（BoxGeometry），但它其实是长方体，也就是长宽高可以设置为不同的值，它包含了长方体所有顶点和填充面的对象。其构造函数是：

THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

这里，width是x方向上的长度；height是y方向上的长度；depth是z方向上的长度；后三个参数分别是在三个方向上的分段数，如widthSegments为3的话，代表x方向上水平分为三份。一般情况下不需要分段的话，可以不设置后三个参数，后三个参数的缺省值为1。其他几何形状中的分段也是类似的。分段只对面进行分段，不对体内部分段。

立方体实时效果网址

• 平面

  这里的平面（PlaneGeometry）其实是一个长方形，而不是数学意义上无限大小的平面。其构造函数为：

THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

其中，width是x方向上的长度；height是y方向上的长度；后两个参数同样表示分段。
如果需要创建的平面在x轴和z轴所在的平面内，可以通过物体的旋转来实现。

平面实时效果网址

• 球体

球体（SphereGeometry）的构造函数是：

THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, 
                        phiStart, phiLength, thetaStart, thetaLength)

其中，radius是半径；segmentsWidth表示经度上的切片数；segmentsHeight表示纬度上的切片数；phiStart表示经度开始的弧度；phiLength表示经度跨过的弧度；thetaStart表示纬度开始的弧度；thetaLength表示纬度跨过的弧度。

关于球的这些参数的设置可以多修改参数看看运行结果来理解。

球形实时效果网址

• 圆形

  圆形（CircleGeometry）可以创建圆形或者扇形，其构造函数是：

THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)

这四个参数都是球体中介绍过的，可以参考球体部分。

圆形实时效果网址

• 圆柱体

  圆柱体（CylinderGeometry）的构造函数是：

THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)

其中，radiusTop与radiusBottom分别是顶面和底面的半径，由此可知，当这两个参数设置为不同的值时，实际上创建的是一个圆台；height是圆柱体的高度；radiusSegments与heightSegments可类比球体中的分段；openEnded是一个布尔值，表示是否没有顶面和底面，缺省值为false，表示有顶面和底面。

圆柱体实时效果网址

• 正四面体、正八面体、正二十面体

  正四面体（TetrahedronGeometry）、正八面体（OctahedronGeometry）、正二十面体（IcosahedronGeometry）的构造函数较为类似，分别为：

THREE.TetrahedronGeometry(radius, detail)
THREE.OctahedronGeometry(radius, detail)
THREE.IcosahedronGeometry(radius, detail)

其中，radius是半径；detail是细节层次（Level of Detail）的层数，对于大面片数模型，可以控制在视角靠近物体时，显示面片数多的精细模型，而在离物体较远时，显示面片数较少的粗略模型。这里我们不对detail多作展开，一般可以对这个值缺省。

正四面体实时效果网址
正八面体实时效果网址
正二十面体实时效果网址

• 圆环面

  圆环面（TorusGeometry）就是甜甜圈的形状，其构造函数是：