几何形状（Geometry）

几何形状（Geometry）最主要的功能是储存了一个物体的顶点信息。

WebGL 需要程序员指定每个顶点的位置，而在 Three.js 通过创建几何形状节省这个工作量。

平面（PlaneGeometry）

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

widthSegments 为分段，见 立方体 部分笔记

立方体（CubeGeometry）

其实是长方体

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

width 是 x 方向上的长度； height 是 y 方向上的长度； depth 是 z 方向上的长度；

后三个都是分段数，一般不传。 比如 widthSegments 是 x 方向上的分段数。当 widthSegments 为 3 代表 x 方向上水平分为三份

球体（SphereGeometry）

todo

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

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

圆形（CircleGeometry）

todo

文字形状（TextGeometry）

使用文字形状需要下载和引用额外的字体库，具体参见Three.js GitHub 说明。

THREE.TextGeometry(text, parameters);

parameters 是对象

• size：字号大小，一般为大写字母的高度
• height：文字的厚度
• curveSegments：弧线分段数，使得文字的曲线更加光滑
• font：字体，默认是'helvetiker'，需对应引用的字体文件
• weight：值为'normal'或'bold'，表示是否加粗
• style：值为'normal'或'italics'，表示是否斜体
• bevelEnabled：布尔值，是否使用倒角，意为在边缘处斜切
• bevelThickness：倒角厚度
• bevelSize：倒角宽度

var loader = new THREE.FontLoader();
var text = "Hello";

loader.load("../lib/helvetiker_regular.typeface.json", function (font) {
  var mesh = new THREE.Mesh(
    new THREE.TextGeometry(text, {
      font: font,
      size: 1,
      height: 1,
    }),
    material
  );
  scene.add(mesh);

  // render
  renderer.render(scene, camera);
});