How to add a highlighted edge effect to a single target of an instantiated mesh model?

Questions
1

image
image1920×984 420 KB

image
image1920×984 166 KB

2

When an instance is selected, temporarily render that one instance as a regular Mesh, and feed that into OutlinePass.

const tempMatrix = new THREE.Matrix4();
const dummy = new THREE.Object3D();

// your instanced mesh
const instancedMesh = ...

function getInstanceMesh(instanceId) {
 instancedMesh.getMatrixAt(instanceId, tempMatrix);

 dummy.matrix.copy(tempMatrix);
 dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);

 const mesh = new THREE.Mesh(
 instancedMesh.geometry,
 instancedMesh.material
 );

 mesh.position.copy(dummy.position);
 mesh.quaternion.copy(dummy.quaternion);
 mesh.scale.copy(dummy.scale);

 return mesh;
}

Then

const selectedMesh = getInstanceMesh(instanceId);
scene.add(selectedMesh);

outlinePass.selectedObjects = [selectedMesh];
3

This seems to perform poorly, especially when I move dynamically in real-time through the highlights.