Texture on mesh (GLTF model .glb) is duplicated/mirrored

Questions
1

Hey everyone.

I am attaching pictures below.

I have a React app with a GLTF (.glb) model in it. I can put a texture on this model, but for whatever reason, this texture (Nike logo) is duplicated/mirrored. What’s the problem here?

I’m using React Three Fiber and React Three Drei.

Wrapper component:

<Canvas
      flat
      gl={{
        antialias: true,
        toneMapping: THREE.LinearToneMapping,
      }}
      camera={{ position: [7, 3, 8], fov: 20 }}
    >
      <ambientLight intensity={2.2} />
      <Model />
      <Environment preset="night" />
      <OrbitControls
        makeDefault
        enableDamping={false}
        enableZoom={false}
        enablePan={false}
      />
</Canvas>

Part of the Model component (this is how the texture is loaded on the model):

const texture = useTexture(url);

<group>
   <mesh
        geometry={nodes.myModel.geometry}
        material={materials["material-name"]}
        material-color='#fff'
      >
        <Decal position={position} rotation={rotation} scale={scale}>
            <meshStandardMaterial
              map={texture}
              toneMapped={false}
              transparent
              polygonOffset
              polygonOffsetFactor={-1}
            />
          </Decal>
      </mesh>
</group>

Images: Imgur: The magic of the Internet Imgur: The magic of the Internet

I also played with this example from the documentation (Iridescent decals - CodeSandbox). The textures on the bunny don’t duplicate/mirror. I loaded my model in this sandbox and I have the same problem. (By the way, I followed this Codesandbox example to implement my task.)

I tried ChatGPT and suggested me to inspect the model but I can’t, I’m not a designer. I checked the documentation too, couldn’t find anything related to this issue.

Thanks in advance.

3

Assuming the model has UV coordinates that fit the model – you might just need:

texture.flipY = false;
texture.colorSpace = THREE.SRGBColorSpace;

That said, arbitrary models and textures cannot necessarily be combined this way, the texture is usually designed for a particular UV space. Doing UV unwrapping to map the texture onto a particular part of the model is better done in Blender. Or if you only want to use three.js, perhaps use the decal system.

Setting the color space is unrelated to your issue but is best practice nonetheless.

4

@donmccurdy Thanks for your reply. The culprit was the value of the position, rotation, scale.

With this position value: [0.1, 0.01, 0.01] it just works normally. :+1: And the rotation should be [0, 0, 0] while the scale is just 0.1.

It looks like this now:
https://i.imgur.com/4UcgRDT.png

However, when I move the texture on the X and/or Y axis, it gets cut off.
https://i.imgur.com/d63Frv2.png

Any idea about this?

The concept here in this web app is that the user uploads a texture (a logo for example) and moves it around on the model.

5

https://i.imgur.com/wOM9r5h.png

@donmccurdy I understand the problem is that the texture is not following the model but I have no idea how to dynamically (and mathematically) calculate this. Like what should be multiplied with what? I have zero knowledge and experience with 3D models, just recently started working with these. Anyways, thanks for your help.