Question

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

let geometry = new THREE.TextGeometry(...至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);

Answer 1

上面的代码将需要三个主要更改：

在循环中，创建TextGeometry实例而不是geometry.translate(...)。
与其在每个网格上设置位置，不如在合并之前使用THREE.Geometry烘焙将其转化为几何图形。
不要将几何添加到.mergeMesh()实例中，而是使用BufferGeometryUtils创建合并的BufferGeometry实例。 BufferGeometry没有.merge()方法，import * as THREE from 'three'; import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js'; var mergedGeometry; // Load the font once. loaderFonts.load('./assets/fonts/Oxanium.json', function(font) { // Then create a *BufferGeometry for each item of text. var geometries = textArray.map(function(text) { var geometry = new THREE.TextBufferGeometry(text.text, { font: font, size: 20, height: 1 }); // Take each item's unique Z offset, and bake it into the geometry. geometry.translate(0, 0, text.zDistance); return geometry; }); // Merge all text geometries. mergedGeometry = BufferGeometryUtils.mergeBufferGeometries( geometries ); var mesh = new THREE.Mesh(mergedGeometry); // Put the shared x=100,y=100 offset onto the mesh, so it can be changed later. mesh.position.set(100, 100, 0); scene.add(mesh); });会覆盖顶点而不是创建并集，因此此处均不可用。

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

examples/js*

^请注意，BufferGeometryUtils不包含在three.js构建本身中，必须单独添加到您的应用程序中，例如加载器，控件以及Grid文件夹中的其他内容。

合并场景中的多个TextBufferGeometries

1 个答案: