Two.js: How to use two.js with some physics library

Created on 22 Aug 2016  Â·  9Comments  Â·  Source: jonobr1/two.js

Right now I only know get some property values then assign them to two object. Is there any way around like integrating two render to physics engine or the other way around?

I found this on PhysicsJS. Not really understand how this works.

Build the renderer upon a canvas library, such as: KineticJS, TWO.js, Pixi.js, Paper.js, or Easel.js

enhancement question

Most helpful comment

aaaaaand we have a PhysicsJS renderer for Two.js: https://gist.github.com/larrybotha/6af6847199719c41e90452ff78982d85

Demo here:
http://codepen.io/larrybotha/full/JbJxEX/

The demo is using Two.js's dev branch, so updates to dev may break the demo. The demo doesn't work with v0.6.

All 9 comments

I haven't messed around with PhysicsJS, but I can put together a demo for you. In the meantime, there is a demo of how to use Two.js with another physics library here: Example • Source Code

Really appreciate that.

It looks like PhysicsJS requires a custom renderer in order for Two.js to be compatible, see Custom Renderers. If I were to make one I would follow the paradigms already written like this Pixi.js one.

I unfortunately don't have the time to do it right this moment, but I'll definitely throw it on my roadmap. It would be really awesome to leverage collisions with Two.js rendered objects.

We're likely going to start using Two.js for a project soon, but also need some collision detection and gravity-based functionality, so I was looking at PhysicsJS, too.

I came across this Github issue thread and demo:
https://github.com/wellcaffeinated/PhysicsJS/issues/86
http://code.exyks.org/physicsjs/index.html

I've refactored that demo to adhere to PhysicsJS v0.7:
http://codepen.io/larrybotha/pen/LRbJzY

There's still work to be done, but it may assist some folks in putting together a renderer for Two.js. If we do end up using Two.js, I'll likely be building a renderer myself.

NOTE to Future people: If the current date is beyond October 2016, and I haven't said anything here, I likely didn't build the PhysicsJS renderer. [at]mention me so I can confirm your suspicions, and put an end to your unlimited wanting. Adieu!

aaaaaand we have a PhysicsJS renderer for Two.js: https://gist.github.com/larrybotha/6af6847199719c41e90452ff78982d85

Demo here:
http://codepen.io/larrybotha/full/JbJxEX/

The demo is using Two.js's dev branch, so updates to dev may break the demo. The demo doesn't work with v0.6.

Demo works great on my phone! Looking forward to checking out the code.
Nice work!
On Fri, Nov 25, 2016 at 5:52 AM Larry Botha notifications@github.com
wrote:

aaaaaand we have a PhysicsJS renderer for Two.js:
https://gist.github.com/larrybotha/6af6847199719c41e90452ff78982d85

Demo here:
http://codepen.io/larrybotha/full/JbJxEX/

The demo is using Two.js's dev branch, so updates to dev may break the
demo. The demo doesn't work with v0.6.

—
You are receiving this because you were assigned.

Reply to this email directly, view it on GitHub
https://github.com/jonobr1/two.js/issues/190#issuecomment-262948990, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AANbgeSLCE6qfSi9Jdcvu3Yar1p97SzPks5rBtXjgaJpZM4JpvEz
.

>

http://jonobr1.com/

@larrybotha Any chance that Two.Text could work with PhysicsJS?

@andystevensname I'm not sure - but I'm sure it could be pulled off with a custom Physics body in PhysicsJS.

With PhysicsJS you're basically working with one of their body types:
[
CircleBody,
CompoundBody,
ConvexPolygonBody,
PointBody,
RectangleBody,
]

Your best bet there would be to convert your text to paths, and then use ConvexPolygonBody, but that'll be insufficient as soon as you get to letters like 'C' or 'U'.

You can extend PhysicsJS by writing your own body implementation, but that's a whole new story O.o

Right now it's not a story that comes with a happy ending :/

@andystevensname could you possibly get the bounding rectangle for the textbox and use a RectangleBody in PhysicsJS?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mariomeraz picture mariomeraz  Â·  6Comments

EdeMeijer picture EdeMeijer  Â·  7Comments

PranjalVyas1507 picture PranjalVyas1507  Â·  4Comments

davidwebca picture davidwebca  Â·  5Comments

oliver-ni picture oliver-ni  Â·  7Comments