three.js - 重载解析失败？

Question

我正在尝试使用 Promise 在平面上渲染 TTF 字体加载器并将其转换为纹理，然后在 index.js 上将其映射到 MeshBasicMaterial 但给了我上述错误

目标是在 3D 透明对象上折射下面创建的文本，当我在普通画布 filltext 上创建文本但想使用 three.js fontloader 时我成功了，请谁能告诉我错误可能是由什么引起的？

很多帮助将不胜感激。

谢谢

字体加载器.js

const loader = new TTFLoader();
export default function loadFonts(url) {
  return new Promise(resolve => {
    let font = null;
    let text = 'three.js';
    let group, textMesh1, textMesh2, textGeo, material;
    loader.load(url, function(json) {
      font = new THREE.Font(json);
      textGeo = new THREE.TextGeometry(text, {
        font: font,
        size: 70,
        height: 0,
        bevelThickness: 0,
        bevelSize: 0,
        bevelEnabled: false
      });
      textGeo.computeBoundingBox();
      textGeo.computeVertexNormals();
      const centerOffset = -0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);
      textMesh1 = new THREE.Mesh(textGeo, material);
      textMesh1.position.x = centerOffset;
      textMesh1.position.y = 0;
      textMesh1.position.z = 0;
      textMesh1.rotation.x = 0;
      textMesh1.rotation.y = 0;
      var texture = new THREE.Texture(textMesh1);
      texture.needsUpdate = true;
      resolve(texture)
    });
  });
}

index.js

async createBackground() {
    // const tex = await loadTexture("test.JPG");
    const tex = await loadFonts("/fonts/kenpixel.ttf");
    var material = new THREE.MeshBasicMaterial({
      map: tex
    })
    material.map.minFilter = THREE.LinearFilter;
    const quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(), material);
    quad.layers.set(1);
    quad.scale.set(this.vp.width, this.vp.height, 1);
    return quad;
  }

标签： three.js

Answer 1

var texture = new THREE.Texture(textMesh1);

不支持此工作流程。您不能将网格用作纹理的图像。