Highlighting Child Objects with EffectComposer

When working with parent-child hierarchies in Three.js, highlighting only specific child objects using the EffectComposer can be challenging. The issue you're experiencing is likely related to how the OutlinePass (which I assume you're using) processes objects in a scene hierarchy.

The Problem

When you add a child object to the selectedObjects array of an OutlinePass, the parent-child relationship can interfere with the selection process. This happens because:

1. The child's world position and rendering are influenced by its parent
2. The OutlinePass may not properly isolate nested objects in a hierarchy

Solutions

Here are several approaches to resolve this issue:

1. Use Object Layers

You can use Three.js layers to control which objects are processed by the OutlinePass:

JAVASCRIPTCopied
// Setup different layers
const normalLayer = 0;
const outlineLayer = 1;

// Set parent to normal layer
parentMesh.layers.set(normalLayer);

// Set child to both layers
childMesh.layers.set(normalLayer);
childMesh.layers.enable(outlineLayer);

// Configure your render passes
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

// Create outline pass for objects on the outline layer
const outlinePass = new OutlinePass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  scene, 
  camera
);
outlinePass.selectedObjects = [childMesh];
composer.addPass(outlinePass);

2. Create a Separate Copy for Highlighting

Create an invisible copy of the child object that's not part of the hierarchy:

JAVASCRIPTCopied
// Create a copy of the child geometry for outlining
const outlineMesh = childMesh.clone();
outlineMesh.material = childMesh.material.clone();
outlineMesh.visible = false; // Make it invisible in normal rendering
scene.add(outlineMesh); // Add directly to scene, not as a child

// Update the outline mesh position in your animation loop
function animate() {
  // Update the outline mesh to match the child's world position
  childMesh.getWorldPosition(outlineMesh.position);
  childMesh.getWorldQuaternion(outlineMesh.quaternion);
  childMesh.getWorldScale(outlineMesh.scale);
  
  // Use the outline mesh for the outline effect
  outlinePass.selectedObjects = [outlineMesh];
  
  composer.render();
  requestAnimationFrame(animate);
}

3. Modify the Rendering Order

You could render the scene twice - once normally, and once with only the objects you want to highlight:

JAVASCRIPTCopied
// First render pass - normal scene
const normalRenderPass = new RenderPass(scene, camera);
composer.addPass(normalRenderPass);

// Create a separate scene for outlines
const outlineScene = new THREE.Scene();
outlineScene.add(childMesh.clone()); // Add only the child to this scene

// Second render pass - just for outlines
const outlineRenderPass = new RenderPass(outlineScene, camera);
outlineRenderPass.clear = false; // Don't clear the previous render
composer.addPass(outlineRenderPass);

// Add outline effect
const outlinePass = new OutlinePass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  outlineScene, 
  camera
);
composer.addPass(outlinePass);

Each of these approaches has different trade-offs in terms of performance and complexity. The best solution depends on your specific requirements and scene structure.