[SOLVED] How to rotate a map image in MeshPhongMaterial by 90 degrees?

Questions
1

Hi,

I have a MeshPhongMaterial with map that has an image (that is loaded via THREE.TextureLoader)
The image appears rotated by 90 degrees in the scene

I have another material of type SpriteMaterial with map that has an image that I can rotate, by setting the rotation flag:

let rotationVal = (-Math.PI / 2);
var material = new THREE.SpriteMaterial( { map: map2,
color: 0xffffff,
rotation: rotationVal,
fog: true } );

The SpriteMaterial has a rotation variable, but the MeshPhongMaterial doesn’t

How can I rotate the map image in the MeshPhongMaterial by 90 degrees?

Thanks,
Avner

2

You should apply the rotation to the texture, not the material:

texture.rotation = Math.PI / 2;

You can read more about it in the docs.

1 Like
3

Thanks for the answer.
I prepared a jsfiddle here. After setting the center to (0.5, 0.5) the rotation works as expected.

1 Like