{"id":16847526,"url":"https://github.com/othree/360-panorama","last_synced_at":"2025-03-22T05:31:30.540Z","repository":{"id":9028174,"uuid":"10787516","full_name":"othree/360-panorama","owner":"othree","description":"360-panorama for happy designer mini#2","archived":false,"fork":false,"pushed_at":"2013-07-08T10:04:23.000Z","size":28647,"stargazers_count":75,"open_issues_count":1,"forks_count":19,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-18T08:48:25.011Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://registrano.com/events/happydesigner-mini-2","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/othree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-19T09:31:33.000Z","updated_at":"2021-06-30T17:11:22.000Z","dependencies_parsed_at":"2022-09-01T18:41:22.128Z","dependency_job_id":null,"html_url":"https://github.com/othree/360-panorama","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/othree%2F360-panorama","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/othree%2F360-panorama/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/othree%2F360-panorama/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/othree%2F360-panorama/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/othree","download_url":"https://codeload.github.com/othree/360-panorama/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244912800,"owners_count":20530764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T13:08:15.540Z","updated_at":"2025-03-22T05:31:25.531Z","avatar_url":"https://github.com/othree.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"360-panorama\n============\n\nWebGL\n-----\n\n[three.js](http://othree.github.io/360-panorama/three-3d/) Example\n\n* Use Case:\n  * Google Street View\n* Equirectangular Projection（等距圓柱投影）\n\n\n\u003cimg alt=\"equirectangular projection\" src=\"three-3d/textures/2294472375_24a3b8ef46_o.jpg\" width=\"500\" /\u003e\n\n* Paste this image on a sphere.\n* Saw this kind of image before?\n\n\n\u003cimg alt=\"equirectangular earth\" src=\"doc/images/Equirectangular-projection.jpg\" width=\"500\" /\u003e\n\u003cimg alt=\"earth\" src=\"doc/images/earth.jpg\" width=\"500\" /\u003e\n\n* Problems:\n  * ProblemsMobile device not support WebGL\n  * Android 4.1 native supports this format\n  * Want to build a web service to serve this image format and support mobile device\n\nCSS\n---\n\n* How about\n  * Use hyperrectangular instead of sphere\n    Which is much simpler\n  * Cubic Projection !!\n\n![基礎](doc/images/1.basic.png)\n\nDemo: [CSS cubic](http://codepen.io/linmic/pen/hGmBp)\n\n* Images!!\n\n\u003cimg src=\"css/texture/cube0000.jpg\" width=\"300\" alt=\"\" /\u003e\n\u003cimg src=\"css/texture/cube0001.jpg\" width=\"300\" alt=\"\" /\u003e\n\u003cimg src=\"css/texture/cube0002.jpg\" width=\"300\" alt=\"\" /\u003e\n\u003cimg src=\"css/texture/cube0003.jpg\" width=\"300\" alt=\"\" /\u003e\n\u003cimg src=\"css/texture/cube0004.jpg\" width=\"300\" alt=\"\" /\u003e\n\u003cimg src=\"css/texture/cube0005.jpg\" width=\"300\" alt=\"\" /\u003e\n\n* How to get the image for six faces?\n* Ref: [Converting an Equirectangular Panorama to Cubic Faces](http://vinayhacks.blogspot.tw/2010/11/converting-equirectangular-panorama-to.html)\n  * CPAN Panotools for erect2cubic \n  * [Hugin](http://hugin.sourceforge.net/) for nona\n  * `/Applications/Hugin/HuginTools/nona`\n  * [See Here](https://github.com/othree/360-panorama/tree/master/css/texture)\n\nHow to control mouse drag?\n--------------------------\n\n![拖動](doc/images/2.drag.png)\n![拖動結果](doc/images/3.drag-result.png)\n\n* θ is ?\n\n    theta = Math.atan2(0.5l, d);\n\nDemo: [CSS #1](http://othree.github.io/360-panorama/css-first/)\n\n* Somthing still wrong\n* How about increase the face of the polygon\n\nMore Faces\n----------\n\n![12面體](doc/images/500px-POV-Ray-Dodecahedron.svg.png)\n\n* Hard to generate images for dodecahedron\n  * Use google stree view image API\n  * Not perfect\n\nDemo: [CSS dodecahedron](http://othree.github.io/360-panorama/dodecahedron/)\n\n* Learned:\n  * Use SVG clippath to clip the pentagon（五邊形）\n    or you will see face overlape\n  * Remember to center pentagon, it is smaller than the square.\n\n* Problems\n  * Must support SVG\n  * Must work well when use both SVG and 3D transform\n\nBack to Cubic\n-------------\n\n* Actually…\n* My perspective is wrong on cubic version\n * Thanks bigcat\n\n![transform](doc/images/4.transform.png)\n\nDemo: [CSS](http://othree.github.io/360-panorama/css/)\n\n* Problem:\n  * Canvas support is better than 3D transform (ref: caniuse)\n \nCanvas 2D\n---------\n\n* three.js supports 2d canvas….\n* Other 3D library also supports too.\n  \nDemo: [three.js](http://othree.github.io/360-panorama/three-2d/) 2D example, please open in Firefox.\n\n* Implement 3d projection by 3D JS library\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fothree%2F360-panorama","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fothree%2F360-panorama","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fothree%2F360-panorama/lists"}