围绕任意线旋转三个.js

Question

我从Three.js开始，所以我可能误解了这个概念的一些基础知识。我有一个常见的3D场景，其层次结构如下：

.
+-container @(0,0,0) (Object3d, no own geometry)
 +-child 1 @(1,1,1)
 +-child 2 @(1, -2, 5)
 +-child 3 @(-4, -2, -3)
 .
 .
 . more should come

»容器«的所有»儿童«都是Blender的进口型号。我想要做的是根据当前选择（应该是其中一个孩子）围绕枢轴旋转整个容器。

在Blender中对三个立方体进行图像处理，所有三维立方体都在第一个位置和转换中心的中心处选择。旋转会变换所有立方体，但旋转相对于选择中的第一个。

就three.js而言，想要做的是旋转容器，以便将旋转应用于所有孩子。

为此，我认为以下步骤可以解决问题：

1. 创建一个矩阵，
2. 将该矩阵转换为所选对象位置的负数
3. 旋转该矩阵
4. 将矩阵转换回选定的对象位置
5. 将转换应用于容器

我尝试过以下代码，但结果错了：

var sp = selection.position.clone(),
    m = new THREE.Matrix4();

selection.localToWorld(sp);
m.setPosition(sp.clone().negate());

//I've used makeRotationX for testing purposes, should be replaced with quaternion rotation later on…
m = m.multiply(new THREE.Matrix4().makeRotationX(2*180/Math.PI));
m = m.multiply(new THREE.Matrix4().makeTranslation(sp.x,sp.y,sp.z));

this._container.applyMatrix(m);

感谢您的帮助！

更新

签名错误 - 这有效：

var sp = selection.position.clone(),
    m = new THREE.Matrix4();

m.makeTranslation(sp.x,sp.y,sp.z);
m.multiply(new THREE.Matrix4().makeRotationX(0.1));
m.multiply(new THREE.Matrix4().makeTranslation(-sp.x,-sp.y,-sp.z));

this._container.applyMatrix(m);

但是那个代码看起来并不那么好，为那个单独的操作创建三个矩阵似乎有点开销，通常是什么？three.js-way«？

更新＃2

由于此处的评论是描述我想要做的事情的图像：



原点上的“箭头”代表父容器，立方体，球体和圆锥体是它的“儿童”。红线显示我想要旋转父项的行，这样旋转将应用于所有子项。

rotateOnAxis()将Vector作为轴，因此对象旋转的线与其原点相交。