Texture becomes white when set it to material.map

Hello. I want to set the texture of the mesh’s map which I’m doing like this:

const {Eyesrc} = document.getElementById('Eye_texture')
const Eyetexture = new THREE.TextureLoader().load(Eyesrc)
Eyetexture.flipY = false

LeftEye = newElement.getObject3D('mesh').getObjectByName('the_mesh_name')
RigthEye = newElement.getObject3D('mesh').getObjectByName('the_mesh_name')


LeftEye.traverse((node) => {
    node.material.map = Eyetexture
})

RightEye.traverse((node) => {
    node.material.map = Eyetexture
})

I’ve successfully did it for its body mesh using the same way: traverse node and set material.map but somehow doing it for the eyes turns the eye white. I’m wondering if its cause of the way I’m setting the texture because the right and left eye use the same material but are 2 separate mesh’s. I’m checking the model on threejs editor and i added the texture to the map and it’s fine.

Make sure the geometry of the eye meshes has a uv attribute. Without texture coordinates, you can’t apply your map.

image

i checked the geometry in threejs editor. it shows that it has a uv attribute though

Can you inspect the texture coordinates more closely? Maybe they are not intended for your type of texture. Meaning the coordinates have to match to the texture so the respective colored areas appear on the mesh’s surface.

1 Like