famo.us：从桌面网络浏览器模拟视差

Question

我正在使用 famo.us 示例中的 DeviceView 来让使用台式机/笔记本电脑的人能够想象应用程序在手机上的外观。我必须从 famo.us 网站提取 DeviceView.js 和支持图像。我现在有一个手机的 2D 图像，屏幕上有一个表面，我可以用它做任何我想做的事情，现在我想在右边做一个小的“操纵杆”，我可以用它来做两件事：

1. 随着操纵杆的移动，我希望 DeviceView 旋转 3 个维度，因此它实际上就像设备在旋转
2. 向我的 famo.us 代码发送信号以调整应用层以获得视差效果

对我来说困难的部分是#1，因为我不知道如何让这个 2D 图像在 3D 空间中旋转。是否有为此进行 famo.us 转换？如果我可以拍摄图像并将其拉伸到 Z 维度，使其看起来像一个 3D 对象，那就太棒了。

谁能帮忙？

Answer 1

好主意。

我编辑了hello-famous example中的代码，你应该可以复制粘贴了。

var Engine        = require('famous/core/Engine');
var Surface       = require('famous/core/Surface');
var Transform     = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing        = require('famous/transitions/Easing');
var Lightbox      = require('famous/views/Lightbox');
var DeviceView    = require('./DeviceView');

var mainContext = Engine.createContext();

// Set perspective
mainContext.setPerspective(1000);

var device, lightbox;
var slides = [];
var index = 0;

var RotatorX = new StateModifier();
var RotatorY = new StateModifier();
var RotatorZ = new StateModifier();

function joyStickMovedUpDown(positionX) {
    RotatorX.setTransform(new Transform.rotateX(positionX));   
}

function joyStickMovedLeftRight(positionY) {
    RotatorY.setTransform(new Transform.rotateY(positionY));
}
function spin(positionZ) {
    RotatorZ.setTransform(new Transform.rotateZ(positionZ));
}
// Hook this up to your joystick movement
joyStickMovedUpDown(0.9);
joyStickMovedLeftRight(0.3)
spin(0.25);

var lightboxOptions = {
  inOpacity: 1,
  outOpacity: 1,
  inTransform: Transform.translate(320,0, 0),
  outTransform: Transform.translate(-320, 0, 1),
  inTransition: { duration: 400, curve: Easing.outBack },
  outTransition: { duration: 150, curve: Easing.easeOut }
};

createDevice();
createSlides();
createLightbox();

function createDevice() {
  var deviceOptions = {
    type: 'iphone',
    height: window.innerHeight - 100
  };

  device = new DeviceView(deviceOptions);

  var deviceModifier = new StateModifier({
    size: device.getSize(),
    origin: [0.5, 0.5]
  });

  // Add rotators
  mainContext.add(deviceModifier).add(RotatorY).add(RotatorX).add(RotatorZ).add(device);
}

function createSlides() {
  var slideContent = [
    '<img src="http://launch.famo.us/fu-assets/hello/slide1.png" width="100%">',
    '<img src="http://launch.famo.us/fu-assets/hello/slide2.png" width="100%">',
    '<img src="http://launch.famo.us/fu-assets/hello/slide3.png" width="100%">'];

  var background = new Surface({
    properties: {
      backgroundColor: '#FA5C4F'
    }
  });

  device.add(background);

  for (var i = 0; i < slideContent.length; i++) {
    var slide = new Surface({
      content: slideContent[i],
      properties: {
        color: 'white',
        lineHeight: '200%',
        textAlign: 'center',
        fontSize: '36px',
        cursor: 'pointer'
      }
    });

    slide.on('click', showNextSlide);

    slides.push(slide);
  }
}

function createLightbox() {
  lightbox = new Lightbox(lightboxOptions);
  device.add(lightbox);
  lightbox.show(slides[0]);
}

function showNextSlide() {
  index++;
  if(index >= slides.length) index = 0;
  lightbox.show(slides[index]);
}