Famo.us - 彼此彈跳的球

Question

我是新來的'物理引擎世界'。我決定使用Famo.us進行試驗並試圖學習如何使用物理引擎。

當你碰撞對方時，你如何使球彈跳？我設法添加球並創造了牆壁。碰到牆壁時球會反彈，但碰到對方時不會碰到，他們只是穿過。我一直在嘗試任何我能找到的東西，但不幸的是，缺乏關於famo.us文檔的信息對我來說有點障礙（因爲我仍在學習這些概念）。

我在實踐中不太明白的另一個概念是如何給球添加重力。

這就是我想要實現：http://mrdoob.com/projects/chromeexperiments/ball-pool/

這裏是我的代碼至今：

define(function(require, exports, module) { 
    var Engine   = require('famous/core/Engine'); 
    var Surface   = require('famous/core/Surface'); 
    var ContainerSurface   = require('famous/surfaces/ContainerSurface'); 
    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 Vector   = require('famous/math/Vector'); 

    var Collision  = require('famous/physics/constraints/Collision'); 


    var context = Engine.createContext(); 

    var contextSize; 

    var mainSurface = new ContainerSurface ({ 
     size: [undefined,undefined], 
     properties: { 
      backgroundColor: '#dddddd' 
     } 
    }); 

    mainSurface.on("click",function(){ 
     addNewBall(1); 
     setWalls(); 
    }); 


    var handler = new EventHandler(); 

    var physicsEngine = new PhysicsEngine(); 

    var balls = []; 
    var collision = new Collision(); 
    function addNewBall(number){ 
     if(number == undefined) var number = 1; 
     for(var i=0; i<number; i++){ 
      var index = balls.length; 
      balls[index] = new Surface ({ 
       size: [50,50], 
       properties: { 
       backgroundColor: 'red', 
       borderRadius: '50px' 
       } 
      }) 

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

      balls[index].particle = new Circle({radius:25}); 

      //Attempting to add collision 
      physicsEngine.attach(collision, [balls[index]]); 

      balls[index].particle.applyForce(new Vector(Math.random(), 1, 0)); 

      physicsEngine.addBody(balls[index].particle); 


      mainSurface.add(balls[index].state).add(balls[index]); 
     } 
    } 

    context.add(mainSurface); 
    addNewBall(1); 

    //Function to loop through all balls and set the walls 
    function setWalls() { 
     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}); 

     for(var i=0; i < balls.length; i++){ 
      physicsEngine.attach(leftWall, [balls[i].particle]); 
      physicsEngine.attach(rightWall, [balls[i].particle]); 
      physicsEngine.attach(topWall, [balls[i].particle]); 
      physicsEngine.attach(bottomWall,[balls[i].particle]); 
     } 
    } 


    Engine.nextTick(setWalls); 
    Engine.on('resize',setWalls); 

    Engine.on('prerender', function(){ 
     for(var i=0; i < balls.length; i++){ 
      balls[i].state.setTransform(balls[i].particle.getTransform()) 
     } 
    }); 
}); 

Answer 1

問題是這樣的一行：

physicsEngine.attach(collision, [balls[index]]); 

的.attach方法需要物理代理（Collision），目標數組（balls）和[可選]源。由於碰撞是兩個球之間的，您將需要定義碰撞的來源。同樣，您可以連接兩個粒子之間的Spring或Repulsion。 Drag，Gravity等不需要這個。

定義所有對粒子之間的碰撞，你會怎麼做：

for (var i = 0; i < balls.length; i++) { 
    physicsEngine.attach(collision, balls, balls[i]); 
} 

相同（思想略少最優），可以使用雙for循環要明確

for (var i = 0; i < balls.length; i++) { 
    for (var j = 0; j < balls.length; j++) { 
     if (i !== j) physicsEngine.attach(collision, balls[j], balls[i]); 
    } 
} 

Answer 2

團隊doob？做着名的:)

檢查你的演示看來你現在工作，並且DMV也指出了具體細節。但正如另一種方法......我把演示一起（與著名球員幫助在黑客馬拉松）的球彈跳交相輝映的，有圍牆等

http://famfiziks.meteor.com/battle

源是在這裏： https://github.com/dcsan/fambot