Three.js之几何体(补充)

文字形状(TextGeometry)

下载说明

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

这里,我们以 helvetiker字体为例。我们在Three.js GitHub master/examples/fonts目录下,下载helvetiker_regular.typeface.json文件放在你的目录下,然后用以下方法加载:

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

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

参数介绍

创建文字形状的流程和之前介绍的基本几何形状是类似的,其构造函数是:

THREE.TextGeometry(text, parameters)

其中,text是文字字符串,parameters是以下参数组成的对象:

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

自定义形状

由于自定义形状需要手动指定每个顶点位置,以及顶点连接情况,如果该形状非常复杂,程序员的计算量就会比较大。在这种情况下,建议在3ds Max之类的建模软件中创建模型,然后使用Three.js导入到场景中,这样会更高效方便。

自定义形状使用的是Geometry类,它是其他如CubeGeometry、SphereGeometry等几何形状的父类,其构造函数是:

THREE.Geometry()

需要注意的是,new THREE.Vector3(-1, 2, -1) 创建一个矢量,作为顶点位置追加到geometry.vertices数组中。

而由new THREE.Face3(0, 1, 3)创建一个三个顶点组成的面片,追加到geometry.faces数组中。由其来连接顶点,三个参数分别是三个顶点在geometry.vertices中的序号

在之前版本的Three.js中,可以使用Face4创建四边形,如今已经弃用。由于四个点未必共面,所以使用三角形永远是最安全的方法。

ps:原网站在http://www.ituring.com.cn/book/miniarticle/50499

猜你喜欢

转载自blog.csdn.net/disasters/article/details/81813741