如何使用WebGL（和THREE.js库）基于对象的位置旋转对象？

Question

I'm doing a Rubik's cube in WebGL. I created 27 little cubes That form a big one, but I do not know how to say "rotate the cubes that are in that particular position (the block of 9 on the top for example)". The cubes always change their position so I need a dinamic way to call them. How can I do it? How can I call a group of cubes and rotate them not by their names but thanks their position?

In my code I have only created the cubes and I have added them to the scene to create the big one, not more.

I really need help, so thx a lot.

Answer 1

I've been following and contributing to a project that lets you create WebGL based apps very easily. It's called whitestormJS and you can check it out here

So whitestorm is just simply a wrapper for Three.js tt has a nice API and it will simplify many things. Anyways despite of what you're using. I would suggest you to use groups to move all the faces. Jonathan Petitcolas has a nice tutorial about rotation in Three.js.

//you should create a group for each face with its proper cubes
var face1 = new THREE.Group();
group.add(piece1);
group.add(piece2);
// and so on, finally set a rotation to the group on the proper axis.
pivot.rotation.y = 1.5708; //this is 90 degrees in radians