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

Question

So I am very new to Famo.us this could be a stupid question (I hope not).

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

I can pass through multiple types of shapes through the setGeometry is there a way I could pass through an image. For example, a logo?

Thanks!

Answer 1

You cannot pass an image as the geometry of the mesh, but you can pass an image to apply as a Material to the Mesh. Use mesh.setBaseColor and pass in 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'
}));

Run the example snippet below (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 [email protected]">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.famo.us/famous/0.5.2/famous.min.js"></script>