three.js：GridHelper使非标准网格吗？

Question

I have been told that the standard normal vector for geometries in three.js is (0, 0, 1) .

However, when I make an instance of the GridHelper constructor, it makes a plane that is spanned by the X and Z axis. Such a plane has a normal vector of (0, 1, 0) .

This can be seen by this screenshot, showing the vertices arry of the geometry of my GridHelper:

and it is confirmed by visual inspection:

This is how I instantiate my GridHelper:

var myGridHelper = new THREE.GridHelper(10, 20);

How come GridHelper does not comply with the standard normal vector?

If this feature/bug is not going to change: Can I solve it by always initiating my GridHelper instances with this code:

var standardPlaneNormal   = new THREE.Vector3(0, 0, 1);
var GridHelperPlaneNormal = new THREE.Vector3(0, 1, 0);
var quaternion  = new THREE.Quaternion();
quaternion.setFromUnitVectors(standardPlaneNormal, GridHelperPlaneNormal);
var myGridHelper = new THREE.GridHelper(10, 20);
myGridHelper.rotation.setFromQuaternion(quaternion);

?

Answer 1

If you want to use the lookAt() method with GridHelper , you need to rotate the grid geometry so the grid lies in the XY-plane, instead of the XZ-plane. Once you do that, lookAt() will work as expected.

var grid = new THREE.GridHelper( 10, 2 );

grid.geometry.rotateX( Math.PI / 2 );

var vector = new THREE.Vector3( 1, 1, 1 );
grid.lookAt( vector );

scene.add( grid );

three.js r.76