如何在Three.js中围绕组的中心旋转

时间:2016-06-12 21:09:21

标签: three.js rotation translate-animation

我创建了一组立方体,我试图找出如何设置中心以便我可以旋转它们。

这是小提琴:https://jsfiddle.net/of1vfhzz/

这里我添加了多维数据集:

def sol(chars: List[Char], n: Int) = {
    def recSol(n: Int): List[List[Char]] = (chars, n) match {
        case (_  , 0) => List(Nil)
        case (Nil, _) => Nil
        case (_  , _) =>
            val tail = recSol(n - 1)
            chars.map(ch => tail.map(ch :: _)).fold(Nil)(_ ::: _)
    }
    recSol(n).map(_.mkString).mkString(",")
}

然后在渲染场景中,我围绕y轴旋转它,但我需要设置中心。我试过了side1 = new THREE.Object3D(); addCube({ name: 'side1topleft', x: -8.5, y: 7.5, z: 5 }); addCube({ name: 'side1topmiddle', x: -4, y: 7.5, z: 5 }); addCube({ name: 'side1topright', x: .5, y: 7.5, z: 5 }); addCube({ name: 'side1middleleft', x: -8.5, y: 3, z: 5 }); addCube({ name: 'side1middlemiddle', x: -4, y: 3, z: 5 }); addCube({ name: 'side1middleright', x: .5, y: 3, z: 5 }); addCube({ name: 'side1bottomleft', x: -8.5, y: -1.5, z: 5 }); addCube({ name: 'side1bottommiddle', x: -4, y: -1.5, z: 5 }); addCube({ name: 'side1bottomright', x: .5, y: -1.5, z: 5 }); scene.add(side1); function addCube(data) { var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.x = data.x cube.position.y = data.y cube.position.z = data.z cube.rotation.set(0, 0, 0); cube.name = data.name; side1.add(cube); } ,但我没有得到它。

1 个答案:

答案 0 :(得分:1)

您希望您的网格组围绕组中心旋转。

一种选择是翻译网格几何体,因此,作为一个集合,它们以本地原点为中心。

如果您不想这样做,那么您可以创建一个祖父对象pivot,然后旋转它。

在您的情况下,side1是您孩子网格的父级。所以使用这种模式:

var pivot = new THREE.Group();
scene.add( pivot );

pivot.add( side1 );
side1.position.set( 4, - 3, - 5 ); // the negative of the group's center

在动画循环中,旋转轴;

pivot.rotation.z += 0.02;

小提琴:https://jsfiddle.net/of1vfhzz/1/

three.js r.77