Search code examples
javascriptthree.jsquaternionsnormalize

How to render normals to surface of object in three.js

I found the example in threejs.org, that draws arrows normals, it is what I need. But arrows is complexed object and created by ArrowHelper. I looked in source code and found setDirection method. 

function setDirection( dir ) {

    // dir is assumed to be normalized

    if ( dir.y > 0.99999 ) {

        this.quaternion.set( 0, 0, 0, 1 );

    } else if ( dir.y < - 0.99999 ) {

        this.quaternion.set( 1, 0, 0, 0 );

    } else {

        axis.set( dir.z, 0, - dir.x ).normalize();

        radians = Math.acos( dir.y );

        this.quaternion.setFromAxisAngle( axis, radians );

    }

};

I tried to immpliment algorithm for setting rotation for Vector3 with using quaternion, but I still have norlams that looks at {x: 0, y: 0, z: 0}.

And my question is: How to calculate an vector in order to draw a normal line from surface into space, in order to get the same picuter: enter image description here

UPD:
I use CylinderGeometry.

UPD2:
I've resolved it. Look at my codepen

Solution

  • You want to view the vertex normals of your mesh. You can use VertexNormalsHelper like so:

    var vnh = new THREE.VertexNormalsHelper( mesh, 1, 0xff0000 );
scene.add( vnh );

    VertexNormalsHelper

    three.js r.84