THREE.js JSONLoader加载Blender导出模型：纹理丢失与位置偏移问题求助

Hey Kevin, let's work through these two problems you're hitting with your treehouse model. I've dealt with both of these before, so here's how to sort them out:

1. Missing Textures When Loading JSON Models #

The main issue here is that JSONLoader doesn't automatically load textures—you need to handle texture loading separately, and make sure your Blender export is set up to pass along the necessary material data.

What's Wrong with Your Current Code #

Your existing code creates a mesh using just the geometry, without assigning a material that includes the texture:

var loader = new THREE.JSONLoader(); 
loader.load("./script/treehouse.json",function ( geometry) { 
  var mesh = new THREE.Mesh( geometry); 
  $scene.add( mesh ); 
});

Without a material with a texture map, THREE.js just renders the model with a default blank material.

Fix Steps #

A. Update Your THREE.js Code

Use TextureLoader to load your texture first, then apply it to a material when creating the mesh:

// Create separate loaders for textures and geometry
const textureLoader = new THREE.TextureLoader();
const jsonLoader = new THREE.JSONLoader();

// Load texture first (replace with your actual texture path)
textureLoader.load('./textures/treehouse-texture.jpg', (texture) => {
  // Now load the model geometry
  jsonLoader.load('./script/treehouse.json', (geometry) => {
    // Create a material with the loaded texture
    const material = new THREE.MeshStandardMaterial({ 
      map: texture,
      side: THREE.DoubleSide // Optional, fixes issues if your model has flipped faces
    });
    const mesh = new THREE.Mesh(geometry, material);
    $scene.add(mesh);
  });
});

B. Check Blender Export Settings

Make sure your Blender export is configured to include material/texture data:

• Open the JSON export menu in Blender (File > Export > Three.js (.json))
• Under the Materials section, check "Export Materials" and "Export Textures"
• Ensure your texture file is in the same directory as the JSON file (or use a correct relative path)
• Double-check that your model has proper UV unwrapping in Blender—without UVs, textures won't map correctly!

2. Model Position Offset #

This almost always comes down to coordinate system differences between Blender and THREE.js, or unapplied transforms in Blender.

Quick Fixes #

A. Apply Transforms in Blender First

Before exporting:

1. Select your model in Blender
2. Press Ctrl + A and choose Location, Rotation, and Scale to apply all transforms
3. This resets the model's origin to the world center, so it exports aligned with THREE.js's origin

B. Adjust Position in THREE.js Code

If you can't re-export the model, you can center it programmatically:

jsonLoader.load('./script/treehouse.json', (geometry) => {
  // Center the geometry on the world origin
  geometry.center();
  
  const material = new THREE.MeshStandardMaterial({ map: texture });
  const mesh = new THREE.Mesh(geometry, material);
  
  // Optional: Fine-tune position manually if needed
  // mesh.position.set(0, 0, 0);
  
  $scene.add(mesh);
});

geometry.center() automatically shifts the model so its bounding box center matches the world origin.

Blender Export Transform Settings #

Also, in the Blender JSON export menu, under Transform:

• Set "Up" to Y Up (matches THREE.js's coordinate system)
• Check "Apply Transform" to bake in any remaining transforms during export

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