Jump to content

Babylon.js + Cannon.js - Check only collision


Recommended Posts


can someone help me? I'm developing an application with Babylon.js and Cannon.js and I need to check only the collision between two objects (imported from blend obj) without generating any movement of them.
The two objects should also be magnetic. This is the code that I'm using in this moment:


var selectedObject = selectedMesh.parent;
for (i = 0; i < arrayParentMeshes.length; i++) {
var checkElement = arrayParentMeshes[i];selectedObject.physicsImpostor.registerOnPhysicsCollide(checkElement.physicsImpostor, function (main, collided) {console.log('COLLIDED');});  

Thanks in advance

Link to comment
Share on other sites

Hi @syed samoon,
I need the objects not to overlap. I tried to save the last useful position of the object I'm moving and in case of overlapping, I reposition the object but it does not work.
With Cannon.js I can intercept the collision but the objects move in space. This is the example: http://test1.studioleonardo.com:81

Thanks in advance,

Link to comment
Share on other sites


Hi guys.  That is a playground that might be helpful.  WASD move left cylinder, SHIFTED-WASD move right cylinder.

Line 158 distance/speed is set fast.  Hold D key, or shifted-D key... to "slam" two cylinders together.  Not much overlap.

Overlap is minimum BECAUSE we have mesh.ellipsoid (shown in wireframe) set to same size as mesh.getBoundingInfo().boundingBox. [assorted measurements].  See wingnut-added setEllipsoidPerBoundingBox() function.  I also added function showEllipsoid().  You can use them to see/test the .ellipsoid placement and sizes on your imported mesh, if you wish.  Careful... I am not a pro JS coder... could have mistakes.

This is ALL done... without a physics engine.  It uses ONLY the BJS built-in collision system... including mesh.checkCollisions, .moveWithCollisions, .ellipsoid, .ellipsoidOffset, cam.applyGravity and .needMoveForGravity.  None of those things... are for physics engines.  It is easy to confuse the two collision systems.

I suggest you NOT yet use physics engines.  Stay with BJS built-in collision system... as described/used above.  Experiment with my two add-on functions so you can always "see" the size of the mesh.ellipsoids.  Make sure the size of the .ellipsoid matches the boundingBox measurements.

Perhaps, later, the "precision" gotten by using a boundingBox or boundingSphere as the collider shape... might be disappointing.  You might want ONLY player's extended hand to collide with something, but not the player's knees, which are much narrower.  That will be difficult.  Then, yes, perhaps a physicsImpostor, which likely needs to be a Cannon-only "MeshImpostor" (exactly matches complex mesh shapes).

But ohh, such impostors CAN be slow, and even worse, Cannon meshImpostors ONLY collide with sphereImpostors, as far as I know.

So... if you can get your project collision system... working WITHOUT using a physics engine... I think that would be to your advantage.

Just for fun, in lines 134-144 is an intersection ActionManager for cylinder/barrel2.  It causes the position readouts at canvas bottom... to change colors, proving it's working a-ok.  :)

Anyway, I hope I have been helpful.  This "barrels" playground is a place to do some experimenting with the built-into-BJS collision system, at least.  Make more edits and saves, grab a zip copy for playing at-home, paste URL's to interesting SAVES... here, and we'll talk about them, if you wish.  Party on!

Link to comment
Share on other sites

Hey, nice editor!  Cooool.

I saw no mesh displayed in test4.  But I created some mesh... big and small, and I see the overlap.  Let's see if we can fig WHY.

Can you put my two functions... into your editor, temporarily?  I want to SEE the bounding boxes (mesh.showBoundingBox = true;)... and the wireframe ellipsoidMesh that is installed with those add-on functions.

I think the .ellipsoid sizes or placements is incorrect, for each editor model.  Not sure.

Or, some of the models don't have .checkCollisions = true;  ?

Something is wrong... but it is difficult to determine... without seeing the wireframe ellipsoids. 

If you DO turn them ON, remember that mesh.ellipsoidMesh (the wireframe "thing" that gets added in showEllipsoid)... needs to be dragged as well.  In other words, avoid setting .ellipsoidMesh.parent = mesh. 

Better to do renderLoop... for each mesh... mesh.ellipsoidMesh.position = mesh.position.add(mesh.ellipsoidOffset).  Continuously move the wireframe ellipsoidMesh... to match mesh.position, but WITHOUT parenting.  Parenting might hide problems.  Not sure.

Anyway, if we could SEE the bounding boxes and the positions/sizes of the .ellipsoids on each created mesh, we could perhaps find the problem, quicker, easier.


For physics engine... setting .restitution = 0 on all impostors... SHOULD make them quit moving after collision.  But... IF the impostors overlap at time of creation... could be trouble.  Flying-away objects... even with 0 restitution.  Oh no.

Perhaps, when physics active, you cannot create overlapping impostors... or else they will reject each other.  I recently discovered some 'collisionGroups' settings in Oimo physics engine.  CannonJS may have them as well, but if you disable collisions between mesh, why use physics engine at all.  I think you are trying to do "floor-space management" using collisions, right?  *nod*.  No overlapping allowed... during drag-placement, right?  :)

