THREE.js 如何计算 3D 圆上的旋转位置？答案

【问题标题】：THREE.js How to calculate rotation position on a 3D circle?THREE.js 如何计算 3D 圆上的旋转位置？
【发布时间】：2017-01-13 05:33:22
【问题描述】：

如下图所示，我有一个带有简单立方体的THREE.Scene。附在立方体上的是用于物理的CANNON.Body（以绿色线框表示）。

CANNON.Body 与立方体偏移了几个单位。对于旋转，此偏移量将是半径。

当我旋转立方体时，我希望 CANNON.Body 基于角度和半径围绕立方体旋转。在图像的右侧，我以 45 度的角度旋转了立方体（我也有可用的弧度）。但是，CANNON.Body 不会围绕立方体旋转，只会围绕它自己的中心旋转。我需要它围绕所有轴 x、y 和 z 的立方体旋转。

THREE.js 中是否有内置函数，或者我应该为此使用自己的数学方程吗？如果有，那会是什么？

谢谢！

附注我已经看到了纯THREE.js 场景的解决方案，其中几何图形被转换为操纵枢轴点。因为我的CANNON.Body 中没有几何图形，所以这是不可能的。

【问题讨论】：

一种方法可能是在场景中添加（否则为空）Object3D，但将其位置保留在旋转中心。不是将CANNON.Body 添加到场景中，而是添加到Object3D。像之前一样移动CANNON.Body 以移动它，而是旋转Object3D。
@Leeft 谢谢你的建议。但是，我想尝试不向场景中添加不必要的对象。我知道这可以用数学方法解决，我只是不知道如何将它应用到我的情况以及使用什么方程。如果您有任何其他建议，请告诉我！
我能想到的其他可能选项：移动枢轴点，或do the math yourself（没有内置函数，但THREE.Math 有一些radToDeg 和degToRad 助手）。不过，创建一些（否则为空的）Object3D 来对场景中的事物进行分组或偏移并没有错，事实上，场景本身本质上是一个 Object3D，它有几个 Object3D 作为它的孩子（比如你的灯，对象等）。

标签： javascript 3d three.js rotation cannon.js

【解决方案1】：

我从未使用过 cannonjs，但是否可以在 Three.Group 中添加立方体和刚体？

喜欢

var rigidBody = new CANNON.Body(); // whatever it is for cannon
var model = new THREE.Group();

// your model goes here
model.add(new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1), 
  new THREE.MeshStandardMaterial()
));

model.add(rigidBody);
scene.add(model);

这样，如果你旋转父元素model，刚体应该以同样的方式更新。

【讨论】：