I have created a panorama puzzle tile-rotation game which is live at panopuzzle
Screenshot: 
It maps a cube map projection of a 360 panorama onto a cube I have defined by 8 vertices. All the UV mapping to get to smaller tiles is calculated which is fairly straight forward because each side is an independent square. I can use “simple” math to create the proper UV coordinates and assign them to the tiles.
Initially I wanted (and I would still like) to use different polyhedrons - like soccer ball (truncated icosahedron) and many others (I have a library of old VRML models) BUT I can’t figure out a way to get the panoramic textures UV mapped to the separate tiles (they are all individual so I can easily rotate them).
I have the edges and vertices and all but how to map and equirectangular image (or any other projection) onto it is beyond me.
Here is an example of a grid: 
I was hoping to be able use a sphere with the texture around the polyhedron and “cut” out the tiles that way ???
Has anybody an idea on how to achieve something like that??
I know - I need to “just” write a UV mapping algorithm but that is not something I will be able to do I think - except I am missing a point and making it way to difficult for me.
Hmm - a couple of views of the question but no hints.
Not sure what that means - does it mean it is just not of interest to anybody or does it really mean it can’t be done easily??
There is a bit more of what I would like to do on stackoverflow (https://stackoverflow.com/questions/55492869/mapping-a-360-panorama-onto-a-polyhedron-in-three-js)
The problem is that I need to project the equirectangular image AND cut it.
Without the projection the piece I need will be distorted meaning a triangle will not have a straight side.
I have written a script which points the camera to the centre of each piece in a loop, mask the rest and save the image but that still doesn’t really work. I got my triangle somewhere in a black surround without “proper” coordinates
I cut those projected and saved images by hand for one instance (all pentagons) to get this:
but I have no idea on how to achieve that programmatically
As I mentioned before - any hint is appreciated
Perhaps somebody from the three.js team ?? @mrdoob @Mugen87 (sorry for the direct question)
Cheers
Probably the latter one. I have only seen 360 panorama apps based on equirectangular or cube projection. The first one needs a sphere, the second one a cube geometry. I’m not aware of any other approaches used in three.js.
Thanks,
the thing is - I wouldn’t mind writing some UV mapping code myself.
Problem is - is don’t really know how to combine the projection with the cutting of the tiles.
But hey - will keep on trying.
I might not understand in detail what you’re aiming for, but as a possibility, why not projecting the entire 360 panorama image on the geometry you want and then iterating through the position, normal, uv and other BufferGeometry attributes to “cut” the projection into “pieces” by selectively use those attributes to create a new geometry (unless you’re already doing that, of course)?
Alternatively, you can check out various ways (some current, some outdated and still using the old Geometries) to “slice” geometries, like here, here, here, or here (preview here).
Another option would be to somehow use Raycaster to do the slicing, since it provides the intersect point, uv, face and its index, assuming you find some smart way to integrate that data into a new geometry containing the “surface” between the reference points that you set the raycaster to “mark” for the cut.
If these don’t suit the scenario, approach things the other way: instead of splitting a projected geometry into pieces, try to project the appropriate pieces according to the geometry. Sure, the separate pieces would have to be distorted so that once projected they yield the desired polygon or whatever and that is not exactly easy or consistent to do, but it’s another option you have, in the end.
