famous engine - Why does my box disappear? -

i trying track position of 'mybox,' @ time of click. works when attach event mybox, isn't want. want able click anywhere within window. thought since scene has .onreceive() function, able attach click event scene itself, whenever do, box not appear.

'use strict';   var famous = require('famous');   var camera = famous.components.camera;  var math = famous.math; var physics = famous.physics; var physicsengine = famous.physics.physicsengine; var box = physics.box; var vec3 = math.vec3; var size = famous.components.size; var position = famous.components.position; var mountpoint = famous.components.mountpoint; var gravity1d = physics.gravity1d; var collision = physics.collision; var distance = physics.distance; var wall = physics.wall;   var domelement = famous.domrenderables.domelement; var famousengine = famous.core.famousengine;  //physics engine test function game() {    //create scene graph   this.scene = famousengine.createscene('body');    this.camera = new camera(this.scene);   // this.camera.setdepth(1000);    this.simulation = new physicsengine();    this.node = this.scene.addchild();   this.node       .setsizemode('absolute', 'absolute', 'absolute')       .setabsolutesize(50, 200)       .setposition(0, 0, 0)       .setmountpoint(0.5, 1);    this.line = this.node.addchild();   this.line       .setabsolutesize(50,10)       .setsizemode(1,1,1)       .setalign(0.0, 0.5); //need make function radomize   var mark = new domelement(this.line, {     properties:{         'background-color': '#ff0000'     }   });     var position = new position(this.node);   this.mybox = createbox.call(this, this.node, position);   this.scene.mybox = this.mybox;   console.log('this.mybox', this.mybox);   console.log(window.innerheight);      this.scene.adduievent('click');     this.scene.onreceive = function(event,payload){         if(event==='click'){             var itemposition = this.mybox.getposition();             // var bp = this.mybox.getposition();             console.log(itemposition.y - 100);         }     }     famousengine.requestupdateonnexttick(this);   console.log(this); }  game.prototype.onupdate = function(time){     this.simulation.update(time);  var itemposition = this.mybox.getposition();      // console.log(itemposition);     //console.log(itemposition.x, itemposition.y, itemposition.z);  this.node.setposition(itemposition.x,itemposition.y,itemposition.z);     famousengine.requestupdateonnexttick(this); };  //add node - node static //create box function createbox(node, position) {   //attach dom element component staticnode   this.bluediv = new domelement(node, {      properties:{       'background-color':'#49afeb'     }    });    var mb = new box({     mass: 10,     size: [50, 200, 10],     position: new vec3(window.innerwidth / 2, 0, 0)   });    this.gravity = new gravity1d(mb, {direction: gravity1d.down,     strength: 500});    this.floor = new wall({direction: wall.up, friction: 0});   this.floor.setposition(0, window.innerheight, 0);    this.collision = new collision([mb, this.floor]);   this.distance = new distance(mb,this.floor);    this.simulation.add([mb, this.gravity, this.collision]);   console.log("hey");    return mb; }  famousengine.init();  var test = new game(); 

the scene start of engine scene graph. use context rather parent node. first isolate outside our class scope in case , adding starting scene node top of scene graph.

//create scene graph var scene = famousengine.createscene('body');  var camera = new camera(scene); camera.setdepth(1000);  //physics engine test function game(scenenode) {   this.simulation = new physicsengine();    this.node = scenenode.addchild();   this.node     .setsizemode('absolute', 'absolute', 'absolute')     .setabsolutesize(50, 200)     .setposition(0, 0, 0)     .setmountpoint(0.5, 1);    this.line = this.node.addchild();   this.line     .setabsolutesize(50, 10)     .setsizemode(1, 1, 1)     .setalign(0.0, 0.5); //need make function radomize   var mark = new domelement(this.line, {     properties: {       'background-color': '#ff0000'     }   });     var position = new position(this.node);   this.mybox = createbox.call(this, this.node, position);    console.log('this.mybox', this.mybox);    var element = new domelement(scenenode);   scenenode.adduievent('click');   scenenode.onreceive = function(event, payload) {     if (event === 'click') {       var itemposition = this.mybox.getposition();       // var bp = this.mybox.getposition();       console.log(itemposition.y - 100);     }   }.bind(this);    famousengine.requestupdateonnexttick(this);   console.log(this); } . . .  famousengine.init();  var root = scene.addchild(); var game = new game(root); 

