在three.js中围绕一个点旋转对象的正确方法是什么? [英] What's the right way to rotate an object around a point in three.js?
问题描述
大多数关于three.js 的教程/问题都建议使用three.js 围绕一个点旋转对象的方法是在您想要旋转的位置创建一个父对象，附加您的对象，然后移动子对象.然后当父级旋转时，子级围绕该点旋转.例如;
Most tutorials/questions about three.js suggest the way to rotate an object around a point using three.js is to create a parent object at the position you want to rotate around, attach your object, and then move the child. Then when the parent is rotated the child rotates around the point. Eg;
//Make a pivot
var pivot = new THREE.Object3D();
//Make an object
var object = new THREE.Mesh( new THREE.BoxGeometry(2,2,2), new THREE.MeshBasicMaterial() );
//Add object to pivot
pivot.add(object);
//Move object away from pivot
object.position.set(new THREE.Vector3(5,0,0));
//rotate the object 90 degrees around pivot
pivot.rotation.y = Math.PI / 2;
这是可行的，但它非常有限 - 如果您想围绕不同的点旋转对象，则无法旋转，因为对象不能有两个父对象.
This works but it's incredibly limiting - if you want to rotate an object around a different point you can't because an object can't have two parents.
下一个有效的方法是将旋转矩阵应用于对象的位置，例如；
The next method that works is applying a rotated matrix to the object's position, e.g.;
//Make an object
var object = new THREE.Mesh( new THREE.BoxGeometry(2,2,2), new THREE.MeshBasicMaterial() );
//Move the object
object.position.set(new THREE.Vector3(5,0,0);
//Create a matrix
var matrix = new THREE.Matrix4();
//Rotate the matrix
matrix.makeRotationY(Math.PI / 2);
//rotate the object using the matrix
object.position.applyMatrix4(matrix);
同样，这有效，但似乎没有设置旋转点的方法.它永远是世界的起源.
Again, this works, but there doesn't appear to be a way to set the point of rotation. It's always the origin of the world.
另一个选项是 sceneUtils 中的实用方法，用于将子对象与父对象分离，另一种方法是附加新的父对象，但该文档警告不要使用它，并且从未在任何示例代码中使用过.
Another option is a utility method in sceneUtils to detach a child from a parent object and another method to attach a new parent, but the documentation for that warns against using it, and it's never used in any example code.
最终我希望能够使立方体遵循 S 形路径，但如果没有这个(看似)基本的东西，我发现它相当困难.
Ultimately I want to be able to make a cube follow an S shaped path, but without this (seemingly) basic thing I'm finding it rather difficult.
tl;dr 我想围绕一系列不同的点旋转一个 Three.js 对象.什么是解决这个问题的好方法?
tl;dr I want to rotate a three.js object around a series of different points. What would be a good way to approach that?
推荐答案
这个答案可能有帮助:三个 JS 支点
有几种方法可以解决这个问题.正如您所提到的，您可以在父级方法中交换轴心点，但需要大量工作，将对象位置转换为/从不同的坐标系.
There are several ways to approach this problem. As you mentioned, you CAN swap the pivot point in the parenting approach, but it's a lot of work, converting the object position to/from the different coordinate systems.
相反，你总是可以这样看(伪代码):
Instead, you can always look at it this way (pseudo-code):
将对象移动到轴心点
Move the object to the pivot point
1.1.从对象的原始位置减去枢轴点
1.1. SUBTRACT the the pivot point from your object's original position
应用您的轮换
将物体向后移动相同的位置向量
Move the object BACK by the same position vector
1.1.将轴心点添加到对象的新位置
1.1. ADD the the pivot point to your object's new position
注意:一切都在世界坐标系中，因此您可能需要进行适当的转换.
这篇关于在three.js中围绕一个点旋转对象的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
