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

Question

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

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

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

我使用以下代码分配：

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

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

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

Fiddle link: https://jsfiddle.net/ajo27ny4/28/

Answer 1

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

three.js R105

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

Assign texture to loaded glb model in Three.js

javascript

3d

three.js

gltf