On the second page of the tutorial, App.js adds a div to the meshNode, but DOMElement was not required. This leads to the sphere rendering in 2D and not rotating, as well as the div not rendering:
var PointLight = require('famous/webgl-renderables/lights/PointLight');
var FamousEngine = require('famous/core/FamousEngine');
var Mesh = require('famous/webgl-renderables/Mesh');
var Camera = require('famous/components/Camera');
var Color = require('famous/utilities/Color');
var DOMElement = require('famous/dom-renderables/DOMElement'); // Tutorial missing this line
function App(scene) {
// Add a camera to our scene for perspective rendering.
On the second page of the tutorial, App.js adds a div to the meshNode, but DOMElement was not required. This leads to the sphere rendering in 2D and not rotating, as well as the div not rendering:
var PointLight = require('famous/webgl-renderables/lights/PointLight'); var FamousEngine = require('famous/core/FamousEngine'); var Mesh = require('famous/webgl-renderables/Mesh'); var Camera = require('famous/components/Camera'); var Color = require('famous/utilities/Color'); var DOMElement = require('famous/dom-renderables/DOMElement'); // Tutorial missing this line
function App(scene) { // Add a camera to our scene for perspective rendering.
var camera = new Camera(scene).setDepth(1000);
// Add mesh to our scene.
var meshNode = scene.addChild() .setOrigin(0.5, 0.5, 0.5) .setAlign(0.5, 0.5, 0.5) .setMountPoint(0.5, 0.5, 0.5) .setSizeMode(1, 1, 1) .setAbsoluteSize(200, 200, 200);
var mesh = new Mesh(meshNode).setGeometry('Sphere');
var element = new DOMElement(meshNode, { tagName: 'div' }).setProperty('background-color', 'pink');
// Add light component to our scene.
var lightNode = scene.addChild() .setAlign(0.5, 0.5, 0.5) .setPosition(0, 0, 250);
var light = new PointLight(lightNode) .setColor(new Color('white'));
var clock = FamousEngine.getClock();
// Define update loop
FamousEngine.getClock().setInterval(function() { var time = clock.getTime();
}, 16); }
module.exports = App;