Question

我最近问了一个类似的问题，但我仍然在努力弄清楚如何设置三个js控件的中心以便它可以旋转。我一直在寻找关于几何，边界框，枢轴点，矩阵的例子。但我似乎无法找到一个明确的答案，这是我的榜样。我正在尝试制作一个rubiks立方体但是你可以看到我的第一面不是在中间旋转。我希望有人可以给出一些步骤来设置控件的中心，以便我可以旋转控件。这是我的样本http://codepen.io/anon/pen/gMMRKJ（您可以通过按住鼠标并移动来旋转立方体）

这是我制作魔方和我的第一个控件（旋转面）的地方

// add all the rubik cube elements
        var gpboyw = [];
        gpboyw.push(new THREE.MeshBasicMaterial({ color: green }));
        gpboyw.push(new THREE.MeshBasicMaterial({ color: purple }));
        gpboyw.push(new THREE.MeshBasicMaterial({ color: blue }));
        gpboyw.push(new THREE.MeshBasicMaterial({ color: orange }));
        gpboyw.push(new THREE.MeshBasicMaterial({ color: yellow }));
        gpboyw.push(new THREE.MeshBasicMaterial({ color: white }));

        side1 = new THREE.Object3D();


        for (var x = 0; x < 3; x++) {
            for (var y = 0; y < 3; y++) {
                for (var z = 0; z < 3; z++) {
                    var faceMaterial = new THREE.MeshFaceMaterial(gpboyw);
                    var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);
                    var cube = new THREE.Mesh(cubeGeom, faceMaterial);
                    var xp = x * 3 - 3;
                    var yp = y * 3;
                    var zp = z * 3 - 3;
                    cube.position.set(xp,yp,zp)
                    scene.add(cube);
                    if (z === 0) {
                        console.log('x: ' + xp + ' y: ' + yp + ' z: ' + zp);
                        side1.add(cube);
                    }
                }
            }
        }

        scene.add(side1);

但之后我不确定如何设置side1的中心以使其正确旋转。

Answer 1

如果您想围绕某物的中心旋转，可以使用a bounding box object (THREE.Box3)找到中心点。

例如，找到一些网格的中间部分：

var boundingBox = new THREE.Box3().setFromObject( mesh );
var center = boundingBox.center();

现在您可以使用此中心点进行旋转。希望这能帮助您为Rubik的立方体构建一个很好的解决方案

以三个js绕控制中心旋转

1 个答案: