Box2d.js 与Processing.js

发布于 2024-11-13 17:53:12 字数 1238 浏览 4 评论 0原文

最近,我通过结合Processing.js 和Box2D.js 库来进行一些简洁的基于浏览器的模拟,进一步加深了我对Javascript 的了解。

根据我目前的想法,我试图允许用户单击并拖动形状,然后在释放鼠标后让它放下。到目前为止,我已经能够弄清楚如何使用 b2MouseJoint 对象来操纵具有 mouseX/mouseY 坐标的主体,但它并不能完全发挥作用。

单击形状时发生的所有事情都是它被固定并围绕单击时当前的 mouseX/mouseY 点旋转。

void mousePressed(){
     for(int i = 0; i < circles.size(); i++){   
        //Get body objects from ArrayList
        var obj = circles[i]; 

        // Retrieve shapes from body
        var innerShape = obj.GetShapeList();
        var rad = innerShape.m_radius;

        // Create mouseJoint and add attributes
        var mouseJoint = new b2MouseJointDef();
        mouseJoint.body1 = world.GetGroundBody();

        // Detect body
        if(dist(mouseX,mouseY,obj.m_position.x,obj.m_position.y) < rad){
           Vec2 p = new b2Vec2(mouseX,mouseY);

           mouseJoint.body2 = obj;

           mouseJoint.target = p;
           mouseJoint.maxForce = 10000.0f * obj.GetMass();
           mouseJoint.collideConnected = true;
           mouseJoint.dampingRatio = 0;
           mouseJoint.frequencyHz = 100;
           world.CreateJoint(mouseJoint);      
        }
   }    
}

所以基本上我的问题是,如何编写,以便在按住鼠标时主体/形状遵循鼠标的坐标,而不是仅仅将形状固定到位。

干杯

Recently I have been furthering my knowledge of Javascript, by combining the Processing.js and Box2D.js libraries to make some neat browser-based simulations.

With my current idea, I am trying to allow the user to click and drag a shape, and then let it drop once the mouse is released. So far I have been able to figure out how to use the b2MouseJoint object to manipulate a body with mouseX/mouseY coordinates, but it doesn't quite work to the full extent.

All that happens when a shape is clicked is it gets pinned and revolves around what ever mouseX/mouseY point was current at the time of the click.

void mousePressed(){
     for(int i = 0; i < circles.size(); i++){   
        //Get body objects from ArrayList
        var obj = circles[i]; 

        // Retrieve shapes from body
        var innerShape = obj.GetShapeList();
        var rad = innerShape.m_radius;

        // Create mouseJoint and add attributes
        var mouseJoint = new b2MouseJointDef();
        mouseJoint.body1 = world.GetGroundBody();

        // Detect body
        if(dist(mouseX,mouseY,obj.m_position.x,obj.m_position.y) < rad){
           Vec2 p = new b2Vec2(mouseX,mouseY);

           mouseJoint.body2 = obj;

           mouseJoint.target = p;
           mouseJoint.maxForce = 10000.0f * obj.GetMass();
           mouseJoint.collideConnected = true;
           mouseJoint.dampingRatio = 0;
           mouseJoint.frequencyHz = 100;
           world.CreateJoint(mouseJoint);      
        }
   }    
}

So basically my question is, how can this be written so the Body/Shape follows my mouse's coordinates while I have the mouse held down, instead of just pinning the shape in place.

Cheers

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

听风念你 2024-11-20 17:53:12

基本上,您所要做的就是添加现在使用的代码,将 mousePressed 中的坐标设置为 mouseDragged() 方法,因为这是当使用一个或多个按钮移动鼠标时调用的事件方法沮丧:

void mouseDragged()
{
  // update obj with mouseX and mouseY in this method
}

您可能还想通过在 mousePressed() 期间设置“初始单击”标记变量、在 mouseDragged() 期间更新一组“偏移”变量并将偏移量提交到中的标记来进行更多管理mouseReleased(),以便您可以执行诸如弹回原始位置等操作。

Basically all you have to do is add the code you're using now to set the coordinate in mousePressed to a mouseDragged() method, as well, as this is the event method that gets called while the mouse is moved with one or more buttons depressed:

void mouseDragged()
{
  // update obj with mouseX and mouseY in this method
}

You may also want to do a bit more administration by setting up "initial click" mark variables during mousePressed(), updating a set of "offset" variables during mouseDragged() and committing the offsets to the marks in mouseReleased(), so that you can do things like snapping back to the original position, etc.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文