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

Posted 2023-03-23

【中文标题】在 Three.js 中为加载的 glb 模型分配纹理

【英文标题】：Assign texture to loaded glb model in Three.js

【发布时间】：2019-10-18 20:08:01

【问题描述】：

我加载了一个使用 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)

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

小提琴链接：https://jsfiddle.net/ajo27ny4/28/

【参考方案1】：

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

three.js R105

【讨论】：

我再次进入 SketchUp 并分配了一个特定的纹理，保存，再次加载，然后文本工作了。谢谢:-)