How can I add an outline to a plane?

i have PlaneGeometry.which create a simple plane to can i show a outline on the plane
for eg:
here u can see it applied to cube but when i tried on plane it wont working pls help

Try it like so:

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:


thankyou very much it worked

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 a animation will this be posible with this|


1 Like

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.


thanks again let me try

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

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;