Javascript 在Three.js中，基于方向和相机位置旋转、移动和缩放对象

我正在为Three.js编写一个基本编辑器。我希望能够旋转、移动和缩放对象

使用基本函数可以工作，但很好，但有时有点混乱

cube.rotation.z = Math.PI * val;
cube.rotation.x = Math.PI * val;
cube.position.z = val * -1;
cube.scale.y = val;

我想做的是从摄像机的角度沿某个方向而不是轴旋转对象

这里有一个代码笔来说明这一点。

只要其他输入未被触动，它就可以正常工作。 如果拖动范围“向左向右旋转”，它将在z轴上旋转立方体。但是，如果将范围“旋转前后”一直向右拖动，然后再次拖动“旋转左右”，则旋转看起来像是在Y轴上。其他输入也是如此

我理解为什么会发生这种情况，但我不知道如何达到预期效果。我也希望这能从摄像机的角度起作用。因此，如果将相机向左移动并拖动范围“向前向后移动”，则立方体应移开或靠近

---

所以我想要的是，当你使用旋转左/右范围旋转立方体时，我希望它从用户角度向左或向右摆动。如果您使用移动范围，我希望立方体被推离用户

要回答您的问题，至少需要基本了解三维坐标系的工作原理。您需要了解三个坐标系：

局部：场景中的每个对象都有自己的坐标系。一组3个不可见轴，位于对象的中心，无论应用何种变换，这些轴始终指向对象的相同部分

全局：也称为世界坐标，场景有一个全局坐标系，用于描述场景中对象的位置。演示中的两条红线是X和Z全局坐标轴

摄像机：摄像机有自己的坐标系。同样，这是3个不可见的轴，一个向左，一个向上，一个指向场景

这3个坐标系未对齐。默认情况下，它们是对齐的，但在旋转对象或相机后不会对齐

当通过对象的

旋转

属性旋转对象时，就是围绕其局部轴旋转对象。立方体的Z轴与世界Z轴相同。将其想象为一条从正面突出的线，与全局红线对齐。然后将立方体“前后”旋转90度，其Z轴现在朝下

当然，你的“从左到右”旋转——实际上是Z轴旋转——现在围绕这个向下的Z轴旋转立方体

要围绕与摄影机坐标系对齐的轴旋转立方体，必须执行多个旋转和平移变换

---

我建议学习一点坐标系、模型转换、视图转换和3D的相关基础知识。否则一切都会非常混乱。

要回答您的问题，至少需要对三维坐标系的工作原理有基本的了解。您需要了解三个坐标系：

局部：场景中的每个对象都有自己的坐标系。一组3个不可见轴，位于对象的中心，无论应用何种变换，这些轴始终指向对象的相同部分

全局：也称为世界坐标，场景有一个全局坐标系，用于描述场景中对象的位置。演示中的两条红线是X和Z全局坐标轴

摄像机：摄像机有自己的坐标系。同样，这是3个不可见的轴，一个向左，一个向上，一个指向场景

这3个坐标系未对齐。默认情况下，它们是对齐的，但在旋转对象或相机后不会对齐

当通过对象的

旋转

属性旋转对象时，就是围绕其局部轴旋转对象。立方体的Z轴与世界Z轴相同。将其想象为一条从正面突出的线，与全局红线对齐。然后将立方体“前后”旋转90度，其Z轴现在朝下

当然，你的“从左到右”旋转——实际上是Z轴旋转——现在围绕这个向下的Z轴旋转立方体

要围绕与摄影机坐标系对齐的轴旋转立方体，必须执行多个旋转和平移变换

---

我建议学习一点坐标系、模型转换、视图转换和3D的相关基础知识。否则一切都会非常混乱。

是的，我知道这一点，因此“我理解为什么会发生这种情况，但我不知道如何获得所需的效果。”请您具体说明所需的效果是什么？围绕世界轴或摄影机轴旋转？旋转中心应该是什么？物体中心还是世界中心？这一共是4个选项，每个选项的工作方式都不同。我知道这很难解释。我想要的是，当您使用旋转左/右范围旋转立方体时，我希望它从用户角度向左或向右摆动。如果您使用移动范围，我希望立方体被推离用户。我认为这与矩阵运算有关，但我的知识还没有。我想在这里提问是了解它的一部分。是的，我知道这一点，因此“我理解为什么会发生这种情况，但我不知道如何达到预期效果。”你能具体说明预期效果是什么吗？围绕世界轴或摄影机轴旋转？旋转中心应该是什么？物体中心还是世界中心？这一共是4个选项，每个选项的工作方式不同。