Hey there! Let's get your textured FBX model showing up properly in Three.js. I've worked through similar issues before, so here's a step-by-step breakdown to fix this:

1. Double-Check Your FBX Export Settings #

First, make sure your 3D software exported the texture data correctly:

• Embed textures (preferred): When saving as myfile.fbx, look for an option like "Embed Textures" in your export settings. This packs the texture data directly into the FBX file, so you don't have to manage separate image files.
• Keep texture paths consistent: If you didn't embed textures, copy the original texture files (from the GitHub repo's models/fbx folder) into your project's models/fbx/ directory. Ensure the filenames match exactly what's referenced in the FBX (note: server environments are case-sensitive, so Texture.jpg vs texture.jpg matters!).
• Verify material links: Confirm your 3D software didn't break the texture-to-material connections during export. Re-open the exported FBX in your 3D tool to check if textures still display correctly.

2. Update Your Loading Code #

The default FBXLoader needs a little help finding textures. Adjust your code to set the correct asset path, and add extra debugging to catch issues:

// Import FBXLoader if using ES6 modules (skip if using the global Three.js build)
import * as THREE from 'three';
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';

const loader = new THREE.FBXLoader();
// Set the base path where your FBX and textures live
loader.setPath('models/fbx/');

loader.load(
  'myfile.fbx',
  (object) => {
    // Optional: Fix texture/material issues post-load
    object.traverse((child) => {
      if (child.isMesh) {
        // Ensure textures are marked for update
        if (child.material.map) {
          child.material.map.needsUpdate = true;
        }
        // Enable shadows if needed
        child.castShadow = true;
        child.receiveShadow = true;
      }
    });
    scene.add(object);
  },
  (progress) => {
    console.log(`Loading progress: ${Math.round((progress.loaded / progress.total) * 100)}%`);
  },
  (error) => {
    console.error('Failed to load FBX:', error);
    // Check Network tab in dev tools to see if textures are throwing 404 errors!
  }
);

3. Troubleshoot Common Issues #

• Textures not showing up?: Open your browser's DevTools > Network tab. If you see 404 errors for image files, your texture paths are wrong. Double-check the setPath value and that texture files are in the right folder.
• Material looks flat?: Some FBX models use PBR materials, which might not convert perfectly to Three.js's default materials. You can replace the material with a MeshStandardMaterial for better PBR support:

  if (child.isMesh) {
    const newMaterial = new THREE.MeshStandardMaterial({
      map: child.material.map,
      normalMap: child.material.normalMap,
      metalness: 0.5, // Adjust based on your model
      roughness: 0.5
    });
    child.material = newMaterial;
  }
  

• Version mismatch?: Ensure your Three.js version matches the one used in the reference example. Older versions might have different FBXLoader behavior—stick to a recent stable release if possible.

内容的提问来源于stack exchange，提问作者Nguyễn Minh Vương