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

Question

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

In Blender it looks quite normal:

But in my browser I am getting this ugly result:

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!

Are you sure that UV is correct? Three.js supports multiple UVs only for ao and lightmap. Is it a gltf model? If you don't have to change texture in the runtime, you can export binary gltf with all textures. Would you mind verifying how is your model presented in that viewer: sandbox.babylonjs.com — MTP
– MTP, Commented Oct 4, 2022 at 5:18
Thanks, I am using fbx model and changing textures in runtime is a key functionality there as it is a web-configurator. Problem actually was that I’ve incorrectly set texture.wrapS and wrapT properties. I’ve also specified repeat and now everything’s just fine. — Ilya Kruchinin
– Ilya Kruchinin, Commented Oct 5, 2022 at 14:20

Ilya Kruchinin · Accepted Answer · 2022-10-05 14:24:58Z

3

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)

answered Oct 5, 2022 at 14:24

Ilya Kruchinin

2465 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related