Javascript Three.js：将对象投影到垂直于摄影机的平面上

我有一个简单的场景，有三个平面。现在单击“将平面移动到随机位置”

单击后，我希望将平面移动到垂直于摄影机的新栅格中，以便投影栅格的x和y轴与屏幕的x和y轴平行

现场如下：

//生成场景对象
var scene=new THREE.scene（）；
scene.background=新的三种颜色（0xffffff）；
//生成相机
var aspectRatio=window.innerWidth/window.innerHeight；
var摄像机=新的三视角摄像机（75，aspectRatio，0.01，10000）；
//把相机放好
摄像机位置设置（51.389，-451.056839.455）；
var rotObjectMatrix=new THREE.Matrix4（）；
var q={ux:0.0184，uy:-0.2122，uz:0.9770，uw:-0.0081}；
rotObjectMatrix.makeRotationFromQuaternion（q）；
摄像机。四元数。设置自旋转矩阵（rotObjectMatrix）；
相机设置（0.00806，-0.91008，-0.41432）；
//生成渲染器
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；// 这是一个有点快捷的方法，但它可以帮助您避免大量的数学计算：只需将平面分组为一组，然后使用
group.lookAt（camera.position）
将它们一致地指向摄影机


//生成场景对象
var scene=new THREE.scene（）；
scene.background=新的三种颜色（0xffffff）；
//生成相机
var aspectRatio=window.innerWidth/window.innerHeight；
var摄像机=新的三视角摄像机（75，aspectRatio，0.01，10000）；
//把相机放好
摄像机位置设置（51.389，-451.056839.455）；
var rotObjectMatrix=new THREE.Matrix4（）；
var q={ux:0.0184，uy:-0.2122，uz:0.9770，uw:-0.0081}；
rotObjectMatrix.makeRotationFromQuaternion（q）；
摄像机。四元数。设置自旋转矩阵（rotObjectMatrix）；
//不确定为什么要更改相机的上轴，但这会
//需要在planeGroup上复制；
相机设置（0.00806，-0.91008，-0.41432）；
//生成渲染器
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；// 这是一个有点快捷的方法，但它可以帮助您避免大量的数学计算：只需将平面分组为一组，然后使用
group.lookAt（camera.position）
将它们一致地指向摄影机


//生成场景对象
var scene=new THREE.scene（）；
scene.background=新的三种颜色（0xffffff）；
//生成相机
var aspectRatio=window.innerWidth/window.innerHeight；
var摄像机=新的三视角摄像机（75，aspectRatio，0.01，10000）；
//把相机放好
摄像机位置设置（51.389，-451.056839.455）；
var rotObjectMatrix=new THREE.Matrix4（）；
var q={ux:0.0184，uy:-0.2122，uz:0.9770，uw:-0.0081}；
rotObjectMatrix.makeRotationFromQuaternion（q）；
摄像机。四元数。设置自旋转矩阵（rotObjectMatrix）；
//不确定为什么要更改相机的上轴，但这会
//需要在planeGroup上复制；
相机设置（0.00806，-0.91008，-0.41432）；
//生成渲染器
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；//请看一些OpenGL教程。您将学习使用4x4矩阵的变换。设置相机需要位置、视图方向和上方向向量。这可以通过以下方式完成。将这个矩阵与透视投影矩阵（或正交矩阵）结合起来，你就差不多完成了。谢谢@Ripi2，你能举个例子吗？目前我正在阅读有关几何的主题，但还没有看到如何实现这一点。请看一些OpenGL教程。您将学习使用4x4矩阵的变换。设置相机需要位置、视图方向和上方向向量。这可以通过以下方式完成。将这个矩阵与透视投影矩阵（或正交矩阵）结合起来，你就差不多完成了。谢谢@Ripi2，你能举个例子吗？我目前正在阅读关于几何的主题，但还没有看到如何实现这一点。谢谢@Marquizzo。但我恐怕我没有明确我的目标。在onclick回调中，我想静态地定位所有平面，使它们形成一个网格，该网格的x和y轴与屏幕的x和y轴平行。这个片段似乎以这样一种方式来定位平面，即它们移动到面对摄影机的位置，这是我想要避免的，并且这个片段也不会使网格的x和y轴平行于屏幕的x和y轴。你知道如何完成这个计划吗？嗯。。。我很难理解网格是如何使相机与屏幕的x，y轴平行的。也许如果你画一个快速的图表来说明你想要的结果？很抱歉给你带来困惑。我在这里关注这个投影：原始网格仍然存在于屏幕中（它有一个消失点并被投影），但单击后的图像形成一个网格，填充屏幕，并具有与屏幕的x、y轴平行的x、y轴。这有道理吗？啊，是的，我明白你的意思。我的版本显示了一些奇怪的z轴旋转，没有完全对齐。凸轮或组的y向上轴倾斜。我必须重新考虑我的答案。@duhaime好的，我编辑了我的答案，以适应您对
camera.up
和
controls.target
参数所做的更改。谢谢@Marquizzo。但我恐怕我没有明确我的目标。在onclick回调中，我想静态地定位所有平面，使它们形成一个网格，该网格的x和y轴与屏幕的x和y轴平行。这个片段似乎以这样一种方式来定位平面，即它们移动到面对摄影机的位置，这是我想要避免的，并且这个片段也不会使网格的x和y轴平行于屏幕的x和y轴。你知道如何完成这个计划吗？嗯。。。我很难理解网格的外观