reactjsthree.jsmeshtexture-mappingreact-three-fiber

Problem with texture mapping in react-three-fiber (three.js)

I want to apply this texture to one part of my yacht model:

enter image description here

In Blender it looks quite normal:

enter image description here

But in my browser I am getting this ugly result:

enter image description here

enter image description here

My code looks like this:

import { TextureLoader, MeshBasicMaterial } from 'three'
import leatherImage from '../../../assets/fabric_leather_02_diff_1k.jpg'

const initialTexture = new TextureLoader().load(leatherImage)
export const initialMaterial5 = new MeshBasicMaterial({ map: initialTexture })

//...

;(model.children[5] as Mesh).material = initialMaterial5

I have no idea what am I doing wrong here. UV vectors seem to be normal and other textures are also work quite fine.

Will be grateful for any ideas on how to solve this!

Solution

  • Problem was that the texture is not «big» enough to map correctly. I’ve explicitly specified this properties to make sure that texture will be repeated to fully map the model even if it is relatively small:

    initialTexture.wrapS = initialTexture.wrapT = THREE.RepeatWrapping

initialTexture.repeat.set(3, 3)