How to add outline on child mesh in three js

Question

I'd like to add outline to meshes. I followed the example which created a new mesh using the same geometry, and scaled the mesh.

    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);

It works fine, the position of outlineMesh is always same to target mesh. However, when I added the target mesh as child to other mesh, the position of outlineMesh is different to the target mesh. I thought it's because the target position is related to parent's coordinate, but the outlineMesh is still in the world coordinate.

Any idea how to make outline work for child mesh? Thank you very much!

Answer 1

Just add the outlineMesh as a child of the target mesh, like so:

var outlineMaterial = new THREE.MeshBasicMaterial( { color: 0x00ffff, side: THREE.BackSide } );
outlineMesh = new THREE.Mesh( geometry, outlineMaterial );
outlineMesh.scale.multiplyScalar( 1.05 );
mesh.add( outlineMesh );

three.js r.67