javascript - Mesh.setGeometry 可以使用 Famo.us Engine 传递图像吗

Question

所以我是 Famo.us 的新手，这可能是个愚蠢的问题(我希望不是)。

var Mesh = require('famous/webgl-renderables/Mesh');
.....
var mesh = new Mesh(meshNode).setGeometry('Circle');

我可以通过 setGeometry 传递多种类型的形状，有没有一种方法可以传递图像。例如， Logo ？

谢谢!

Answer 1

您不能将图像作为网格的几何形状传递，但可以将图像作为 Material 应用到网格。使用mesh.setBaseColor 并传入Material.image。

var scene = FamousEngine.createScene('body');

FamousEngine.init();

// Add a child node to add our mesh to.
var node = scene.addChild();

// Pass child node into new Mesh component.
var mesh = new Mesh(node);

// Give the mesh a geometry.
mesh.setGeometry('Circle', { detail: 100 });

mesh.setBaseColor(Material.image([], {
  texture: 'https://i.imgur.com/xn7lVCw.jpg'
}));

运行下面的示例片段(Spinning Sphere)

var FamousEngine = famous.core.FamousEngine;
var Mesh = famous.webglRenderables.Mesh;
var Material = famous.webglMaterials.Material;
var Transitionable = famous.transitions.Transitionable;

var scene = FamousEngine.createScene('body');
FamousEngine.init();

var rootNode = scene.addChild();
rootNode.setAlign(0.5,0.5, 0);
rootNode.setOrigin(0.5, 0.5, 0);
rootNode.setMountPoint(0.5, 0.5, 0.5);

// Add a child node to add our mesh to.
var node = rootNode.addChild();
node.setAlign(0.5,0.5, 0);
node.setOrigin(0.5, 0.5, 0);
node.setMountPoint(0.5, 0.5, 0.5);

node.setSizeMode('absolute','absolute','absolute');
node.setAbsoluteSize(200,200,200);

// Start a Transitionable Rotation value
var transitionY = new Transitionable();
var milisecs = 10000;
var startAngle = Math.PI * 2 / milisecs;
function rotateY() {
  transitionY.from(startAngle).set(Math.PI * 2, { duration: milisecs }, rotateY);
}

// Pass child node into new Mesh component.
var mesh = new Mesh(node);

// Give the mesh a geometry.
mesh.setGeometry('Sphere', { detail: 100 });

mesh.setBaseColor(Material.image([], { texture: 'https://i.imgur.com/xn7lVCw.png' }));

// Add a spinner component to the 'node' that is called, every frame
var spinner = rootNode.addComponent({
  onUpdate: function(time) {
    if (!transitionY.isActive()) rotateY();
    rootNode.setRotation(0, transitionY.get(), 0);
    rootNode.requestUpdateOnNextTick(spinner);
  }
});

// Let the magic begin...
rootNode.requestUpdate(spinner);

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
body {
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-perspective: 0;
  background-color: black;
  perspective: none;
  overflow: hidden;
}

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="description" content="Draggable Famous@0.5.2">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.famo.us/famous/0.5.2/famous.min.js"></script>