Threejs texture import

General
1

Hi!

In this video with Sergey and Federico they go through threejs on webflow site.

However, in the latter part of the video they speed up quite a bit, and don’t really cover the importing of the 3d model with textures at all.

Me and others in the comment are stuck at this part. How would you import a GLB file with the textures already applied? Or how should you set up your textures so that they apply correctly to the model once imported separately (as in the video)?

Thanks for all help!

2

hey @fredrik! Whenever manageable my suggestion would be to do the two part separately, so you retain max control over the optimisation of the images. There’s cases though where it gets a bit crazier and you might want textures to be exported from blender directly with the model.

To do that on export, in the Material tab the dropdown Material should be set to Export. This way the GLTFLoader will take care of loading the texture and assigning it to the correct part of the mesh.

So the Mesh you load will already have the textures applied through the material that gets imported with the GLTFLoader.
No need to create the new Material(…) and assign it to the mesh like we do in the video. You will be able to refer to the material using mesh.material.

Let me know if this makes sense!

Adding to that: in case you want to give the mesh a different material but retain the loaded texture to the corresponding part of the mesh, after the model is loaded, when you are traversing it, you’ll want to temporarily save the texture, create a new material, attach the texture to the material, and assign the created material to the mesh.

mesh.traverse((child) => {
  if (child.isMesh){
    const newMaterial = new THREE.MeshStandardMaterial() // create a new material
    newMaterial.map = child.material.map; // assign the map from the loaded material to the new material
    child.material = newMaterial; // assign the new material to the original mesh
  }
})