Threejs:创建文字

1. DOM + CSS

2. 将文字绘制到画布中,并将其用作Texture(纹理)

如果你希望在three.js的场景中的平面上轻松地绘制文本,请使用此方法。

3. 在你所喜欢的3D软件里创建模型,并导出给three.js

如果你更喜欢使用3D建模软件来工作并导出模型到three.js,请使用这种方法。

4. three.js自带的文字几何体

如果你更喜欢使用纯three.js来工作,或者创建能够由程序改变的、动态的3D文字,你可以创建一个其几何体为THREE.TextGeometry的实例的网格:

new THREE.TextGeometry( text, parameters );

文本缓冲几何体(TextGeometry)

一个用于将文本生成为单一的几何体的类。 它是由一串给定的文本,以及由加载的font(字体)和该几何体ExtrudeGeometry父类中的设置所组成的参数来构造的。

//创建一个简单的矩形
const geometry2 = new THREE.BufferGeometry();
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里,这两个顶点都需要被用到。
const vertices = new Float32Array([
  -1.0,
  -1.0,
  1.0,
  1.0,
  -1.0,
  1.0,
  1.0,
  1.0,
  1.0,

  1.0,
  1.0,
  1.0,
  -1.0,
  1.0,
  1.0,
  -1.0,
  -1.0,
  1.0,
]);

// itemSize = 3 因为每个顶点都是一个三元组。
geometry2.setAttribute("position", newTHREE.BufferAttribute(vertices, 3));
const material2 = new THREE.MeshBasicMa terial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry2, material2);

 

posted on 2022-12-05 10:46  香香鲲  阅读(982)  评论(0编辑  收藏  举报