Three.js outline mesh

Question

How can I get outline affect the same as in THREE.js editor ?

I've tried this:

// child = child of my object

var outlineMaterial1 = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.BackSide } );

var outlineMesh1 = new THREE.Mesh( child.geometry, outlineMaterial1 );
outlineMesh1.position = child.position;

outlineMesh1.scale.multiplyScalar(1.05);
scene.add( outlineMesh1 );

Trying to do the same as in this example (code). I'm getting completely different effect:

Same questions: #1 and #2.

score 4 · Accepted Answer · edited May 23 '17 at 12:31

4

Did you try wireframe?

var outlineMaterial1 = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.BackSide, wireframe: true } );

Not sure if you would need THREE.BackSide or not.
take a look at the parameters for MeshBasicMaterial here

Have you looked at the code for the editor to see how it does it?

EDIT

I think the editor is using a BoxHelper object which creates the outline

EDIT

HERE is a stack question showing how to have the BoxHelper render on top.
HERE is a fiddle as an example implementing the above.

edited May 23 '17 at 12:31

Community

1
1

answered May 22 '16 at 10:50

2pha

9,798
2
29
43

1

the editor seems to be using THREE.BoxHelper. I have updated my answer – 2pha May 22 '16 at 11:04
I've tried this, but all I can see is some front lines, nothing from back-side of the object. https://imgur.com/v5aD3Eg – artyomboyko May 22 '16 at 11:18
1

see [THIS](http://stackoverflow.com/questions/12666570/how-to-change-the-zorder-of-object-with-threejs) stack question on how to get the THREE.BoxHelper always on top. – 2pha May 22 '16 at 11:55

score 0 · Answer 2 · answered Sep 09 '20 at 05:39

If you need somethink of this when user tap on mesh you can use this code :

  let geo = new THREE.EdgesGeometry(intersects[0].object.geometry);
            let mat = new THREE.LineBasicMaterial({ color: "black", linewidth: 10 });
            let wireframe = new THREE.LineSegments(geo, mat);
            wireframe.renderOrder = 1; // make sure wireframes are rendered 2nd
            intersects[0].object.add(wireframe);

Three.js outline mesh

2 Answers2