Question

我正在寻找使用famo.us创建的虚拟游览查看器。我很好奇是否有人使用该系统探索了360度全景图的三维变换？我环顾四周，没有找到任何与此有关的内容。

我在3D空间中找到了一个封闭的立方体，这是一个非常好的步骤。将多维数据集的大小更改为1500，并且您位于多维数据集的中心。如果面部是一个“立方体”的全景，并且添加了一些控件，我认为它会起作用。

Answer 1

我使用Scrollview做了一个非常酷的全景示例。由于即使滚动位置发生变化，Famo.us滚动视图也会保持其速度，因此您可以创建无限滚动的幻觉。我只是一个接一个地添加两个相同的360全景图像，每个4000像素宽。当我们点击滚动位置4001时，我们将scrollview跳转到位置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

你正在思考正确的方向。你面对的唯一一点点就是将图像/照片拼接在一起。

有很多来自艺术家和开发人员的文档，他们如何为视频游戏中的户外环境构建＆＃34; skyboxes＆＃34; ，更有可能是你和＃39 ;我会在Game Developers堆栈交换站点上找到一些东西。

使用famo.us为虚拟旅行转换全景图，它已经完成了吗？

2 个答案: