Преобразование панорам для виртуальных туров с famo.us, это было сделано?

Question

Я ищу виртуальный просмотрщик туров, созданный с помощью famo.us. Мне интересно, если кто-нибудь исследовал трехмерные преобразования для панорам на 360 градусов, используя эту систему? Я посмотрел вокруг и не нашел ничего, что конкретно связано с этим.

Я нашел вложенный куб в трехмерном пространстве, что является довольно хорошим шагом. Изменив размер куба на 1500, вы окажетесь в центре куба. Если бы лица были панорамированным кубиком и были добавлены некоторые элементы управления, я думаю, это сработало бы.

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

Answer 1

Я сделал довольно крутой панорамный пример, просто используя Scrollview. Поскольку режим прокрутки в Famo.us поддерживает свою скорость даже при изменении положения прокрутки, вы можете создать иллюзию бесконечной прокрутки. Я просто добавляю два одинаковых 360 панорамных изображения одно за другим, каждое шириной 4000 пикселей. Когда мы нажимаем на позицию прокрутки 4001, мы переходим от просмотра прокрутки к позиции 1. Аналогично, когда мы нажимаем на позицию прокрутки 0, мы переходим с позиции прокрутки на 4000.

Вот пример..

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);

Вот этот пример размещен..

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

Я знаю, что это немного отличается от идеологии, к которой вы подходили ранее, но с текущими доступными инструментами (и нехваткой помощников по 3D), вы можете составить решение!

Надеюсь это поможет!

Answer 2

Вы думаете по правильному пути. Единственные неудобные кусочки, с которыми вы сталкиваетесь, - это сшивание изображений / фотографий вместе.

Однако от художников и разработчиков есть много документации о том, как они создают "скайбоксы" для наружной среды в видеоиграх, скорее всего, вы найдете что-то на сайте обмена стеками разработчиков игр.