Skip to content

othree/360-panorama

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

360-panorama

WebGL

three.js Example

  • Use Case:
    • Google Street View
  • Equirectangular Projection(等距圓柱投影)

equirectangular projection

  • Paste this image on a sphere.
  • Saw this kind of image before?

equirectangular earth

earth

  • 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

  • Images!!

How to control mouse drag?

拖動 拖動結果

  • θ is ?

    theta = Math.atan2(0.5l, d);

Demo: CSS #1

  • Somthing still wrong
  • How about increase the face of the polygon

More Faces

12面體

  • 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

transform

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

Releases

No releases published

Packages

No packages published

Languages