点击按钮时围绕中心旋转立方体

Question

点击按钮时围绕中心旋转立方体

4

想象一个立方体状的物体：

它被放置在垂直平面的第6个面上。我想让这个立方体在点击按钮时改变位置。所以我点击按钮-->现在第5个面在平面上。再次点击按钮-->第3个面在平面上。结果应该是：6 5 3 2 1 4 --> 6 5 . . .

我尝试了类似于这样的代码：（sideCounter是点击次数的数字）

    if (this._sideCounter === 0) {
      this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(-(Math.PI / 2), 0, 0)))), scale);
    }
    if (this._sideCounter === 1 || this._sideCounter === 2) {
      this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(0, -(Math.PI / 2), 0)))), scale);
    }
    if (this._sideCounter === 3) {
      this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(Math.PI / 2, 0, 0)))), scale);
    }
    if (this._sideCounter === 4 || this._sideCounter === 5) {
      this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(0, 0, -(Math.PI / 2))))), scale);
    }

编辑：

目前已提供了一个旋转问题的解决方案（感谢 @Eponyme Web）。问题在于，我现在没有围绕中心旋转。（立方体原点（0,0,0）在其他地方（因为它取决于用户上传的模型））

有没有一种简单的方法可以将旋转居中（仅限于旋转！！）？

- breezertwo

2

在我看来，基于sideCounter，您只有两种转换类型：1和2进入屏幕，3和4向左，5进入屏幕，6向左。使用这些信息并每次从当前状态开始，而不是原始状态，会更容易吧？ - Palle Due

你的代码可以更简单，通过修改旋转向量而不是修改矩阵... - soju

@PalleDue 你有什么建议吗？（我还更新了上面的代码……复制时犯了一个错误） - breezertwo

@breezertwo：不好意思，我的两分已经花光了。 - Palle Due

你需要在开始时移动立方体（或原点），以使旋转行为符合预期。我会将底部前左角移动到原点，然后在每个轴上移动1/2个立方体的长度，以使其居中。 - Eponyme Web

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eponyme Web · Accepted Answer

我认为计数0和3的转换是相同的

if (this._sideCounter === 0 || this._sideCounter === 3) {
  this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(-(Math.PI / 2), 0, 0)))), scale);
}
if (this._sideCounter === 1 || this._sideCounter === 2) {
  this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(0, -(Math.PI / 2), 0)))), scale);
}
if (this._sideCounter === 4 || this._sideCounter === 5) {
  this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(0, 0, -(Math.PI / 2))))), scale);
}