三个JS旋转组的方向与用于View Cube / Orientation Cube的相机相同

Question

我正在尝试使用Three JS制作一个像这样的blender-esk方向视图：

我的计划是使摄像机旋转并旋转3个矢量点（代表图片中的X，Y和Z气泡）。然后，一旦有了这些点，就可以使用X和Y坐标在画布上绘制圆并绘制线以将它们连接到中心。然后，我可以使用Z方向来确定应该在顶部之上绘制的位置。

[当前，我正在使用第二个three.js场景来可视化这些X，Y和Z点的位置，因为我尝试了不同的方法来旋转顶点组以使其与相机的方向相匹配。我正在为这一部分而苦苦挣扎，并且尝试了很多无效的方法。

这里是我现在所在的JS小提琴：

https://jsfiddle.net/j9mcL0x4/4/（不会在Brave中加载，但在Chrome中有效）

[摇动相机时，它在第二个场景中移动了3个立方体，但我无法使其正确旋转。

X，Y和Z点分别由一组Vector3表示：

this.ref = [
  [new THREE.Vector3(1,0,0), 0xFF0000],
  [new THREE.Vector3(0,1,0), 0x00FF00],
  [new THREE.Vector3(0,0,1), 0x0000FF],
]

然后创建每个多维数据集并将其添加到组中：

this.group = new THREE.Group();
for(var pos of this.ref) {
  var geometry = new THREE.BoxGeometry(.25,.25,.25);
  var material = new THREE.MeshBasicMaterial({
    color: pos[1]
  });
  var cube = new THREE.Mesh(geometry, material);
  cube.position.copy(pos[0]);
  this.group.add(cube);
}

this.scene.add(this.group);

然后在我的动画函数中，我试图计算该组的旋转度，以使其与主视图的方向相同：

var quaternion = new THREE.Quaternion();
camera.getWorldQuaternion( quaternion );

let rotation = new THREE.Euler();
rotation.setFromQuaternion(quaternion);

var dir = new THREE.Vector3();
dir.subVectors( camera.position, controls.target ).normalize();

orientationHelper.group.rotation.set(dir.x, dir.y, dir.z);
orientationHelper.animate();

我所拥有的完全是错误的，但这是我尝试过的一些事情：

• 计算摄像机前面的点，然后使用lookAt函数使用该点使组朝那个方向看]
• 我正在使用轨道控件，该控件的目标是相机对焦的目标。我尝试将相机位置向量和目标向量相减以获得视线方向，但此方法无法正常工作（jsfiddle中当前处于什么状态）
• 我尝试仅使用相机的局部旋转（并尝试对其进行否定）

注意

我可以旋转第二个场景中的相机以使其与主视图中的相机匹配，但是我真的很想旋转矢量本身。这样，我就可以将这些点并投影到基本画布上以绘制6个圆和3条线。我觉得这比尝试在3d中使用精灵要容易得多，而Three JS不能轻松地绘制粗线而不为其创建矩形网格。

这里是一些我希望输出看起来像的例子：

更新

此问题已由Rabbid76解决，如果有人对项目使用Blender Style定向立方体感兴趣，可以在这里找到完整的源代码：

https://github.com/jrj2211/three-orientation-gizmo/

[我正在尝试使用Three JS制作一个像这样的Blender-esk方向视图：我的计划是使相机旋转并旋转3个矢量点（代表...中的X，Y和Z气泡） >

Answer 1

首先，在视图空间中，X轴指向右侧，Y轴指向上方，Z轴指向画布之外。因此，您必须为OrientationHelper摄像机在Z轴正方向上选择一个初始位置：

class OrientationHelper {
    constructor(canvas) {
        // [...]

        this.camera = new THREE.PerspectiveCamera(75, size / size, 0.1, 1000);
        this.camera.position.set(0, 0, 2);

        // [...]