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.