360-panorama
WebGL
three.js Example
- Use Case:
- Equirectangular Projection
- Paste this image on a sphere.
- Saw this kind of image before?
- Problems:
- ProblemsMobile device not support WebGL
- Android 4.1 native supports this format
- Want to build a web service to serve this image format and support mobile device
CSS
- How about
- Use hyperrectangular instead of sphere
Which is much simpler
- Cubic Projection !!
Demo: CSS cubic
How to control mouse drag?
Demo: CSS #1
- Somthing still wrong
- How about increase the face of the polygon
More Faces
- Hard to generate images for dodecahedron
- Use google stree view image API
- Not perfect
Demo: CSS dodecahedron
-
Learned:
- Use SVG clippath to clip the pentagon
or you will see face overlape
- Remember to center pentagon, it is smaller than the square.
-
Problems
- Must support SVG
- Must work well when use both SVG and 3D transform
Back to Cubic
- Actually
- My perspective is wrong on cubic version
- Thanks bigcat
Demo: CSS
- Problem:
- Canvas support is better than 3D transform (ref: caniuse)
Canvas 2D
- three.js supports 2d canvas.
- Other 3D library also supports too.
Demo: three.js 2D example, please open in Firefox.
- Implement 3d projection by 3D JS library