Textures does not align with the 3d Model

[WRAITH_GAMING]

import React from 'react'
import { useGLTF, useTexture } from '@react-three/drei'
import * as THREE from 'three'

export default function Model(props) {
  const { nodes } = useGLTF('/model.glb')

  // Load the texture for the keyboard and mouse
  const keyboardMouseTexture = useTexture('/Textures/test.jpg')

  // Adjust texture properties based on UV map analysis
  keyboardMouseTexture.wrapS = keyboardMouseTexture.wrapT = THREE.RepeatWrapping
  keyboardMouseTexture.repeat.set(1.2, 1.2)  // No scaling needed
  keyboardMouseTexture.offset.set(2, 5)  // Example values to adjust the position
  keyboardMouseTexture.center.set(1, 1)
  keyboardMouseTexture.rotation = Math.PI / 2

  return (
    <group {...props} dispose={null}>
      <group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
        {/* Monitor */}
        <mesh geometry={nodes.BackPowerButton.geometry} material={nodes.BackPowerButton.material}>
          {/* Texture settings for the monitor can be added here similarly */}
        </mesh>
        <mesh geometry={nodes.Body001.geometry} material={nodes.Body001.material}>
          {/* Texture settings for the monitor can be added here similarly */}
        </mesh>
        <mesh geometry={nodes.BrightnessKnob.geometry} material={nodes.BrightnessKnob.material}>
          {/* Texture settings for the monitor can be added here similarly */}
        </mesh>
        <mesh geometry={nodes.Screen.geometry} material={nodes.Screen.material}>
          {/* Texture settings for the monitor can be added here similarly */}
        </mesh>

        {/* Keyboard */}
        <mesh geometry={nodes.Keyboard001.geometry} material={nodes.Keyboard001.material}>
          <meshStandardMaterial map={keyboardMouseTexture} />
        </mesh>
        {[
          'A', 'B', 'Backspace', 'BracketClose', 'BracketOpen', 'C', 'CapsLock', 'Colon',
          'Command', 'D', 'E', 'Eight', 'Enter', 'F', 'Five', 'ForwardSlash', 'Four', 'G',
          'GreaterThan', 'H', 'I', 'J', 'K', 'L', 'LessThan', 'M', 'Minus', 'N', 'Nine', 'O',
          'One', 'Option_L', 'Option_R', 'P', 'Plus', 'Q', 'QuestionMark', 'Quotes', 'R', 
          'Return', 'S', 'Seven', 'Shift_L', 'Shift_R', 'Six', 'Spacebar', 'T', 'Tab', 'Three',
          'Tilde', 'Two', 'U', 'V', 'W', 'X', 'Y', 'Z', 'Zero'
        ].map(key => (
          <mesh key={key} geometry={nodes[key].geometry} material={nodes[key].material}>
            <meshStandardMaterial map={keyboardMouseTexture} />
          </mesh>
        ))}

        {/* Mouse */}
        <mesh geometry={nodes.MouseBody.geometry} material={nodes.MouseBody.material}>
          <meshStandardMaterial map={keyboardMouseTexture} />
        </mesh>
        <mesh geometry={nodes.MouseButton.geometry} material={nodes.MouseButton.material}>
          <meshStandardMaterial map={keyboardMouseTexture} />
        </mesh>
      </group>
    </group>
  )
}

useGLTF.preload('/model.glb')

The texture applies perfectly in blender but even though I have tried editing and aligning it manually, it is not getting aligned properly. I’m very new to ThreeJs and have no idea what to do.

[Lawrence3DPK]

@WRAITH_GAMING

  // Adjust texture properties based on UV map analysis
  keyboardMouseTexture.wrapS = keyboardMouseTexture.wrapT = THREE.RepeatWrapping
  keyboardMouseTexture.repeat.set(1.2, 1.2)  // No scaling needed
  keyboardMouseTexture.offset.set(2, 5)  // Example values to adjust the position
  keyboardMouseTexture.center.set(1, 1)
  keyboardMouseTexture.rotation = Math.PI / 2

is there a reason you’re applying these transformations to the texture?
.repeat.set(1.2, 1.2) // No scaling needed
sounds odd

[manthrax]

You probably have to set keyboardMouseTexture.flipY = false and remove any additional transforms you’ve added to it…
so like @Lawrence3DPK noted… remove all that:

keyboardMouseTexture.repeat.set(1.2, 1.2)  // No scaling needed
  keyboardMouseTexture.offset.set(2, 5)  // Example values to adjust the position
  keyboardMouseTexture.center.set(1, 1)
  keyboardMouseTexture.rotation = Math.PI / 2

This is because OpenGL uses a different vertical orientation for textures than some modelling software, so sometimes textures need to be flipped or unflipped.
By default texture.flipY is set to true to compensate for this, but your model may have come from software doing the same compensation so its happening twice.

[WRAITH_GAMING]

I’m still very new to Threejs and when I went online to find out how to manually position the textures, this is what a couple of websites and also ChatGPT referred. Please let me know if this is not a good method and if there is something else that I should use.

[WRAITH_GAMING]

I tried the flip option and was definitely a step in achieving the correct texture position but the texture still does not fit the model like it should. This is what I get after removing these transforms and just using the flip function

[manthrax]

It looks like there are multiple meshes in the scene perhaps, and each may have their own texture…

[WRAITH_GAMING]

Hey, I figured out that I also had to use
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
with texture.flipY = false (Thanks for the tip!)
and I got a way better result but the model is very reflective and not the exact color. Do you know what could be the cause? I am attaching my model and how it should look.

[manthrax]

Ooo! Good catch!