为什么我的盒子不见了？
Why does my box disappear?
我正在尝试跟踪 'myBox,' 在点击时的位置。当我将事件附加到 myBox 时它起作用，但这不是我想要的。我希望能够单击 window 中的任意位置。我以为因为 Scene 有一个 .onReceive() 函数，所以我可以将点击事件附加到 Scene 本身，但是每当我这样做时，该框都不会出现。
'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 to make function to radomize this
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 - this node will be static
//create box
function createBox(node, position) {
//attach a DOM element component to the 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();
scene是引擎场景图的开始。使用它作为上下文而不是父节点。因此，在这种情况下，我们首先将它隔离在我们的 class 范围之外，并添加一个起始场景节点作为场景图的顶部。
//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 to make function to radomize this
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);
click事件在我们场景大小的节点上需要一个DOMElement，所以我们在根节点上加一个。
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);
这是示例片段
//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 to make function to radomize this
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 - this node will be static
//create box
function createBox(node, position) {
//attach a DOM element component to the 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>
我正在尝试跟踪 'myBox,' 在点击时的位置。当我将事件附加到 myBox 时它起作用，但这不是我想要的。我希望能够单击 window 中的任意位置。我以为因为 Scene 有一个 .onReceive() 函数，所以我可以将点击事件附加到 Scene 本身，但是每当我这样做时，该框都不会出现。
'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 to make function to radomize this
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 - this node will be static
//create box
function createBox(node, position) {
//attach a DOM element component to the 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();
scene是引擎场景图的开始。使用它作为上下文而不是父节点。因此，在这种情况下，我们首先将它隔离在我们的 class 范围之外，并添加一个起始场景节点作为场景图的顶部。
//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 to make function to radomize this
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);
click事件在我们场景大小的节点上需要一个DOMElement，所以我们在根节点上加一个。
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);
这是示例片段
//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 to make function to radomize this
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 - this node will be static
//create box
function createBox(node, position) {
//attach a DOM element component to the 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>