想在Threejs中加入文字

秋洛_

已于 2024-07-16 11:24:52 修改

阅读量186

点赞数 6

文章标签： js webgl

于 2024-07-16 11:10:42 首次发布

本文链接：https://blog.csdn.net/weixin_43807413/article/details/140459888

版权

想在Threejs中加入文字

例如：在这里插入图片描述
想在Threejs生成的模型地板中加入文字并且铺在地上。可以用 FontLoader() 去加载文字。
然后还需要引入TextGeometry() 去生成文字的大小。

TextGeometry 引用路径three/examples/jsm/geometries/TextGeometry 。
FontLoader 引用路径 three/examples/jsm/loaders/FontLoader 。

以下代码：

 			const loaderFontDev = new FontLoader();
 			loaderFontDev.load("你的文字的json路径", (font) => {
                const textGeometry = new TextGeometry(`需要展示的内容`, {
                  font: font,
                  size: 4,
                  height: 0.1,
                  curveSegments: 12,
                  bevelEnabled: false,
                });
                const textMaterial = new THREE.MeshBasicMaterial({
                  color: 0x63d7fa,
                });
                textMesh = new THREE.Mesh(textGeometry, textMaterial);
                textGeometry.computeBoundingBox();
                // 下面内容根据自己的需求去控制位置 
                textMesh.position.x = 80 * (num - middleCol + 0.85);
                textMesh.position.y = 50; 
                textMesh.position.z = (index - middleRow + 1) * 80 + 17; 
                scene.add(textMesh);
            });