A renderLoop that sets each...


...might halt ALL motion.  But those impact-at-creation-time issues we see in your editor... is because restitution has value, or because mesh are created atop one another, and physics engine is (violently) disallowing that overlap.  We have ways of killing physics motion.  :)  But possibly... using "intersectsMesh" and boundingBox measurements... is a BETTER way to do floor-plan management... than using collisions.  Instead... you would build some "rules of dragging"... where... if (draggedMesh.intersectsMesh(anyOther)) then mesh.position = lastNonIntersectingPosition.  (nullify the attempted drag-to-overlap).

Don't forget... "lines 134-144 is an intersection ActionManager for cylinder/barrel2". 

I dunno.  Fun thinking, though.  I think I am out-of ideas, though.  Physics engine for scene layout... phew... difficult to get impostors under control.  They have a mind of their own.  :)


Link to comment
Share on other sites

I want to show you one other interesting playground.


Camera keys are WASD.

Use arrow keys... to translate the gray ibox above the green mesh.

A physics joint is connected between the future-invisible ibox... and the green mesh.

We have found this to be useful... in keeping moved impostors somewhat under control.

Try using the arrows... bumping some mesh.  It feels pretty good.  I'm not sure if joint-attaching an invisible mesh above YOUR created mesh... would be useful for positioning your furniture, but maybe.

I thought you should see it.  Party on.

Oh... version #31 has a CannonJS speed-it-up thing at line 141:  scene.getPhysicsEngine().setTimeStep(.05);  Default speed is approx .01666, so, I tripled that.  :) 

Fast physics!  Yay!  vrroooooooom!  :)

Link to comment
Share on other sites

Hi @Wingnut ,
I've updated test4. Now you can see BoundingBox. All meshes have CheckCollision property set as true.
Despite this collision works well between object with same size. Instead an object with small boundingBox overlaps an object with biggest boundingBox.
For example you can try selecting a (Wally -> Wally 710) and dragging it on a (Sitty -> Divano).

Thanks for support

Link to comment
Share on other sites

Right.  But notice that wally710 cannot overlap the CENTER of Divano.  The collision is happening, but Divano's ellipsoid is not properly sized.  It is too small.

But, in general, I think you will need to say goodbye to BJS collision system... because... I think you need a boundingbox-based collision system, and not these bad spherical ellipsoids.

The BJS ellipsoid collision system was designed for camera-to-mesh collisions, and not for mesh-to-mesh collisions.


Phew, there's another, with drag'n'drop turned-on.  (mousewheel back a bit)  Who makes these goofy playgrounds?  :)



(a huge test scene).  This time, I started with a drag'n'drop demo from our playground demos.

Then, I added onCollideObservable on every mesh - lines 60-74.  They never trigger during onPointerMove (during drag-intersecting).  hmm.

Then I added intersection ActionManagers on every mesh - lines 76-103.   They ALSO never trigger during onPointerMove (during drag-intersecting).  hmm 2.0.

Only one method left to check.  IntersectsMesh.  See onPointerMove handler... lines 149-189. 

More precisely, lines 171-181.  Watch console.  We are getting intersectMesh triggering during the drag-collisions.  AND... the dragging is nullified when a collision happens.

BUT... it gets stuck in collide state.  You can see various Wingnut-code in there, remarked-out... where I failed to re-position collided dragged mesh... back to PREVIOUS position before/after the collide happened.

I think we need a better JS programmer than me.  :)  But... somewhere around line 177 - currentMesh.position = oldCurrent... get that working... and mesh won't get stuck together.

Also, FAST drag-to-intersect... might still cause some overlap.  More tests ahead.  Are you having any fun?  I hope so.  We sure have visited almost every kind of colliding, haven't we?

I sort of wish those observables (lines 60-74) would have worked.  They are the most modern intersectMesh testing methods, I think.  But nope, apparently those observers are in-active during a DOM onPointerMove event-stream.  hrmf.  *scratch scratch*

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...