Question

我有一个简单的物理模拟器和一些弹跳球。我正在尝试添加一个“墙”的边界框，但有问题。

任何例子都会很棒:) 与此同时

查看酷炫的ascii art docs here

 *    (wall)
 *      |
 *      | (normal)     (origin)
 *      | --->            *
 *      |
 *      |    (distance)
 *      ...................
 *            (100px)
 *
 *      e.g., Wall({normal : [1,0,0], distance : 100})

我的猜测是添加了一堵墙

@walls.push = new Wall({normal : [1,0,0], distance : 5})

应该是原点左侧仅5个像素的墙。

我的问题是： - 我们如何设置物理引擎的起源？我没有看到原始属性here in the PhysicsEngine 我应该为它添加一个修饰符吗？

是0~1范围内的发动机坐标？即0.5？或屏幕像素？
因为墙只需要一个距离（实际上像半径一样），方向由法线设定，它们是否总是面向向内到原点？即你不能让墙面向外？
默认墙（）看源，这应该创建一个视口大小的边界框，但似乎不起作用......
Here's a public repo到目前为止的代码/演示
和here's a running demo没有墙:(

Answer 1

物理引擎默认以原点为中心，并且必须使用上下文大小相对于中心定义墙。我没有玩过改变PhysicsEngine本身的起源，但它只是相对于表面上的修饰符而言是相对的。

这是一个工作墙示例..只需点击球即可获得一些初始速度！

希望你能从这个例子中得到一些帮助！

祝你好运！

var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var EventHandler    = require('famous/core/EventHandler');
var View            = require('famous/core/View');
var Transform       = require('famous/core/Transform');

var StateModifier   = require('famous/modifiers/StateModifier');

var PhysicsEngine   = require('famous/physics/PhysicsEngine');
var Body            = require('famous/physics/bodies/Body');
var Circle          = require('famous/physics/bodies/Circle');
var Wall            = require('famous/physics/constraints/Wall');

var context = Engine.createContext();

var handler = new EventHandler();

var physicsEngine = new PhysicsEngine();

var ball = new Surface ({
  size: [200,200],
  properties: {
    backgroundColor: 'red',
    borderRadius: '100px'
  }
})

ball.state = new StateModifier({origin:[0.5,0.5]});

ball.particle = new Circle({radius:100});

physicsEngine.addBody(ball.particle);

ball.on("click",function(){
  ball.particle.setVelocity([1,1,0]);
});

context.add(ball.state).add(ball)

var leftWall    = new Wall({normal : [1,0,0],  distance : window.innerWidth/2.0, restitution : 0.5});
var rightWall   = new Wall({normal : [-1,0,0], distance : window.innerWidth/2.0, restitution : 0.5});
var topWall     = new Wall({normal : [0,1,0],  distance : window.innerHeight/2.0, restitution : 0.5});
var bottomWall  = new Wall({normal : [0,-1,0], distance : window.innerHeight/2.0, restitution : 0.5});

physicsEngine.attach( leftWall,  [ball.particle]);
physicsEngine.attach( rightWall, [ball.particle]);
physicsEngine.attach( topWall,   [ball.particle]);
physicsEngine.attach( bottomWall,[ball.particle]);

Engine.on('prerender', function(){
  ball.state.setTransform(ball.particle.getTransform())
});

Answer 2

我在上面找到了johntraver的答案，它回答了我的所有问题：实现物理引擎。一个小小的打嗝是它不适合我（0.2.0）。这是因为contextSize被设置为[0,0]，因此所有墙都位于屏幕的中心。这导致我将墙设置转换为函数并使用Engine.nextTick（）调用它。这样，当墙壁就位时，背景具有尺寸。然后只是为了踢，我在Engine resize上添加了对同一个函数的另一个调用。这也要求在重新创建之前拆除墙壁，以避免产生无数个墙壁，其中的墙壁只会变小。

以下是我对上述答案的调整：

/* globals define */
define(function(require, exports, module) {
    'use strict';
    // import dependencies
var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var EventHandler    = require('famous/core/EventHandler');
var View            = require('famous/core/View');
var Transform       = require('famous/core/Transform');

var StateModifier   = require('famous/modifiers/StateModifier');

var PhysicsEngine   = require('famous/physics/PhysicsEngine');
var Body            = require('famous/physics/bodies/Body');
var Circle          = require('famous/physics/bodies/Circle');
var Wall            = require('famous/physics/constraints/Wall');


    function wallBounce() {
        var context = Engine.createContext();

        var contextSize;// = context.getSize();

        var handler = new EventHandler();

        var physicsEngine = new PhysicsEngine();

        var ball = new Surface ({
          size: [200,200],
          properties: {
            backgroundColor: 'red',
            borderRadius: '100px'
          }
        })

        ball.state = new StateModifier({origin:[0.5,0.5]});

        ball.particle = new Circle({radius:100});

        physicsEngine.addBody(ball.particle);

        ball.on("click",function(){
          ball.particle.setVelocity([.1,.13,0]);
        });

        context.add(ball.state).add(ball);
        function setWalls() {
            //console.log(contextSize[0]);
            contextSize = context.getSize();
            var leftWall    = new Wall({normal : [1,0,0],  distance : contextSize[0]/2.0, restitution : .5});
            var rightWall   = new Wall({normal : [-1,0,0], distance : contextSize[0]/2.0, restitution : .5});
            var topWall     = new Wall({normal : [0,1,0],  distance : contextSize[1]/2.0, restitution : .5});
            var bottomWall  = new Wall({normal : [0,-1,0], distance : contextSize[1]/2.0, restitution : .5});

            physicsEngine.detachAll();
            physicsEngine.attach( leftWall,  [ball.particle]);
            physicsEngine.attach( rightWall, [ball.particle]);
            physicsEngine.attach( topWall,   [ball.particle]);
            physicsEngine.attach( bottomWall,[ball.particle]);
        };
        Engine.nextTick(setWalls);
        Engine.on('resize',setWalls);

        Engine.on('prerender', function(){
          ball.state.setTransform(ball.particle.getTransform())
        });
    };

    new wallBounce();

});

如何在famo.us物理模拟中添加墙？

2 个答案: