javascript - 在 Three.js 中根据方向和相机位置旋转、移动和缩放对象

Question

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

使用基本功能可以正常工作，但有时会有点困惑。

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

我想要做的是沿着一个方向而不是一个轴并从相机的 Angular 旋转对象。

这是一个说明这一点的代码笔。 https://codepen.io/arpo/pen/LxyoRJ

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

我明白为什么会发生这种情况，但我不知道如何获得预期的效果。我也希望从相机的 Angular 来看它可以发挥作用。因此，如果您将相机向左移动并拖动“向后移动”范围，立方体应该移开或靠近。

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

Answer 1

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

1. 本地:场景中的每个对象都有自己的坐标系。一组 3 个不可见轴，它们位于对象的中心，并且无论您应用什么变换，它们始终指向对象的相同部分。
2. 全局:也称为世界坐标，场景具有全局坐标系，用于描述场景内对象的位置。演示中的两条红线是 X 和 Z 全局坐标轴。
3. 相机:相机有自己的坐标系。同样，这是 3 个不可见的轴，一根指向左侧，一根指向上方，一根指向场景。

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

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

自然地，您的“从左到右”旋转(实际上是 Z 轴旋转)现在会围绕这个朝下的 Z 轴旋转立方体。

为了围绕与相机坐标系对齐的轴旋转立方体，您必须执行多次旋转和平移变换。

我建议学习一些关于坐标系、模型变换、 View 变换和 3D 相关基础知识的知识。否则一切都会变得非常困惑。