Three.js outline mesh

0
votes

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

enter image description here

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:

enter image description here

Same questions: #1 and #2.

2
three.js

2 Answers

3
votes

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.

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

img