the click event needs domelement on node size of our scene, add 1 root node.

  var element = new domelement(scenenode);   scenenode.adduievent('click');   scenenode.onreceive = function(event, payload) {     if (event === 'click') {       var itemposition = this.mybox.getposition();       // var bp = this.mybox.getposition();       console.log(itemposition.y - 100);     }   }.bind(this); 

here example snippet

//var famous = require('famous');    var famousengine = famous.core.famousengine;  var camera = famous.components.camera;  var domelement = famous.domrenderables.domelement;    var math = famous.math;  var physics = famous.physics;  var physicsengine = famous.physics.physicsengine;  var box = physics.box;  var vec3 = math.vec3;  var size = famous.components.size;  var position = famous.components.position;  var mountpoint = famous.components.mountpoint;  var gravity1d = physics.gravity1d;  var collision = physics.collision;  var distance = physics.distance;  var wall = physics.wall;    //create scene graph  var scene = famousengine.createscene('body');    var camera = new camera(scene);  camera.setdepth(1000);    //physics engine test  function game(scenenode) {    this.simulation = new physicsengine();      this.node = scenenode.addchild();    this.node      .setsizemode('absolute', 'absolute', 'absolute')      .setabsolutesize(50, 200)      .setposition(0, 0, 0)      .setmountpoint(0.5, 1);      this.line = this.node.addchild();    this.line      .setabsolutesize(50, 10)      .setsizemode(1, 1, 1)      .setalign(0.0, 0.5); //need make function radomize    var mark = new domelement(this.line, {      properties: {        'background-color': '#ff0000'      }    });        var position = new position(this.node);    this.mybox = createbox.call(this, this.node, position);      console.log('this.mybox', this.mybox);      var element = new domelement(scenenode);    scenenode.adduievent('click');    scenenode.onreceive = function(event, payload) {      if (event === 'click') {        var itemposition = this.mybox.getposition();        // var bp = this.mybox.getposition();        console.log(itemposition.y - 100);      }    }.bind(this);      famousengine.requestupdateonnexttick(this);    console.log(this);  }    game.prototype.onupdate = function(time) {    this.simulation.update(time);      var itemposition = this.mybox.getposition();      // console.log(itemposition);    //console.log(itemposition.x, itemposition.y, itemposition.z);    this.node.setposition(itemposition.x, itemposition.y, itemposition.z);    famousengine.requestupdateonnexttick(this);  };    //add node - node static  //create box  function createbox(node, position) {    //attach dom element component staticnode    this.bluediv = new domelement(node, {      properties: {        'background-color': '#49afeb'      }    });      var mb = new box({      mass: 10,      size: [50, 200, 10],      position: new vec3(window.innerwidth / 2, 0, 0)    });      this.gravity = new gravity1d(mb, {      direction: gravity1d.down,      strength: 500    });      this.floor = new wall({      direction: wall.up,      friction: 0    });    this.floor.setposition(0, window.innerheight, 0);      this.collision = new collision([mb, this.floor]);    this.distance = new distance(mb, this.floor);      this.simulation.add([mb, this.gravity, this.collision]);    console.log("hey");      return mb;  }    famousengine.init();    var root = scene.addchild();  var game = new game(root);

            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;                  perspective: none;                  overflow: hidden;              }

<html>      <head>          <meta charset="utf-8">          <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="">          <meta name="viewport" content="width=device-width, initial-scale=1">          <script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>      </head>      <body>      </body>  </html>