Generator to quickly create a web based 360 photo scaffold with aframe
JavaScript HTML
Latest commit 8bb6d05 Dec 1, 2016 @gasolin committed on GitHub Update
Failed to load latest commit information.
generators/app show exif info when module is installed (for debugging) Nov 22, 2016
.travis.yml make it run Nov 17, 2016 show exif info when module is installed (for debugging) Nov 22, 2016
LICENSE Initial commit Nov 17, 2016
gulpfile.js make it run Nov 17, 2016

generator-360-photo NPM version Build Status Dependency Status Coverage percentage

Generator to create a web based 360 photo scaffold with aframe

You don't need upload your 360 photo to Facebook to share with others. All you need is a static web hosting (ex: github page) and generator-360-photo.


First, install Yeoman and generator-360-photo using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-360-photo

Create a folder with your panorama image. (Currently generator-360-photo only support jpg or png with equirectangular porjection, you can get the image from 360 cameras or apps like google streetview)

Enter the folder then generate your project:

yo 360-photo

generator-360-photo will guide you to generate the scaffold for web hosting this 360 photo.


Here is the Blog Post embeded the 360 photo in iframe, which is hosted on github page.

Here is the setting process

$ yo 360-photo

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │    generator-360-photo   │
   `---------´   │        generator!
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
 ´   `  |° ´ Y `

? Where's your photo's path? 2016-06-06_21.50.35.jpg
? Enter your photo's title 360 photo
? Enter the file name photo
? Would you embed this photo within a iframe? Yes
? Would you like to create 360 photo scaffold in this folder? Yes
   create photo.html

generator-360-photo also do the image optimize and resizing for you. The sample image size is optimized dramatically from 5.62MB(5660x2830) to 481KB(2048x1024) when you choose embeded the photo. The photo will keep the same size when not embeded.

What does embedded mean?

Refer to aframe, The generated scaffold will not contain fullscreen style when say yes.

Change default view orientation

You can change default view orientation to better present the view you want visitors to see at first.

Edit the rotation attribute in a-sky tag to specify the orientation of the photo.

<a-sky src="#img" rotation="0 0 0"></a-sky>

The 3 values in rotation are the roll (x), pitch (y), and yaw (z). My suggestion is DO NOT edit the first value (roll), it will change the default horizontal, which makes navigation weired.


The scaffold is fully based on aframe, the web framework for builing VR experience. You can refer aframe to move your 360 photo to the new level.


Copyright (c) 2016 Fred Lin (twitter: @gasolin) Licensed under the MIT license.