Change position/size of a mesh in between render loops

Hello. I am trying to find the closest mesh to a clicked point on another mesh. What I am currently doing is moving a hidden sphere to a clicked point, and iteratively increasing its size while running .intersectsMesh() with all other meshes.

Is there any other clever way to do this? The problem with this solution is that position or a size does not really update until the next rendered frame. Is there a way to force flush changes?

Good morning and welcome to the Babylon community!

Let me address this by asking where you are putting your calculations. Use can always update the rendering pipeline or try calling scene.render(); every time you make a calculation update. I would recommend putting each frame of your calculation in here scene.onBeforeRenderObservable.add(() => {

As for finding the position. There are faster ways I think based on certain algorithms you use. If I remember from my college days, you would first want to check the point against the general bounding box/spheres of each mesh. If it did intersect then you could use a more advanced method to see where exactly it was. The way you show it though is a nice visualization. :slight_smile:

Finally, I’d recommend posting your playground here as well for reference and me let know if you have any follow up questions. :slight_smile:


Thank you for your answer!

Calling scene.render(); in every iteration helped with my problem! I calculate everything in onPointerDown event, is that OK? I will have to read about Observables, thanks :slight_smile:

Sooo, I assumed that I will not be able to implement anything better than .intersectsMesh(). I will start from a single point before going to a sphere.
Do you believe that there’s a better way to find the closest mesh (my scene is like a grid composed of a long curved sticks)? I was thinking about calculating a distance between a point and a mesh, but only found solutions to point-facets center or point-bounding box center.

Will do! My scene is in react component, I will have to learn how playground code is structered :wink:

1 Like

Another implementation if you want to visualize your algorithm every frame you set a flag to true in the onPointerDown and so the calculation in onBeforeRenderObservable. Both solutiosn will work! :slight_smile:

As far as your other algorithm. You might be able to find a shortcut given what kind of meshes you are using. 3D collision detection - Game development | MDN here’s some of the math behind more of a bounding box approach.

1 Like

Oh, I don’t need to visualize my algorithm. The sphere is hidden. The scene.render(); is required only to update the position and size of my hidden sphere.

My flow looks like this:

vector = pickResult.pickedPoint;
this.sphere.position = vector;
let hitList = [];
for (let key in this.gScene.meshes) {
  if (this.gScene.meshes[key].checkCollisions && this.gScene.meshes[key] != this.sphere) {
    if (this.sphere.intersectsMesh(this.gScene.meshes[key], true)) {

Without this.scene.render(); the this.sphere.intersectsMesh() worked on old position of the sphere. So I am looking for the best solution without the need of visualization :slight_smile:

That’s the great read, comparing vertices of bounding boxes might be what I need, thank you!

1 Like

There is a better approach! Just use this.sphere.computeWorldMatrix() or this.sphere.computeWorldMatrix(true). It will udpate matrix that is used for intersection computations. This will avoid overhead with full rendering process. Also you might be interersted in updating meshes in your second scene. Best luck!


Oh, thank you! :slight_smile: