可以 Mesh.setGeometry 使用 Famo.us 引擎传递图像

Question

所以我对 Famo.us 很陌生，这可能是个愚蠢的问题（我希望不是）。

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

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

谢谢！

Answer 1

您不能传递图像作为网格的几何形状，但可以传递图像以作为 Material 应用到 Mesh。使用 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>

可以 Mesh.setGeometry 使用 Famo.us 引擎传递图像

Can Mesh.setGeometry pass through an image using Famo.us Engine

javascript

famo.us

famous-engine

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

可以 Mesh.setGeometry 使用 Famo.us 引擎传递图像

Can Mesh.setGeometry pass through an image using Famo.us Engine

javascript

famo.us

famous-engine

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

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