A-Frame and Cardboard Camera

Displaying Cardboard Camera Stereo Panoramas with A-Frame

Update: for an easier way, see Overunder Panorama Viewer.

Instructions:

1. Convert original vr.jpg Cardboard Camera image into over-under equirectangular with this webservice.

2. Split the over-under equirectangular image in two using the following ImageMagick command:

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

Note: replace <IMAGE.png> with the name and format of the image you want to split.

This command will add two new files to your directory. I suggest renaming them to avoid confusion:

• pano_0.png -> left.png
• pano_1.png -> right.png

2. Upload the left and right images to the host of your choice. Beware of CORS issues. Imgur worked for me.

3. Go to this codepen and hit the "fork" button (or fork this Gist and use bl.ocks).

4. Replace the links on lines 4 and 5 with your own.

CodePen has a number of different views, "debug" is the cleanest.

References

Credit for Cardboard panorama: Google.

Example Pen by bryik on CodePen.