How can I add an outline to a plane?

Questions
1

i have PlaneGeometry.which create a simple plane to me.how can i show a outline on the plane
for eg:http://stemkoski.github.io/Three.js/#outline
here u can see it applied to cube but when i tried on plane it wont working pls help

2

Try it like so:

https://jsfiddle.net/w1tfrL6p/

The idea is to use plane.renderOrder = 1; so the actual mesh is always rendered on top of the outline mesh. For planes, it’s also not necessary to set the side property to THREE.BackSide.

You can also add outline effects via post-processing:

https://threejs.org/examples/webgl_postprocessing_outline

2 Likes
3

thankyou very much it worked

4

can i ask one more doubt.i need to initialy show the outline colour green then when the time runs out i need to shrink its length.like a animation will this be posible with this|

5

related

1 Like
6

Have you tried to animate Object3D.scale of the outline mesh? You can use a simple animation lib like tween.js to animate the property in various ways.

3 Likes
7

thanks again let me try

8

hi i didn’t got that.i dont know which property to modify to get such an effect…modifying x,y cordinates not worked.

https://jsfiddle.net/tw2p9gqd/

9

Hello!
You can use THREE.BoxHelper();
Here are some code for outline.

    var selectionBox = new THREE.BoxHelper();
    selectionBox.material.depthTest = false;
    selectionBox.material.transparent = true;
    selectionBox.material.color.set('#ff8c11'); // Customize the color for outline.
    selectionBox.visible = false; // Hidden outline.
    scene.add( selectionBox );

    var plane_mesh = ... // Assume the plane that you created.

    var box = new THREE.Box3();
    box.setFromObject( plane_mesh);
    if ( box.isEmpty() === false ) {
        selectionBox.setFromObject( plane_mesh );
        selectionBox.visible = true;
    }

Regards!