Switching routes makes problem with scene pointers

Questions
1

Hello everyone,

I am working on project where when I doubleclick on mesh it creates sphere on it, like this:

the screen is taken after dblclick and I didn’t move the mouse cursor
image

When I switch routes I remove eventlistener and destroy babylon engine by:

document.removeEventListener("dblclick", this.handleMouseEvent, false);
this.engineService.scene.dispose();

When I come back to babylon engine again and I want to make measurement (so I create again new scene and new event listener)
the measurements are being taken like this:
image
I didn’t moved mouse cursor here too
compared to first picture it’s like a little off the top of the cursor and it shouldn’t be like this. I wanted center of sphere when being created to be on the top of cursor.

I am not sure if it’s javascript or babylon problem. Do you have some idea how to fix this?

*Edit
Actually it’s happening even when I don’t remove scene and eventlistener. Just switching routes and coming back to babylon engine making taking measurements acts oddly.

2

Could you share a repro on the playground, there could be way to many issues to be able to figure without a repro.

3

But I would need angular components and routing module… I don’t know if it’s possible.

4

Could you not repro without it on a simple mesh ? just to narrow the issue.

It is impossible for us to enter deep in big projects or we would take a longggg time on each answers :frowning:

1 Like
5

I’ll try to do it tomorrow!

2 Likes
6

I made this playground where you can make spheres by dblclicking on the mesh:
https://playground.babylonjs.com/#IP37UT#4

I’m sure that I implemented eventhandler in a wrong way, but I wanted to show you this.

Idk how should I make route switching in playground, maybe I’ll use angular stackblitz with babylon implemented in it? I’ll try to make it tomorrow

Edit
Also it works on playground with glb file and buttons to event listeners, ehh. Idk why I have this small offset.
https://playground.babylonjs.com/#IP37UT#7

What’s interesting when I take the measurement on normal mesh (on world axis) there’s no offset and measurements are being taken where it should be

7

I’ve made this stackblitz example and unfortunately (for me :slight_smile: ) it works here but does not in my application.

Also in stackblitz there’s always the same number of event listeners while in my application they are constantly growing

I guess I need to find the solution on my own, because there’s no way I can reproduce this problem. I’ll share the answer if I find it.

8

maybe the canvas is removed from the DOM by the router at some point (and then re added by the router so you can’t see it has changed but you loose the context) ?

9

Actually my problem has changed. Now what’s happening is when in my application I click on button “add event listener” and I double click on mesh it has offset in that moment. I don’t even need to switch routes. Also I noticed with every doubleclick on mesh it adds a lot of listeners.

Every step is doubleclick on mesh

image
image1912×261 5.7 KB

10

https://playground.babylonjs.com/#IP37UT#7

i don’t see any offset, for me the double-click add the sphere at the correct position…

11

Ye I know. It is working in every playground / stackblitz I make but it doesn’t in my application…

12

Is your canvas 100% width and height, do you see a scrollbar on the right or in the bottom of your page ?

I said that because scene.pointerX is in screen coordinates. Scene - Babylon.js Documentation

13

Ye, 100% width and height. There’s no scrollbar.

Also I noticed that offset depends on angle and position between observer and model (mesh)

14

You need to reproduce the bug on the playground :slight_smile:

…or at least provide a link to your page (but a lot of people here won’t help if it’s not on the playground)

Also try to use the Action manager instead of handling the events by yourself

1 Like
15

Alright so if anybody will have a problem with this. This is the solution:

Firstly I got to change the way my red spheres where being taken. I changed it to use ray. There was so problems using scene.pick(scene.pointerX, scene.pointerY);

Secondly, there were some problems with CSS (wasn’t 100% width and height)

here’s the playground:

https://playground.babylonjs.com/#IP37UT#8