Deprecated. The examples in this repo may still be useful, but if you're just interested in viewing a Cardboard Camera photo then check out stereo-panorama-viewer. All you need to do is convert your Cardboard Camera photo and then drag-and-drop into the viewer.

A-Frame Cardboard Camera Example

Demonstrates how to display Cardboard Camera photos with A-Frame.

An Easier Way?

Updated: August 22nd, 2016.

Rather than use this repository as a boilerplate to deploy your Cardboard Camera images to GitHub Pages, it may be easier to upload to Imgur and CodePen. Step-by-step instructions are available here.

Use as a Boilerplate

If you want to display your own Cardboard Camera photos, feel free to fork or download this repo and replace the library images with your own.

Instructions:

Get vr.jpg source files off your phone and onto your computer.
Use this web service to convert the vr.jpg to over-under equirectangular.
Split the image obtained in step (2) using a tool like ImageMagick. This command works:

    magick convert <IMAGE.png> -crop 1x2@ +repage +adjoin pano_%d.png

Rename the output images "left" and "right".

Download or fork this repository and replace the images in the asset folder with your own.

What follows is copied from the A-Frame starter boilerplate.

^{Option 1:} Download the ZIP kit 📦

After you have downloaded and extracted this .zip file containing the contents of this repo, open the resulting directory, and you'll be have your scene ready in these few steps:

npm install && npm start
open http://localhost:3000/

^{Option 2:} Fork this Git repo 🍴🐙

Alternatively, you can fork this repo to get started, if you'd like to maintain a Git workflow.

After you have forked this repo, clone a copy of your fork locally and you'll be have your scene ready in these few steps:

git clone https://github.com/bryik/aframe-cardboard-camera.git
cd aframe-cardboard-camera && rm -rf .git && npm install && npm start
open http://localhost:3000/

📱 Mobile pro tip: Upon starting the development server, the URL will be logged to the console. Load that URL from a browser on your mobile device. (If your mobile phone and computer are not on the same LAN, consider using ngrok for local development and testing. Browsersync is also worth a gander.)

Publishing your scene

If you don't already know, GitHub offers free and awesome publishing of static sites through [https://pages.github.com/](GitHub Pages).

To publish your scene to your personal GitHub Pages:

npm run deploy

And, it'll now be live at http://your_username.github.io/ :)

To know which GitHub repo to deploy to, the deploy script first looks at the optional repository key in the package.json file (see npm docs for sample usage). If the repository key is missing, the script falls back to using the local git repo's remote origin URL (you can run the local command git remote -v to see all your remotes; also, you may refer to the GitHub docs for more information).

Still need Help?

Installation

First make sure you have Node installed.

On Mac OS X, it's recommended to use Homebrew to install Node + npm:

brew install node

To install the Node dependencies:

npm install

Local Development

To serve the site from a simple Node development server:

npm start

Then launch the site from your favourite browser:

http://localhost:3000/

If you wish to serve the site from a different port:

PORT=8000 npm start

License

This program is free software and is distributed under an MIT License.

bryik/aframe-cardboard-camera