threejs – krpano – and a VR-CMS
Together with jesterblank.com we made this beautiful web-app combining a 3D-Model and some panoramic image for BMF. We built the frontend.
some technical backgrounds
1) Getting krpano and three.js into one two canvas canvasses
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).
The solutions was simply to have two canvasses stacking above each other via z-index and doing some CSS-Animations on them.
2) Manage krpano Hotspots via CMS
For managing different media formats inside of krpano popups, we 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.
