CODEWITHSUNDEEP
three.jstextures
leogarcia
leogarcia

Reputation: 21

My texture is not displayed correctly Three.js

I discovered Three.js recently and started playing with it, I'm trying to programmatically apply a texture to a GLTF2 Mesh that I designed in blender, it works but the texture isn't displaying like it should.

My code (working)

document.addEventListener('click', () => {
  let texture = textureLoader.load( './gagency.jpg' );
  texture.center.set(0.5, 0.5)
  let material = new THREE.MeshBasicMaterial( { map: texture } );
  meshLaptop.children[2].material = material; //the screen of the 3d laptop
})

The texture I'm trying to apply

screen to display

The result

render result

I tried to redo the uv mapping of the plane mesh in blender but the problem doesn't seems to be related to that.

Thank you for taking the time to read my issue, I hope someone have already been in my situation and found a solution, if you need more code or screenshot feel free to ask.

Upvotes: 1

Views: 150

Answers (1)

leogarcia
leogarcia

Reputation: 21

New answer : after more tests I found that the problem was indeed the UV mapping of the screen that wasn't correctly reloaded in my browser, if something similar append to you clean up the UV map and you'll be good to go

Old answer : I didn't change anything and the problem is gone after some cache clearing, I still don't know what was causing the issue because I already tried to empty my browser cache before posting my question and it didn't do anything, but it is fixed now

Upvotes: 0

Related Questions