Hey there! Let’s fix this texture issue properly—your current approach has a few small missteps that are keeping you from getting the ideal result. Let’s break down what’s going wrong first, then jump into the standard, up-to-date method.

Issues with Your Current Approach #

• Using MeshBasicMaterial means your model won’t respond to scene lighting, which is why your result looks flat or unrealistic. glTF models are designed to work with PBR materials like MeshStandardMaterial.
• Loading the texture inside the traverse loop is asynchronous—this means your material might be created before the texture finishes loading, leading to delayed or broken texture rendering.
• Replacing the entire material discards any built-in PBR properties (like roughness or metalness) that the original glTF model might have included, which hurts the final visual quality.

Standard Implementation Method #

Step 1: Handle Asynchronous Loading Correctly #

Always ensure your texture is loaded (or load it in parallel with the model) so it’s ready when you apply it to the mesh. Also, critical note: glTF textures don’t use flipped Y coordinates, but Three.js defaults to flipY: true—you’ll need to set this to false to avoid upside-down textures.

Step 2: Update Existing Materials (Don’t Replace Them) #

Instead of swapping out the entire material, modify the existing one to preserve the model’s original PBR characteristics. If a mesh has no material, create a MeshStandardMaterial (the standard for glTF) to maintain proper lighting behavior.

Full Working Code Example #

SET_Object: function(modelPath, texturePath) {
    // Clear the scene efficiently
    while (this.prodconf3_scene.children.length > 0) {
        const obj = this.prodconf3_scene.children[0];
        this.prodconf3_scene.remove(obj);
    }

    const modelLoader = new THREE.GLTFLoader();
    const textureLoader = new THREE.TextureLoader();

    // Load texture first, then apply to model once ready
    textureLoader.load(texturePath, (texture) => {
        // Fix glTF texture Y-axis flip
        texture.flipY = false;
        // Optional: Adjust texture wrapping/repeat if needed
        // texture.wrapS = THREE.RepeatWrapping;
        // texture.wrapT = THREE.RepeatWrapping;
        // texture.repeat.set(2, 2);

        modelLoader.load(modelPath, (gltf) => {
            const model = gltf.scene;
            
            model.traverse((o) => {
                if (o.isMesh) {
                    // Update existing material if it exists
                    if (o.material) {
                        o.material.map = texture;
                        // Optional: Tweak PBR properties to match your needs
                        // o.material.roughness = 0.6;
                        // o.material.metalness = 0.2;
                    } else {
                        // Create a glTF-compatible material if none exists
                        o.material = new THREE.MeshStandardMaterial({
                            map: texture,
                            color: 0xffffff // Default white to ensure texture displays correctly
                        });
                    }
                    // Tell Three.js to refresh the material
                    o.material.needsUpdate = true;
                }
            });

            this.prodconf3_obj = model;
            this.prodconf3_scene.add(this.prodconf3_obj);
        });
    });

    return true;
}

Step 3: Add Proper Lighting #

Don’t forget—MeshStandardMaterial requires lighting to render correctly! If your scene lacks lights, your model will still look black. Add this setup if you haven’t already:

// Example lighting for PBR materials
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
this.prodconf3_scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7.5);
this.prodconf3_scene.add(directionalLight);

Fixing the "Cannot read property 'center' of undefined" Error #

This error happens when you try to treat gltf.scene as a single Mesh—but gltf.scene is a Group that contains multiple meshes (and possibly other groups). Always use traverse to loop through all child meshes, like we did in the example, instead of trying to access material properties directly on the scene itself.

By following this approach, you’ll get a properly lit, textured model that preserves the original glTF’s material quality, with your external texture applied correctly.

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