Three.js：GridHelper制作非标准网格？

Question

有人告诉我， Three.js 中几何图形的标准法向量是(0, 0, 1)。

但是，当我创建 GridHelper 构造函数的实例时，它会创建一个由 X 轴和 Z 轴跨越的平面。这样一个平面的法向量为(0, 1, 0)。

这可以通过这个屏幕截图看到，显示了我的 GridHelper 几何体的顶点数组：

并通过目视检查确认：

这就是我实例化 GridHelper 的方式：

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

为什么GridHelper不符合标准法向量？

如果此功能/错误不会改变：我可以通过始终使用以下代码启动我的 GridHelper 实例来解决它吗：

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

如果要使用lookAt()的方法GridHelper，则需要旋转网格几何形状，使网格位于 XY 平面，而不是 XZ 平面。一旦你这样做了，lookAt()就会按预期工作。

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

三.js r.76