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.

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)
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.

[Hit-Testing here on SO](http://stackoverflow.com/questions/5544808/mapping-from-2d-projection-back-to-3d-point-cloud). — Stefan Hanke, Apr 24 '12 at 06:29
I can't help you with the hit testing, but I link to some sample code for drawing the cube in this answer: http://stackoverflow.com/a/2858658/19679 — Brad Larson, Apr 24 '12 at 16:24

score 3 · Answer 1 · edited Sep 09 '14 at 09:31

3

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];

edited Sep 09 '14 at 09:31

JZAU

3,550
31
37

answered Sep 06 '13 at 07:11

Hemant Singh Rathore

2,153
1
24
38

Those transitions are considered private API. Might get rejected for using them – Mazyod Dec 02 '14 at 19:24

score 1 · Accepted Answer · answered Apr 24 '12 at 02:04

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.

Im going to give this a try. Need to find a way to get the touches working somehow. Thanks alot for the answer. — Malitta N, Apr 24 '12 at 02:49

score 0 · Answer 3 · answered Nov 18 '13 at 17:46

0

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

answered Nov 18 '13 at 17:46

Wirsing

6,713
3
15
13

3D rotatable cube with clickable areas on sides

3 Answers3

Linked