ThreeJS - USDZExporter rotation of texture

Question

Im working on a project that lets the user change a texture of a 3D modal trough a uploaded image. After uploading the image has to be rotated.

This is how i apply the texture/image:

var texture = new THREE.TextureLoader().load('files/images/Verano.png');
 texture.matrixAutoUpdate = false;
 texture.repeat.x = 1.4;
 texture.offset.x = 1.2;
 texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
 texture.rotation = Math.PI / -2;

var material = new THREE.MeshStandardMaterial({
      map: texture,
      side: THREE.FrontSide,
 });
 mesh_flag.material = material;

I also add the rotation to the material map like so:

const textureRotation = new THREE.Matrix3().set(
      0, 0, -1,
      0, 1, 0,
      1, 0, 0
 );
 mesh_flag.material.map.matrixAutoUpdate = false;
 mesh_flag.material.map.matrix.multiply(textureRotation);

All of the above works in the viewer from ThreeJS and when I export it to GLB through the GTLFExporter is also works good. But when I export the scene to USDZ trough the USDZExporter the rotation is horizontal instead of vertical.

I tried to change the rotation of the texture or from the model, also tried to add options to the USDZexporter but that didn't solved it.

Option: preserveTextureMatrix: true

Does someone know why the texture in USDZ doesn't apply the same as in the GLB while im using the same scene for both and it looks good in the ThreeJS viewer.

ThreeJS - USDZExporter rotation of texture

0 Answers0