/ ********************更新时间2016/6/25 ******************** ************** / 有问题是在rubiks立方体上改变边的方向...例子位于http://codepen.io/anon/pen/gMMRKJ
谢谢West Langely的建议。我试图实施。这里的例子是http://codepen.io/anon/pen/gMMRKJ
所以我最初创建了一个在z轴上旋转的rubiks立方体的3个边。
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 - 3;
var zp = z * 3 - 3;
cube.position.set(xp, yp, zp)
if (z === 0) {
side1.add(cube);
}
if (z === 1) {
side2.add(cube);
}
if (z === 2) {
side3.add(cube);
}
}
}
}
然后当点击任何一侧时，我使用raycaster识别侧面并将其在z轴上旋转90度。
然后我添加了单选按钮以允许您切换方向（围绕z轴旋转列样式侧以围绕x轴旋转行样式侧。这不是workign，并且Langely先生建议使用场景实用程序分离和附加从列样式的边上取下我的小立方体，然后将它们重新连接到行样式的边，但是有些东西不能正常工作。如果你转到示例并切换方向单选按钮，你会看到它无法正常工作。
这是我尝试分离重新连接。
$('input[type=radio][name=orientation]').change(function () {
controls.changeOrientation = true
if (this.value == 'vertical') {
controls.vertical = true;
controls.horizontal = false;
}
else if (this.value == 'horizontal') {
controls.vertical = false;
controls.horizontal = true;
}
var cubes = [];
for (var i = 0; i < side1.children.length; i++) {
cubes.push(side1.children[i]);
//THREE.SceneUtils.detach(side1.children[i], side1, scene);
}
for (var i = 0; i < side2.children.length; i++) {
cubes.push(side2.children[i]);
//THREE.SceneUtils.detach(side2.children[i], side2, scene);
}
for (var i = 0; i < side3.children.length; i++) {
cubes.push(side3.children[i]);
//THREE.SceneUtils.detach(side3.children[i], side3, scene);
}
console.log('num of cubes ' + cubes.length)
THREE.SceneUtils.detach(side1, totalCube, scene);
THREE.SceneUtils.detach(side2, totalCube, scene);
THREE.SceneUtils.detach(side3, totalCube, scene);
for (var i = 0; i < cubes.length; i++) {
var mycube = cubes[i];
console.log(' position ' + mycube.position.x + '.' + mycube.position.y + '.' + mycube.position.z)
if (controls.vertical) {
if (mycube.position.z == -3) {
THREE.SceneUtils.attach(mycube, scene, side1);
}
if (mycube.position.z == 0) {
THREE.SceneUtils.attach(mycube, scene, side2);
}
if (mycube.position.z == 3) {
THREE.SceneUtils.attach(mycube, scene, side3);
}
} else {
if (mycube.position.x == -3) {
THREE.SceneUtils.attach(mycube, scene, side1);
}
if (mycube.position.x == 0) {
THREE.SceneUtils.attach(mycube, scene, side2);
}
if (mycube.position.x == 3) {
THREE.SceneUtils.attach(mycube, scene, side3);
}
}
}
THREE.SceneUtils.attach(side1, scene, totalCube);
THREE.SceneUtils.attach(side2, scene, totalCube);
THREE.SceneUtils.attach(side3, scene, totalCube);
controls.changeOrientation = false;
});
/ *********************这是原帖子******************** ************ /
我一直在研究Rubiks立方体。这是我到目前为止http://codepen.io/anon/pen/gMMRKJ
转到示例并取消注释行// side1h.add(cube);以查看问题
您可以顺时针旋转立方体左侧，逆时针右击。
您可以通过单击拖动来移动相机。你可以用鼠标滚轮缩放相机。
所以rubiks立方体由许多立方体组成。然后我将每一侧分组，以便我可以旋转侧面。
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 - 3;
var zp = z * 3 - 3;
cube.position.set(xp, yp, zp)
scene.add(cube);
if (z === 0) {
side1.add(cube);
}
if (z === 1) {
side2.add(cube);
}
if (z === 2) {
side3.add(cube);
}
if (x === 0) {
// side1h.add(cube);
}
}
}
}