krpano - three.js - and a CMS

building a vr-app with krpano and three.js and some more browser tech

In a recent VR-project there where two problems to solve:

  1. bringing together krpano and three.js
  2. being able to change the contents of krpano-hotspots via a CMS

Let me tell you how I solved these.

1) Getting krpano and three.js married

Even if krpano is not open source, comes with some legacy code and is not the best documented software out there, it is still a robust, flexible and performant tool and comes with some nice features like multi-resolution panoramic images.

But bring it together with three.js was not easy. Even if there is a demo showing that its generally possible to include 3D-Objects into krpano. Unfortunately the code used is rather old release of three.js (REVISION:”71″) and was not really working with more recent versions of three.js.

After doing some more research on the underlying technology WebGL, the difficulty seems to be to mix different render contexts, 2D for krpano and 3D for three.js into one WebGL-Canvas (see e.g. on SO).

So the solutions was simply to have two canvasses stacking above each other via z-index and doing some CSS-Animations on them.

3D rendering of Dethlev-Rohwedder-Haus in Berlin

2) Manage krpano Hotspots via CMS

For managing different media formats inside of krpano popups, I wrote a krpano-JavaScript-Plugin which renders some JSON-data into a popup.
Each scene in the tour is connected to a JSON-File.
When a user clicks a hotspot, the app takes the ID of the hotspot, look for it in JSON and renders the data into a popup above the panoramic scene.
The rendering is done via js template literals.
This setups works quite well inside the krpano-webgl-canvas, even with interactive contents like before-after-sliders (beer-slider) or slideshows (swiper)

With this architecture we are able to manage content of krpano hotspots and popups outside of krpano with a CMS of our choice. The CMS just needs to be able to produce some structured JSON 😉

take a look at the project

Interested in hearing more or build a similar project?