ThreeJs：添加一个始终面向透视相机的 Gridhelper答案

【问题标题】：ThreeJs: Add a Gridhelper which always face the perspective cameraThreeJs：添加一个始终面向透视相机的 Gridhelper
【发布时间】：2022-09-22 21:10:29
【问题描述】：

我有一个 threejs 场景视图，其中包含一个网格、一个透视相机，并且我在其中使用 OrbitControls 移动相机。

我需要在“面对”我的透视相机的threejs视图上添加一个测量网格

它通过在网格助手上应用 Pi/2 的 xRotation 来使用以下代码在“启动”上工作

window.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 300 );
window.camera.position.z = 150;

window.grid1 = new THREE.GridHelper(500, ~~(500 * 2))
window.grid1.material.transparent = true;
window.grid1.material.depthTest = false;
window.grid1.material.blending = THREE.NormalBlending;
window.grid1.renderOrder = 100;
window.grid1.rotation.x = Math.PI / 2;
window.scene.add(window.grid1);

window.controls = new OrbitControls(window.camera, window.renderer.domElement );
window.controls.target.set( 0, 0.5, 0 );
window.controls.update();
window.controls.enablePan = false;
window.controls.enableDamping = true;

但是，一旦我开始使用轨道控制移动，网格助手就不会与相机保持对齐。

我尝试在 renderLoop 上使用

window.grid1.quaternion.copy(window.camera.quaternion);

和

window.grid1.lookAt(window.camera.position)

这似乎部分工作，gridhelper 对齐在“地板”上但不面向相机

我怎样才能做到这一点？

温柔一点，我从threejs开始:)

标签： three.js

【解决方案1】：

这有点小技巧，但您可以将网格包裹在 THREE.Group 中并旋转它：

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 300 );
camera.position.z = 150;

const grid1 = new THREE.GridHelper(500, ~~(500 * 2));
grid1.material.transparent = true;
grid1.material.depthTest = false;
grid1.material.blending = THREE.NormalBlending;
grid1.renderOrder = 100;
grid1.rotation.x = Math.PI / 2;

const gridGroup = new THREE.Group();
gridGroup.add(grid1);
scene.add(gridGroup);

// ...

然后，在你的渲染循环中，你让你的团体面对相机（而不是网格）：

gridGroup.lookAt(camera.position)

这是有效的，因为它有点模拟在THREE.Plane 中设置法线的行为。 GridHelper 被旋转到垂直于相机，并且它被包裹在一个没有旋转的组中。因此，通过旋转组，网格将始终偏移，使其垂直于相机。

【讨论】：

伙计们，谢谢，如果可以的话，我会+10你哈哈