Texture displays as a solid color

[existential_donut]

Hey everyone!

I’m trying to apply a texture to a glb model exported from blender. The model has UVs but it seems like the texture is not being applied correctly. The texture loads fine and when applied to a cube, it is displayed correctly. But when it is applied to a t-shirt model only a small fraction or a pixel of the texture is applied to it. It looks like a solid color. This is what it looks like.

I don’t know what is causing this or how to fix it. I thought something was wrong with the model and the UVs, but the texture is being applied correctly in Blender. So it seems like it’s not that but honestly I’m not sure.

This is the jsx code for the model

  <group {...props} dispose={null}>
      <mesh
        geometry={nodes.OBJ.geometry}
        material={materials.Material}
        position={[0, 0, 0]}
        rotation={[Math.PI / 2, 0, 0]}
        scale={12.445}
      >
        <meshStandardMaterial
          attach="material"
          map={colorMap}
          //   side={BackSide}
        ></meshStandardMaterial>
      </mesh>
    </group>

I’d appreciate any help, I’m new to threejs.

[anidivr]

Since your mesh is scale up to 12.445, you likely need to repeat the texture by the same amount

    const repeat = 1 / 12.445
    texture.repeat.set(repeat, repeat)

Try centering the geometry.
Try adjusting the texture offset

One of these might give you a clue as to what’s wrong

[existential_donut]

Hi Anidivr,

Thanks for the help but it seems like that was not it. I tried exporting the model again with a texture material and then reapplying a new texture material in Threejs, which made it work. I’m not sure if that is the right way, am I supposed to export a texture material in Blender if I’m adding a texture to the model programmatically?

I also had to set texture.flipY = false to get the UV to map correctly.