Transforming Panoramas for Virtual Tours with famo

Question

I'm looking in to have a virtual tour viewer created using famo.us. I am curious if anyone has explored 3d transformations for 360 degree panoramas using that system? I've looked around and haven't found anything specifically related to that.

I've found an enclosed cube in 3D space which is a pretty good step. Changing the size of the cube to 1500 and you are in the centre of the cube. If the faces were a "cubified" pano and some controls were added, I think it would work.

http://codepen.io/webossfo/pen/EAIam

Answer 1

You're thinking along the right lines. The only fiddly bits you face are with the likes of stitching the images/photos together.

There's a lot of documentation however from both artists and developers on how they build "skyboxes" for outdoor environments in video games, more likely than not you'll find something on the Game Developers stack exchange site.

Answer 2

I made a pretty cool panoramic example just using Scrollview. Since the Famo.us scrollview maintains its velocity even when scroll position is changed, you can create the illusion of infinite scrolling. I simply add two of the same 360 panorama images one after the other, each 4000 pixels wide. When we hit scroll position 4001, we jump the scrollview to position 1. Likewise when we hit scroll position 0, we jump the scroll position to 4000.

Here is the example..

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var Scrollview        = require('famous/views/Scrollview');
var SequentialLayout   = require('famous/views/SequentialLayout');

var context = Engine.createContext();

var scrollview = new Scrollview( {
  direction:0,
  friction:0.001,
  drag:0.001
});
var cells = [];

scrollview.sequenceFrom(cells);

var sequence = new SequentialLayout( { direction:0 } );
var surfaces = [];
sequence.sequenceFrom(surfaces);

var imageWidth = 4000;

for (var i = 0; i < 2; i++) {
  var surface = new Surface({
    size:[imageWidth,undefined],
    content:"<img style='width:100%' src='http://www.olivewhite.com/photographies/album_040_panoramas/Le_Pano_de_la_Roche_Parstire_gamma.jpg' />"
  });
  surface.pipe(scrollview);
  surfaces.push(surface);
};

cells.push(sequence);

scroller_prerender = function(){
  var pos = scrollview.getPosition();
  if (pos > imageWidth) {
    scrollview.setPosition(1);
  } else if (pos < 1) {
    scrollview.setPosition(imageWidth);
  }
}

Engine.on('prerender',scroller_prerender);

context.add(scrollview);

Here is that example hosted..

http://higherorderhuman.com/examples/infinite.html

I know it's a bit different than the ideology you were approaching before, but with the current tools available (and lack of 3D helpers), you may be able to hack together a solution!

Hope this helps!