0

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

我在 3D 空间中发现了一个封闭的立方体，这是一个很好的步骤。将立方体的大小更改为 1500，您就位于立方体的中心。如果面部是“立体”全景并添加了一些控件，我认为它会起作用。

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

4

2 回答 2

2

我只使用 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 助手），您或许能够拼凑出一个解决方案！

希望这可以帮助！

于 2014-06-12T04:18:10.287 回答
0

你的想法是正确的。您面临的唯一麻烦是将图像/照片拼接在一起。

但是，艺术家和开发人员都提供了很多关于他们如何为视频游戏中的户外环境构建“天空盒”的文档，您很可能会在 Game Developers 堆栈交换网站上找到一些东西。

于 2014-06-11T22:06:15.453 回答