Flip/rotate texture on child mesh

Questions
1

Hello! I am importing a scene with multiple meshes. One of those child objects(meshes) is called “table”. I am applying a texture to it when hovered over and it works as expected. Now i would like to flip the texture as right now it is apllied vertically. I would like for it to be applied horizontally. How can that be achieved?

const textureTable = new THREE.TextureLoader();
const tableBaseColor1 = textureTable.load("./texture.jpg");

const loader = new GLTFLoader();
loader.load("./object.glb", function (environment) {
  mesh = environment.scene;
  scene.add(mesh);
});
---raycaster code here---
if (intersects.length > 0 && intersects[0].object == table) {
    table.material = new THREE.MeshStandardMaterial({
      map: tableBaseColor1,
    });
  }
2

Have you already tried to transform the texture by modulating the Texture.rotation property?

3

This is before rotation:

before
before606×903 37.9 KB 

tableBaseColor1.rotation = Math.PI / 2;

And this is after:

after
after586×872 28.7 KB

4

You also have to configure the correct wrapping mode. Try it with:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

Live demo: Edit fiddle - JSFiddle - Code Playground

1 Like