3D rotatable cube with clickable areas on sides

Question

What I want to accomplish is an iPad Application with a 3D rotatable cube, and on each side of the cube I want to define multiple areas where once clicked would take to another view or display a popup.

1. Can this be achieved with some effort using OpenGL ES in Xcode from scratch, or should I use a 3D framework, if so what would be the easiest framework? (I have only heard of Unity and its pretty expensive)

2. Does anyone have a good tutorial for me to learn how to do this?

I already tried 3D CSS3 Transformation but I want to keep that as the last resort.

Answer 1

Maybe not exactly what you are looking for but we've produced some code that functionally might help you: http://www.chupamobile.com/products/details/2106/Cube+Selector/

It's fully featured and ready to use out of the box

Answer 2

Try This code

CATransition *transition = [CATransition animation];
transition.delegate = self;
transition.duration = 0.8;
transition.timingFunction = [CAMediaTimingFunction     functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
NSString *types[4] = {@"cube", @"rippleEffect", @"cube", @"alignedCube"};
NSString *subtypes[4] = {kCATransitionFromTop, kCATransitionFromLeft, kCATransitionFromRight, kCATransitionFromBottom};
transition.type = types[0];
transition.subtype = subtypes[1];
[self.view.layer addAnimation:transition forKey:nil];

Answer 3

If all you want is a literal 3D cube, you can use Core Animation for this. Check out CATransformLayer. You can compose true 3D hierarchies pretty easily using CATransformLayer. Joe Ricioppo has a cool article about this, along with some sample code and a video. It's similar to 3D CSS3 transforms, except it's a lot easier to manipulate a single layer that represents a 3D hierarchy instead of individually transforming each sublayer. Just rotate all your cube faces initially and position them so they form a cube. Then you can apply transforms to the transform layer itself, and it will do all the fancy math to transform your sublayers automatically.

The big problem with this is how touch handling will work. You cannot use -hitTest: on CATransformLayer as it is unable to map 2D touches to its own 3D hierarchy. You might be able to rig your own hitTest: implementation to figure this out, but it almost feels like more work than its worth. I'm unaware of what provisions OpenGL offers for 2D-to-3D touch translation, but this may be your only option.