THREE.JS ：尽管有轨道控制器，但仍旋转每一个（包括相机）答案

【问题标题】：THREE.JS : Rotate everyting (including camera) despite the orbit controllerTHREE.JS ：尽管有轨道控制器，但仍旋转每一个（包括相机）
【发布时间】：2017-05-03 23:02:51
【问题描述】：

这是我想做的：

验证条件后，我想旋转场景中的所有内容，包括相机。

用户不会注意到任何差异，因为相机仍然显示完全相同的东西，但实际上对象会被旋转。

当然轨道控制器应该仍然可以工作......

这个问题可能很愚蠢，但我遇到了麻烦。要么是相机移动了，没有显示完全相同的东西，要么是轨道控制器不工作。

你会怎么做？

谢谢。

编辑：我应该详细说明我的尝试。

假设我的场景中唯一的东西是一个立方体，每个面上都有一个数字。

面 1 指向 +X。
面 2 指向 +Y。
面 3 指向 +Z。
面 -1 指向 -X。
面 -2 指向 -Y。
面 -3 指向 -Z。

在我的代码中，我希望立方体在用户不知情的情况下旋转。

面 1 仍应指向 +X。
面 -1 仍应指向 -X。

但是：

面 2 应指向 +Z。
面 -2 应指向 -Z。
面 3 应指向 -Y。
面 -3 应指向 +Y。

好吗？

但我不希望用户注意到这种旋转。所以我想同时旋转相机，以隐藏立方体旋转的事实。

我尝试了什么：

当我想旋转 X 时：

cube.rotateX(direction * Math.PI / 2);
camera.position.set(camera.position.x, direction * (-camera.position.z), direction * camera.position.y);
camera.lookAt(new THREE.Vector3(0, 0, 0));

当我想旋转 Y 时：

cube.rotateY(-direction * Math.PI / 2);
camera.position.set((-direction) * camera.position.z, camera.position.y, -direction * (-camera.position.x));
camera.lookAt(new THREE.Vector3(0, 0, 0));

遗憾的是，虽然它适用于 Y 旋转，但它不适用于 X 旋转，因为 camera.up 会搞砸它，让它看起来像是围绕 Y 轴旋转。

我该怎么办？

【问题讨论】：

围绕原点旋转场景中的所有内容只会影响其中对象的世界矩阵。如果这就是你想要做的，好的。但我们将需要更多继续下去。请分享您的代码，并说明您迄今为止为实现您所寻求的效果所做的尝试。 How to create a Minimal, Complete, and Verifiable example
你是对的。我进行了编辑以添加更多信息。

标签： javascript three.js

【解决方案1】：

尝试创建一个THREE.Group 并将当前场景中的所有内容添加到其中（您的立方体、相机、灯光等）。然后旋转组。

var group = new THREE.Group();
group.add(yourCube);
group.add(yourLight);
group.add(yourCamera);
scene.add(group);
// later...
group.rotateN(90 * Math.PI / 180); // whatever rotation function you choose to use

从此时起，您添加到组中的任何内容都将使用组的坐标系。添加到场景中的任何内容都将继续使用标准世界坐标系。

如果再次旋转组，组内的任何东西都会随之旋转，但场景中的任何东西都将保持原位。

【讨论】：