如何在three.js中绕另一个对象的轴旋转?

时间:2019-11-04 21:37:54

标签: reactjs three.js rotation center

我有一组放置在不同坐标处的立方体。我正在尝试围绕其中一个的中心轴旋转它们的一个子组。但是,我尝试过的所有方法最终都只能绕着世界的x,y或z轴旋转它们。我对three.js中的矩阵感到非常困惑,所以我觉得我只是在尝试解决方案而不了解它们是如何工作的,我只是无法随意旋转它们。

cubes

//first I'm grouping the chosen subset of cubes
var group = new THREE.Group();
    groupArr.forEach(cube => {
      //   cube.material.color.set(0x88dd99);
      group.add(cube);
    });
    this.cubeArr[cube1].material.color.set(0x000000);
    this.scene.add(group);

    //random axis I'm using to test
    //no matter what values I place in the constructor the rotation is still happening around one of the world's axis
    var xAxis = new THREE.Vector3(5, 0, 0);

    this.rotateAroundAxis(group, xAxis, (Math.PI / 180) * 180);

//I'm using this function I found for rotation (placed inside the class)

  rotateAroundAxis(object, axis, radians) {
    let rotObjectMatrix = new THREE.Matrix4();
    rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);
    console.log(object.matrix.multiply(rotObjectMatrix));
    object.rotation.setFromRotationMatrix(object.matrix);
  }

0 个答案:

没有答案