three.js panorama

看完臉書的 panorama 以後，覺得手癢想自己做一個~
研究一下發覺還挺簡單的範例如上。
 範例使用 Three.js 全景效果原理是用球體來做貼圖，

所以照片會是像是 U 字型一樣， 而球體的頂端跟末端，則會有融合處。

 

貼圖是貼在球體裡面， 所以 THREE.Mesh 創造的 object scale.x = -1; 才看得到東西。DirectionLight 影響對 scale 為 -1 的東西沒影響，所以照片多亮就多亮，還沒試過其他光源的影響。
THREE.js 單位是 THREE.js 內的單位，不是 pixel、cm、或是甚麼東西。
控制部分也很方便，可直接用THREE.js 內建功能， 手機叫用

THREE.DeviceOrientationControls 搭配 timer 不斷更新 control 的 update method 可直接支援手機陀螺儀 電腦叫用 THREE.OrbitControls 直接支援滑鼠拖拉

reference:
http://blog.thematicmapping.org/2014/01/photo-spheres-with-threejs.html