texture not applied well

Questions
1

please I really need help, I am a web developer. when i apply material to my model it has this, when i console to see if it has UV PRESENT, i see it does, I got the model from 3d team, do i need more features on exported FBX ?

my Code
"import React, { useEffect } from “react”;
import { useFBX, useTexture } from “@react-three/drei”;
import { MeshStandardMaterial, Mesh } from “three”;

type Props = {};

const Sofa1 = (props: Props) => {
// Load the textures
const terrainTextures = useTexture({
map: “https://data.expivi.net/teams/4145/media/file_62d7fe05a293f/Arctic_COL_LOW.jpg”,
roughnessMap: “/Specchio bump map_LOW.jpg”,
metalnessMap: “/Velvet-Dirt 3.jpg”,
normalMap: “/Enigma Natural(1.4cmsq)nrm.jpg”,
envMap:
“https://data.expivi.net/teams/4145/media/file_623c39c5612c7/barxat%20bump.jpg”,
bumpMap:
“https://data.expivi.net/teams/4145/media/file_62d7fe16023a2/Arctic_NRM_LOW.jpg”,
});

// Create the custom material
const customMaterial = new MeshStandardMaterial({
map: terrainTextures.map,
roughnessMap: terrainTextures.roughnessMap,
metalnessMap: terrainTextures.metalnessMap,
normalMap: terrainTextures.normalMap,
envMap: terrainTextures.envMap,
bumpMap: terrainTextures.bumpMap,
color: “white”,
});

const fbx = useFBX(“/om - Large Sofa.fbx”);

useEffect(() => {
if (fbx) {
fbx.traverse((child) => {
if (child instanceof Mesh) {
// Log details of the node
console.log(“Node Name:”, child.name);
console.log(“Node Type:”, child.type);
console.log(“Child Geometry:”, child.geometry);
console.log(“Child Geometry UVs:”, child.geometry.attributes.uv);
console.log(“Current Child Material:”, child.material);
console.log(“Custom Material:”, customMaterial);

      if (!child.geometry.attributes.uv) {
        console.warn(`UV mapping is missing on ${child.name}`);
      }

      child.material = customMaterial;
      child.visible = true;

      // Log material application success
      console.log(`Material applied to ${child.name}:`, child.material);
    }
  });

  // Log the entire FBX hierarchy
  console.log("FBX Hierarchy:", fbx);
}

}, [fbx, customMaterial]);

return ;
};

export default Sofa1;

Screenshot 2024-07-08 at 08.20.58
Screenshot 2024-07-08 at 08.20.581920×1060 63.3 KB

2
  1. Please format code in posts, it’s easier to read.
  2. Are the UVs correct? If you open the model in Blender and apply textures there, they map correctly?
  3. If the answer to question 2 is “yes”, try setting .flipY to true in the loaded texture maps.
2 Likes
3

To repeat a texture you need set its wrapS and wrapT to THREE.RepeatWrapping (or 1000). By default it sets to THREE.ClampToEdgeWrapping, and if uv coordinates is out of [0-1], the nearest pixsel of the image edge renders.

3 Likes
4

thank you… this worked.

2 Likes