如何在three.js中将法线渲染到对象的表面

Question

我在threejs.org 中找到了the example，它绘制了法线箭头，这正是我所需要的。但是箭头是复杂的对象，由 ArrowHelper 创建。 我查看了源代码并找到了 setDirection 方法。

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

    }

};

我尝试使用四元数来实现设置 Vector3 旋转的算法，但我仍然有看 {x: 0, y: 0, z: 0} 的 norlams。

我的问题是： 如何计算向量以便从表面绘制法线到空间，以获得相同的图片：

UPD：
我使用 CylinderGeometry。

UPD2：
我已经解决了。 Look at my codepen

Answer 1

您想查看网格的顶点法线。你可以像这样使用VertexNormalsHelper：

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

VertexNormalsHelper

three.js r.84