demo9.md

文字形状和自定义形状

---

在上节中了解了基本的几何形状以及其构造方法，下面我们来看看文字形状和自定义形状

---

1. 文字形状

首先来了解一下，在threejs中如何构造文字形状，加载字体需要引入额外的字体库，threejs提供了很多字体库：

• gentilis_bold.typeface.js
• gentilis_regular.typeface.js
• helvetiker_bold.typeface.js
• helvetiker_regular.typeface.js
• optimer_bold.typeface.js
• optimer_regular.typeface.js

我们将字体下载到了本地，这里有个然后通过loader方法去加载字体：

var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.js', function( font ) {
     var cube = new THREE.Mesh(new THREE.TextGeometry('Hello',
     {size: 1, height: 1,font:font}),
            new THREE.MeshBasicMaterial({
                color: 0xffffff,
                wireframe: true
            })
        );
      scene.add(cube);
      renderer.render(scene, camera);
  } );

为了显示一个hello文字。注意因为加载字体相当于一个异步的请求，因此renderer.render渲染方法应该在回调中执行。否则你看不到任何的渲染效果。

最后的渲染结果为：

2.自定义形状

自定义形状是指，我们通过指定所需形状的顶点，由顶点构成面，从而组成我们所需的具体形状。自定义形状的构造函数为：

THREE.Geometry()

我们以构建一个三棱锥为例（最新版的threejs使用face3，我们以棱锥为例更容易说明问题）：

  var geometry = new THREE.Geometry();
  //设置自定义形状的顶点
  geometry.vertices.push(new THREE.Vector3(0,2,0));
  // 底部4顶点
  geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
  geometry.vertices.push(new THREE.Vector3(2, 0, -2));
  geometry.vertices.push(new THREE.Vector3(2, 0, 2));
  geometry.vertices.push(new THREE.Vector3(-2, 0, 2));

  // 设置顶点连接情况
  // 底面
  geometry.faces.push(new THREE.Face3(1, 2, 3, 4));
  // 四个侧面
  geometry.faces.push(new THREE.Face3(0,1,2));
  geometry.faces.push(new THREE.Face3(0,2,3));
  geometry.faces.push(new THREE.Face3(0,3,4));
  geometry.faces.push(new THREE.Face3(0,1,4));

上述就是创建一个三棱锥的例子，具体的效果为：