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 e GridHelper does not ply 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);

?

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 e GridHelper does not ply 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);

?

• javascript
• three.js

• Can you solve what? What are you trying to do? – WestLangley Commented May 7, 2016 at 2:11
• See this post: msdn.microsoft./en-us/library/… in default Threejs positive Y is "up" – Andy Ray Commented May 7, 2016 at 2:37
• @WestLangley I want things to be rotated according to my expectations.. :). When I create a quaternion with a start vector and an end vector, the quaternion should rotate according to these. Now, if I feed (0, 0, 1) as the start vector, it won't do so. My suggestion to add an extra quaternion rotation to pensate for this, was misguided. I can simply feed the alternative (or the true?) standard vector (0, 1, 0) as the start vector to quaternion.setFromUnitVectors(). That makes things rotate according to my expectations :) – user134055 Commented May 7, 2016 at 7:34
• I'm pretty sure 'up' is (0, 1, 0) now. – Kenny Evitt Commented Mar 12, 2022 at 6:02

2 Answers 2

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

If using react-three-fiber, the equivalent solution is:

import * as THREE from 'three'

...

<gridHelper
  args={[10, 2]}
  rotation={new THREE.Euler(Math.PI / 2, 0, 0, 'XYZ')}
/>

You must use the rotation property instead of the rotateX and lookAt methods. This is because react-three-fiber's framework abstracts away all methods into the react render process, so that you can indicate values declaratively instead. See the react-three-fiber docs for more info.