# Hellow Three.js 之 创建各种几何形状

> [Demo查看](http://codeffe.com/demo/hello-threejs/hello-geometry.html)

![geometry](/files/naEBXpeZ72DhZI8Yw5gs)

## 几何模型(Geometries)

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

基本几何形状包括：立方体、平面、球体、圆柱体、四面体、八面体等几何形状，以及以三维文字作为几何形状的方法。

### 1、BoxGeometry 盒状几何体

盒型几何是四边形的原始几何类。它通常用于创建一个立方体或带有"宽度"、"高度"和"深度"构造函数参数的不规则四边形。

`BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)`

* width -- X轴上的面的宽度
* height -- Y轴上的面的高度
* depth -- Z轴上的面的深度
* widthSegments -- 可选参数. 沿宽度面的分割面数量. 默认值为1.
* heightSegments -- 可选参数. 沿高度面的分割面数量. 默认值为1.
* depthSegments -- 可选参数. 沿深度面的分割面数量. 默认值为1.

### 2、CircleGeometry 圆形几何体

`CircleGeometry(radius, segments, thetaStart, thetaLength)`

* radius -- 圆的半径, 默认值 = 50.
* segments -- 分割面数量 (三角形), 最低值 = 3, 默认值 = 8.
* thetaStart -- 第一个分割面的开始角度, 默认值 = 0 (3点钟方向).
* thetaLength -- 圆形扇形的圆心角通常称为θ。默认为2 \* Pi，这形成了一个完整的圆

### 3、ConeGeometry 圆锥形几何体

`ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)`

* radius -- 锥底半径. 默认值为20.
* height -- 锥体高度. 默认值为100.
* radiusSegments -- 围绕圆锥周长的分割面数量. 默认值为8.
* heightSegments -- 沿圆锥高度的分割面数量. 默认值为1.
* openEnded -- 指示锥底是打开还是覆盖的布尔值. 默认值为false, 意思是覆盖.
* thetaStart -- 第一个分割面的开始角度, 默认值 = 0 (3点钟方向).
* thetaLength -- 圆形扇形的圆心角通常称为θ。默认为2 \* Pi，这形成了一个完整的锥体.

### 4、CylinderGeometry 圆筒几何体

`CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)`

* radiusTop -- 圆柱体顶端半径. 默认值为20.
* radiusBottom -- 圆柱体底端半径. 默认值为20.
* height -- 圆柱体高度. 默认值为100.
* radiusSegments -- 围绕圆柱体周长的分割面数量. 默认值为8.
* heightSegments -- 沿圆柱体高度的分割面数量. 默认值为1.
* openEnded -- 指示圆柱体两端是打开还是覆盖的布尔值. 默认值为false, 意思是覆盖.
* thetaStart -- 第一个分割面的开始角度, 默认值 = 0 (3点钟方向).
* thetaLength -- 圆形扇形的圆心角通常称为θ。默认为2 \* Pi，这形成了一个完整的圆柱体.

### 5、PlaneGeometry 平面几何体

`PlaneGeometry(width, height, widthSegments, heightSegments)`

* width -- 沿X轴宽度.
* height -- 沿Y轴高度
* widthSegments -- 可选参数，x方向的分段数，缺省为1。
* heightSegments -- 可选参数，y方向的分段数，缺省为1。

### 6、SphereGeometry 球形几何体

`SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)`

* radius -- 球体半径. 默认值为50.
* widthSegments -- 水平分割面的数量. 最小值为3, 默认值为8.
* heightSegments -- 垂直分割面的数量. 最小值为2, 默认值为6.
* phiStart -- 指定水平起始角度. 默认值为0.
* phiLength -- 指定水平扫描角度大小. 默认值为 Math.PI \* 2.
* thetaStart -- 指定垂直起始角度. 默认值为0.
* thetaLength -- 指定垂直扫描角度大小. 默认值为Math.PI.

### 7、TorusGeometry 空心环几何体

`TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)`

* radius -- 半径, 默认值为100.
* tube -- 管道直径. 默认值为40.
* radialSegments -- 默认值为8
* tubularSegments -- 默认值为6.
* arc -- 圆心角. 默认值为Math.PI \* 2.

### 8、TorusKnotGeometry 环面扭结几何体

`TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q)`

* radius -- 半径, 默认值为100.
* tube -- 管道直径. 默认值为40.
* tubularSegments -- 默认值为64.
* radialSegments -- 默认值为8.
* p -- 这个值决定了几何体绕旋转对称轴绕了多少圈. 默认值为2.
* q -- 这个值决定了几何体绕环面的圆绕了多少圈. 默认值为3.

### 9、TextGeometry 3D文字几何体

`TextGeometry(text, parameters)`

text -- 要显示的文字

parameters -- 包含下面这些参数的对象

* font -- THREE. 字体.
* size -- Float. 大小.
* height -- Float. 文字厚度. 默认值为50.
* curveSegments -- Integer. 曲线上点的数量. 默认值为12.
* bevelEnabled -- Boolean. 是否打开斜面. 默认值为False.
* bevelThickness -- Float. 文本斜面的深度. 默认值为10.
* bevelSize -- Float. 斜面离轮廓的距离. 默认值为8.

threejs 只提供了一部分3D字体模型. 汉字没戏了，

目前支持的字体有 helvetiker , optimer , gentilis , droid sans , droid serif 每种都包含normal正常体和 bold 粗体.

***

本文部分内容参照及引用：

> [Three.js入门指南](http://www.ituring.com.cn/book/1272)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/awesome/webgl/awesome-threejs-playground/docs/hello-geometry.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.