I am interested in adding an outline to meshes. To achieve this, I followed an example that involved creating a new mesh with the same geometry and scaling it. You can find the example here.
var outlineMaterial = new THREE.MeshBasicMaterial({color: 0x00ffff, side: THREE.BackSide});
this.outlineMesh = new THREE.Mesh(target.geometry, outlineMaterial);
this.outlineMesh.quaternion = target.quaternion;
this.outlineMesh.position = target.position;
this.outlineMesh.scale.copy(target.scale);
this.outlineMesh.scale.multiplyScalar(1.05);
this.scene.add(this.outlineMesh);
Initially, everything worked well as the position of the outlineMesh matched the target mesh's position. However, when I made the target mesh a child of another mesh, the position of the outlineMesh no longer aligned with the target mesh. I suspected this discrepancy was due to the target mesh's position being relative to its parent's coordinates while the outlineMesh remained in world coordinate.
Does anyone have any suggestions on how to ensure the outline works correctly for child meshes? Any guidance would be greatly appreciated! Thank you!