A 360° walk-through of my office. This is a case study with the ThreeJS 3D engine for HTML5 Canvas and WebGL. I have adapted the ThreeJS WebGL equirectangular panorama demo, making it fall back to Canvas renderer when browser doesn't support WebGL. The overlaying markers are DOM objects. There's some coordinates conversion between ThreeJS 3D world and 2D DOM. In this adaptation, there are 2 spherical panoramas so users can navigate and see more corners of the office. Just for fun and experimental purpose, some snowing effect added on the occasion of Christmas 2011.
Components used:
- ThreeJS WebGL equirectangular panorama demo
- Snowing effect by Seb Lee-Delisle
Finally, check out the demo and grab the source code.
Really Impressive work!!
ReplyDeleteverry nice work...But how did you get the initial x,y,x values for the markers?
ReplyDeleteI mean the values that you've put in your datafile...
Hi,
ReplyDeleteWhat I did was adding a DOM crosshair at the center of the scene. Then with the sphere rendered, I rotate and aim the designated position at the crosshair. By exposing the sphere or the camera (I don't quite remember, it's written long ago) to global, I use the console to get it's current X Y Z values. Simple as that.
Thank you for your reply, i think i understand what you did...
ReplyDelete