Three.js: Improve visual of PlaneHelper

Created on 8 Dec 2018  路  6Comments  路  Source: mrdoob/three.js

This is just simple suggestion to improve visual of PlaneHelper:
Should we remove some redundant INNER egdes like this?

    function PlaneHelper( plane, size, hex ) {

        this.type = 'PlaneHelper';

        this.plane = plane;

        this.size = ( size === undefined ) ? 1 : size;

        var color = ( hex !== undefined ) ? hex : 0xffff00;

        var positions = /*[ 1, - 1, 1, - 1, 1, 1, - 1, - 1, 1,*/[ 1, 1, 1
        , - 1, 1, 1
        , - 1, - 1, 1
        , 1, - 1, 1
        , 1, 1, 1
        //, 0, 0, 1
        ];

        var geometry = new BufferGeometry();
        geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
        geometry.computeBoundingSphere();

        Line.call( this, geometry, new LineBasicMaterial( { color: color } ) );

        //

        var positions2 = [ 1, 1, 1, - 1, 1, 1, - 1, - 1, 1, 1, 1, 1, - 1, - 1, 1, 1, - 1, 1 ];

        var geometry2 = new BufferGeometry();
        geometry2.addAttribute( 'position', new Float32BufferAttribute( positions2, 3 ) );
        geometry2.computeBoundingSphere();

        this.add( new Mesh( geometry2, new MeshBasicMaterial( { color: color, opacity: 0.2, transparent: true, depthWrite: true } ) ) );

        this.lookAt( this.plane.normal );
    }
Suggestion

Most helpful comment

That is what the helpers are for: debugging.

All 6 comments

So instead of:

image

the new code produces this:

image

Not sure about this change. TBH, I think the current visual output is already appropriate.

@whatisor I understand your concern, but with this PR, when you zoom in close to the plane, nothing is visible. That is why I included the diagonals in the first place.

@WestLangley ,yeah, that is good for debugging, but not good for final development. I think no one wants to display surface with diagonals :D

That is what the helpers are for: debugging.

I think no one wants to display surface with diagonals :D

Actually, I think it would look better with more diagonals 馃槉

Or maybe a cross?

Was this page helpful?
0 / 5 - 0 ratings