How to Make a Simple Panoramic Image Viewer

Making a custom panoramic image viewer is very simple when you use Threejs. All you have to do is create a sphere object, place a camera in the middle of it, and add the image to the backside of the sphere. Most of the controls are already availalbe for you. I also like to use the orbit control library to get a nice fluid view.

The nice thing about programming the image viewer yourself is that you can customize it easily! If you want the camera to slowly look around you can simply add a rotation to the y axis of the camera in the render function. You can also add your own object inside of the image. This could be a replacement for cubemapping if large enough and you need more seemless edges.

The example below can be utilized by clicking and dragging with your mouse. I added a VR component to this one that will work with software like Google Cardboard.

See the Pen Panoramic Image Viewer by Bryan Jones (@bartuc) on CodePen.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.