Raycaster Issue with Updated GLB Model

The issue you're experiencing with the raycaster still detecting multiple parts of your chair despite unifying it in Blender is likely related to how Three.js handles imported GLB models and materials.

Possible Causes

1. Material Structure: Even if you've unified the mesh geometry in Blender, your chair might still have multiple materials assigned to different parts. In Three.js, each material section is often treated as a separate object for raycasting.

2. Browser Caching: Your browser might be caching the old GLB file, causing the old structure to persist despite your updates.

3. Model Hierarchy: The GLB loader might be preserving the internal structure even if visually it appears as one object.

Solutions

1. Check the Model Structure

After loading your model, inspect its structure to see if it still contains multiple meshes:

JAVASCRIPTCopied
function logModelStructure(object, indent = 0) {
  console.log(' '.repeat(indent) + object.name + ' (' + object.type + ')');
  object.children.forEach(child => logModelStructure(child, indent + 2));
}

// Use this after loading your model
logModelStructure(yourChairModel);

2. Modify Your Raycaster Code

Instead of changing the material of the intersected object, you could traverse up to find the parent object:

JAVASCRIPTCopied
function onMouseDown(event) {
  const coords = new three.Vector2(
    (event.clientX / renderer.domElement.clientWidth) * 2 - 1,
    -((event.clientY / renderer.domElement.clientHeight) * 2 - 1)
  );

  raycaster.setFromCamera(coords, camera);

  const intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {
    // Find the chair parent object
    let selectedObject = intersects[0].object;
    
    // Traverse up to find the main chair object
    // Adjust the condition based on your model structure
    while (selectedObject.parent && !selectedObject.name.includes('Chair')) {
      selectedObject = selectedObject.parent;
    }

    // Apply the color change to all child meshes
    selectedObject.traverse((child) => {
      if (child.isMesh && child.material) {
        const color = new three.Color(Math.random(), Math.random(), Math.random());
        
        // Handle both single materials and material arrays
        if (Array.isArray(child.material)) {
          child.material.forEach(mat => mat.color = color);
        } else {
          child.material.color = color;
        }
      }
    });

    console.log(`Selected: ${selectedObject.name}`);
  }
}

3. Clear Browser Cache

Make sure to clear your browser cache or use incognito mode to ensure you're loading the new model.

4. Force Material Unification

If you want to ensure the entire chair uses a single material instance:

JAVASCRIPTCopied
let chairMaterial;

// After loading the model
yourChairModel.traverse((child) => {
  if (child.isMesh) {
    if (!chairMaterial) {
      // Use the first material as the shared material
      chairMaterial = child.material.clone();
    }
    // Apply the same material to all meshes
    child.material = chairMaterial;
  }
});

This approach will ensure that when you change the color, it affects the entire chair uniformly.