Assign texture to loaded glb model in Three.js

Question

I load a simple glb model created in SketchUp using Three.JS. The model contains a group called Text.

The model loads and displays fine in Three.js, and I can find the mesh by traversing the loaded model.

I want to create some text and then display that text as a texture on the model. But when I assign the texture, it's just black. If a assign a color instead, it works as intended. I tried a lot of different stuff, but the texture just remains black.

I assign using the below code:

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

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

How do I get the text to display on the loaded model?

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

Mugen87 Mugen87 · Accepted Answer · 2019-06-03T10:12:15

The geometry of your mesh has no texture coordinates. You can see this by debugging the buffer attributes of the geometry object. There is only a position and normal but no uv attribute. I suggest you ensure valid texture coordinates in SketchUp and then perform a new glTF export.

three.js R105

Assign texture to loaded glb model in Three.js

1 Answers