从Blender导出Three.js(JSON)模型后，纹理在浏览器不显示

Let’s walk through the most common fixes to get your texture showing up in the browser:

1. Update Deprecated Three.js Methods #

Your code uses THREE.ImageUtils.loadTexture, which is no longer supported in modern Three.js versions. Replace it with THREE.TextureLoader instead. Also, remember texture loading is asynchronous—if you create the mesh before the texture finishes loading, it might not render correctly. Here’s adjusted code:

// Use TextureLoader instead of the deprecated ImageUtils
const textureLoader = new THREE.TextureLoader();

// Load texture first, then create the mesh once it's ready
textureLoader.load('img/wood.jpg', (texture) => {
  const loader = new THREE.JSONLoader();
  loader.load('chair.json', (geometry) => {
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const model = new THREE.Mesh(geometry, material);
    scene.add(model);
  });
});

Note: If you’re on a very new Three.js version, JSONLoader is also deprecated—switch to ObjectLoader (this depends on the exact export format from Blender).

2. Fix Blender Export & Model Setup #

Texture issues often start in Blender:

• UV Unwrapping: Your model must have UVs to map the texture. Select your chair in Blender, go to the UV Editing workspace, press U, and choose an unwrap method like Smart UV Project. No UVs = no texture mapping.
• Export Settings: When exporting to Three.js JSON:
  • Go to File > Export > Three.js (.json)
  • Under Textures, enable Embed Textures to include texture data directly in the JSON, or set Path Mode to Relative if your texture is in a subfolder
  • Ensure Include UVs is checked (it’s on by default, but double-check)

3. Verify Texture File Paths #

Double-check your texture path:

• img/wood.jpg should be relative to your HTML file. For example, if your HTML is in the root folder, the img folder needs to live at the same level, with wood.jpg inside.
• Open your browser’s dev tools (F12), go to the Network tab, and look for wood.jpg. If it shows a 404 error, your path is wrong—adjust it to point to the correct location.

4. Test a Different Material #

While MeshBasicMaterial works for unlit textures, switching to a lit material can help rule out issues. Just don’t forget to add lights to your scene:

const material = new THREE.MeshStandardMaterial({ map: texture });
// Add basic lighting to see the texture properly
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
scene.add(new THREE.DirectionalLight(0xffffff, 0.5));

5. Switch to glTF (Recommended) #

The Three.js JSON format is outdated—glTF is the modern, reliable standard for 3D models in Three.js. It handles textures and materials seamlessly:

• In Blender, export via File > Export > glTF 2.0 (.glb/.gltf) (the exporter is included by default)
• Use GLB format to embed textures in a single file (avoids path issues entirely)
• Load it with GLTFLoader:

const loader = new THREE.GLTFLoader();
loader.load('chair.glb', (gltf) => {
  scene.add(gltf.scene);
});

These steps should resolve your texture problem. If you see specific errors in the browser console, that can help narrow things down further!

内容的提问来源于stack exchange，提问作者blackrox