javascript - 将纹理分配给 Three.js 中加载的 glb 模型

Question

我加载了一个使用 Three.JS 在 SketchUp 中创建的简单 glb 模型。该模型包含一个名为“文本”的组。

模型在 Three.js 中加载并显示良好，我可以通过遍历加载的模型找到网格。

我想创建一些文本，然后将该文本显示为模型上的纹理。但是当我指定纹理时，它只是黑色。如果改为指定颜色，它将按预期工作。我尝试了很多不同的东西，但纹理仍然是黑色的。

我使用以下代码进行分配:

  var textModelMesh = FindMeshWithNameInModel(model, "Text");
  var textTexture = CreateCanvasTexture("Hello");

  textModelMesh.material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, map: textTexture})

如何让文本显示在加载的模型上？

fiddle 链接:https://jsfiddle.net/ajo27ny4/28/

Answer 1

网格的几何形状没有纹理坐标。您可以通过调试几何对象的缓冲区属性来看到这一点。只有 position 和 normal 但没有 uv 属性。我建议您确保 SketchUp 中的纹理坐标有效，然后执行新的 glTF 导出。

三.js R105