I’m happy to share my release of Tapia, I released it in the Apple App Store in December. I couldn’t have done it without three.js. It’s s reff for a previous game I did called Cube 11, also available in the apple store.
Tapia is a challenging sliding puzzle game where you slide and merge tiles on the planet Tapia to build up terrain. You are the Finnish spirit of the forest, Tapio. Watch over your world. Grow forests. Shift mountains. Move oceans. How long can you keep Tapia evolving?
How did you calculate the amount of rotation to give the sides based on touch movement? I can tell you used raycasting to find out the original selection, but how do you know how much rotation to apply once te selection starts moving?
So at the start of the touch event I raycast against an invisible cube to determine what side of the puzzle I’m on. If I hit a tile I know I’ll be sliding tiles. If I don’t touch a tile I know I’m rotating a hemisphere. After determining what side of the cube I have touched I place an invisible plane that extends off the screen centered at 0,0,0 and facing the side of the cube I touched. On touch move I now raycast against the plane. after a given distance of touch move across the plane I then know what axis to slide tiles or rotate the hemisphere. From there I group movable tiles or tiles and ocean cubes into an Object3d and apply transform to the Object3d. Slide and Rotation deltas are simply a fraction of the delta of the raycast on the plane. On touch end I animate the Object3d to the nearest resting point. After the animation I put the tiles and cubes back to the world, and apply the transform from the Object 3d to the returned tiles.
And again beautiful work!
What did you use for the ui? Css or another?