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 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>