Three.js中OBJ+MTL加载器问题求助：OBJ模型无纹理显示

Hey there, let's get that texture issue sorted out for your THREE.js OBJ model! First off, you already spotted a syntax error (that misplaced comma instead of a dot after loader2), but there's also a key mistake in how you're applying the materials to your model. Let's break down the fixes step by step.

Corrected Code with Explanations #

Here's the revised version of your code that should get your textures showing up:

// Initialize MTLLoader first to load material definitions
const mtlLoader = new THREE.MTLLoader();
mtlLoader.load("models/house1.mtl", function(materials) {
    // Preload materials to ensure all referenced textures are loaded
    materials.preload();
    
    // Set up OBJLoader and link it to the loaded materials
    const objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    
    // Now load the OBJ model with the prepared materials
    objLoader.load("models/house1.obj", function(obj) {
        object = obj;
        object.scale.set(4, 4, 4);
        object.position.set(-60, 0, 30);
        object.rotation.set(0, 0, 0);
        scene.add(object);
    });
});

Key Fixes to Note #

• Syntax Error Fix: We fixed the dot notation for mtlLoader.load() (you already caught this, but it's locked in here).
• Material Preloading: Calling materials.preload() ensures all textures referenced in your MTL file are fully loaded before we load the OBJ—this prevents missing textures caused by race conditions.
• Proper Material Assignment: Instead of trying to set materials directly on the loaded OBJ with object.materials.set(), we use objLoader.setMaterials(materials) to tell the OBJLoader to apply the MTL materials during model loading. This is the standard, reliable way to pair OBJ and MTL files in THREE.js.
• Loader Order: We initialize the OBJLoader inside the MTLLoader's callback, so we only load the model once materials are ready.

Quick Troubleshooting if Issues Persist #

If textures still don't show up, double-check these:

• Your MTL file uses correct relative paths for textures (they should be relative to your HTML file, unless you set a base path with mtlLoader.setPath("models/")).
• Texture files (PNG/JPG, etc.) are in the right directory and accessible to your browser (no 404 errors in the dev tools network tab).
• Your scene has proper lighting—without lights, even textured models can appear black or invisible!

内容的提问来源于stack exchange，提问作者Evelina Diksaitė