随笔 - 312  文章 - 0  评论 - 2  阅读 - 11万

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   香香鲲  阅读(1018)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示