There's also a demo letting you view the famous Utah teapot.
There are two demos:
- Panorama of mars, that you can look around by turning your head (in a Cardboard viewer): View Demo.
- The Utah teapot, which you can rotate by turning your head (in a Cardboard viewer): View Demo.
These will work in a desktop browser (tested in Chrome and Safari), but are best viewed in a Google Cardboard viewer (tested with iPhone 5s and Mattel View-Master).
First, you'll need to have
npm installed. It comes with node.
tsd is optional (but recommended) if you want type definitions for use in TypeScript; install it with
npm install -g tsd if you don't already have it.
npm install tsd install # Optional. node_modules/.bin/bower install node_modules/.bin/tsc node_modules/.bin/webpack-dev-server --content-base www/ open http://localhost:8080/
To access the dev server from your phone, you may need to specify your computer's IP address in a
--host parameter to
Static building (deployment)
npm install tsd install # Optional. node_modules/.bin/bower install node_modules/.bin/tsc node_modules/.bin/webpack # Files are in www/ directory.
- https://github.com/Izzimach/react-three - React wrapper around three.js. This project relies on a forked version of react-three that I hacked-up to support stereoscopic rendering.
- https://github.com/borismus/webvr-polyfill - Used to control the camera (what you're looking at) based on device orientation sensors. This is what lets you look around the panorama by turning your head (when your phone is in a Google Cardboard viewer).
- https://github.com/borismus/webvr-boilerplate - Used as a reference to figure out how to use webvr-polyfill.
- https://www.reddit.com/r/GoogleCardboard/comments/39t5tl/7000_subscribers_extra_basic_cardboard_questions/ - Introductory info about Google Cardboard.
- Calibrate the rendering using Google Cardboard viewer QR codes.
- Expose a React component with a simple interface for rendering panoramas (like the one in the demo).
- Expose a React component with a simple interface for rendering a single object that you can orbit around (rather than pivoting the camera).
Contributions are welcome. Send a PR.