如何在 three.js 中渲染物体表面的法线
How to render normals to surface of object in three.js
我在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 旋转设置算法,但我仍然有 norlams 查看 {x: 0, y: 0, z: 0}
。
我的问题是:
如何计算向量以从表面绘制法线到 space,以获得相同的图片:
UPD:
我使用 CylinderGeometry.
UPD2:
我已经解决了。 Look at my codepen
您想查看网格的顶点法线。您可以像这样使用 VertexNormalsHelper
:
var vnh = new THREE.VertexNormalsHelper( mesh, 1, 0xff0000 );
scene.add( vnh );
three.js r.84
我在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 旋转设置算法,但我仍然有 norlams 查看 {x: 0, y: 0, z: 0}
。
我的问题是:
如何计算向量以从表面绘制法线到 space,以获得相同的图片:
UPD:
我使用 CylinderGeometry.
UPD2:
我已经解决了。 Look at my codepen
您想查看网格的顶点法线。您可以像这样使用 VertexNormalsHelper
:
var vnh = new THREE.VertexNormalsHelper( mesh, 1, 0xff0000 );
scene.add( vnh );
three.js r.84