使用famo.us转换“虚拟游览全景图"，是否已完成? [英] Transforming Panoramas for Virtual Tours with famo.us, has it been done?

问题描述

我正在寻找一个使用famo.us创建的虚拟游览查看器.我很好奇，是否有人使用该系统探索了360度全景的3D转换?我环顾四周，没有发现任何与之特别相关的东西.

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.

我在3D空间中找到了一个封闭的立方体，这是一个很好的步骤.将多维数据集的大小更改为1500，您就位于多维数据集的中心.如果这些面孔是畸形的"全景图片，并且添加了一些控件，那么我认为它会起作用.

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

推荐答案

我仅使用Scrollview做了一个非常酷的全景示例.由于即使更改滚动位置，Famo.us滚动视图仍保持其速度，因此您可以创建无限滚动的错觉.我只是简单地一个接一个地添加两个相同的360度全景图像，每个宽度4000像素.当我们到达滚动位置4001时，我们将滚动视图跳到位置1.同样，当我们达到滚动位置0时，我们将滚动位置跳到4000.

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.

这里是例子.

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帮助器)，您也许可以共同找到一个解决方案！

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!

希望这会有所帮助！

这篇关于使用famo.us转换“虚拟游览全景图"，是否已完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！