Three.js 在场景中合并多个TextBuffer几何体

我正在尝试将以下代码更改为使用TextBufferGeometry而不是TextGeometry，因为我觉得这可能会提高我用例中的性能。下面的代码用于将多个文本元素渲染到我的场景中，但是当我更改

let geometry=new THREE.TextGeometry（…

to

let geometry=new THREE.TextBufferGeometry（…

此代码不再将文本渲染到场景中。我不确定需要更改哪些内容才能使用TextBufferGeometry

const materialWhite = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });

const textArray = [
      { text: `Message 12345`, zDistance: 100 },
      { text: `Message 67890`, zDistance: 200 },
      { text: `Message 13579`, zDistance: 300 },
   ];

var singleFontGeometry = new THREE.Geometry();

    for (let index = 0; index < textArray.length; index++) {

      loaderFonts.load('./assets/fonts/Oxanium.json', function(font) {

        let geometry = new THREE.TextGeometry(`${textArray[index].text}`, {
          font: font,
          size: 20,
          height: 1
        });

        let mesh = new THREE.Mesh(geometry, materialWhite);

        mesh.position.set(100, 100, textArray[index].zDistance);

        singleFontGeometry.mergeMesh(mesh);

      });
    }

var meshFont = new THREE.Mesh(singleFontGeometry, materialWhite);

this.scene.add(meshFont);

const materialWhite=new THREE.MeshBasicMaterial（{color:0xffffff，side:THREE.DoubleSide}）；
常量文本数组=[
{文本：`message12345`，zDistance:100}，
{文本：`Message 67890`，zDistance:200}，
{文本：`Message 13579`，zDistance:300}，
];
var singleFontGeometry=new THREE.Geometry（）；
for（让index=0；index

上述代码需要进行三项主要更改：

在循环中，创建

三个.TextBufferGeometry

实例，而不是

TextGeometry

不要在每个网格上设置位置，而是在合并之前使用

geometry.translate（…）

将变换烘焙到几何体中

与其向

THREE.Geometry

实例添加几何体，不如使用BufferGeometryUtils创建一个合并的BufferGeometry实例。BufferGeometry没有

。mergeMesh（）

方法，并且

。merge（）

覆盖顶点而不是创建并集，因此此处两者都不可用

此外，与问题无关，您可能不想在For循环中加载字体，以避免不必要的请求。通过这些更改，代码应该如下所示：

import*作为“三”中的三；
从'three/examples/jsm/utils/BufferGeometryUtils.js'导入{BufferGeometryUtils}；
var合并计量法；
//加载字体一次。
loaderFonts.load（'./assets/fonts/Oxanium.json'，函数（字体）{
//然后为每个文本项创建一个*BufferGeometry。
var geometrics=textary.map（函数（文本）{
var geometry=new THREE.TextBufferGeometry（text.text{
字体：字体，
尺码：20，
身高：1
});
//获取每个项目的唯一Z偏移，并将其烘焙到几何体中。
几何翻译（0，0，text.zDistance）；
返回几何；
});
//合并所有文本几何图形。
MergeGeometry=BufferGeometryUtils.MergeBufferGeometry（几何）；
var网格=新的三网格（MergeGeometry，materialWhite）；
//将共享的x=100，y=100偏移放置到网格上，以便以后可以对其进行更改。
网格位置设置（100,100,0）；
场景。添加（网格）；
});

---

^请注意，BufferGeometryUtils不包含在three.js构建本身中，必须单独添加到应用程序中，如加载程序、控件和

examples/js*

文件夹中的其他内容。

如果您有大量文本，它可能也值得一看，这可以在较低顶点计数的情况下提供更好的性能。但它的行为是：ves有点不像“真实对象”例如，在场景中，如果我没有记错的话，你无法轻松计算文本周围的边界框。请欣赏详细的回答，Don，一些非常方便的代码风格提示！我尝试过你的解决方案，但我似乎无法使其起作用..当console.loging mergegeometry我相信几何图形正在合并，但出现了一个错误wn下一行…..THREE.Object3D.add:对象不是THREE.Object3D.undefined的实例…..追溯到scene.add（网格）；场景中似乎没有文本，并且场景的三角形计数与没有文本时保持不变，因此我猜添加到场景中的网格和纹理失败了？在上面的版本中，至少，

网格

是在上面几行创建的，应该是有效的…可能需要创建演示？请注意，我已经移动了

场景。与原始代码相比，在字体加载回调中添加（…）

part。我的建议是，您的解决方案是绝对正确的！我没有正确设置项目以处理BufferGeomUtils。圣诞节假期让我的速度变慢了：）观察结果显示，虽然draw调用稍微多了一点，但是内存消耗大大减少，一切都运行得更加顺畅。谢谢大家&新年快乐