Increase area click

I increased the clickable area of ​​the mesh by creating an invisible mesh (
for convenience, I set the property visibility to 0.5), but if you move the camera away from the sphere at a sufficiently large distance, then it will not be possible to click on the hitbox, why does this happen?

Huh? You are using an arcRotateCamera, there’s no distance from camera. You should try work it from the camera.radius. Or change camera.

Just very quick and dirty (because I’m shit with maths :sweat_smile: :rofl:), something around these parts:

no matter what to use radius or position, the main meaning has not changed, you still can’t click(

I can click. What do you mean just exactly?

Edit: May be change cam max Z to something reasonable. Currently you have:

camera.maxZ = 1000000000

and your sphere object is 0.5 bjs units. So you are basically looking at an ant from the moon???!!

the sphere on which I click increases, we see it, but if we move the camera too far, then we can no longer click on it, although it is visible

That’s exactly what I’m saying. You need to limit the upper camera radius to something reasonable. Like 100000 is already for a very large scene.

I really need larger sizes. I need sphereHitbox so that I can select a small object even if it is no longer visible

Hello @Stanikkje

Ok I think I understood your issue.
I had to log the camera distance, and go up to a distance of > 830 000 and then, indeed, it’s no longer clickable. And I’m not surprised, since considering the camera limits (z min and z far) even the OpenGL depth won’t go that far.


Now, I understand that is can be necessary (for example, a 3D application with planets very far away, and regardless of if there are still visible on render, you want them clickable, or whatever)


I see two solutions :

  • Either you go 2D (by projecting the 3D pos to 2D on the screen, and then add a clickable asset in 2D)
  • Either you stay 3D but limit the distance of the sphereHitBox mesh.
    Here is an example where I do this :
sphereHitBox.position = camera.position.add(sphere.position.subtract(camera.position).normalize().scale(1000.0));

The line above, puts the sphere hitbox in the direction of the sphere, at a fixed distance (1000 in this case). That way, regardless of the distance of the sphere, the sphereHitBox stays pickable.
:arrow_right: Playground


NB : Still, keep in mind that you should find a way to scale down everything. When reaching some numbers in millions, your javascript floats will reach some floating point precision issue, and everything will be flickery like hell. Theorically, there is no application where you absolutely need at the same time very little and very big distance on the same 3D scene. You should always find a “scaling down trick” to avoid very high numbers :wink:

++
Tricotou

2 Likes

WoW. Didn’t realize someone already got that far :stuck_out_tongue_winking_eye: I’m no good at building the universe :infinity: :rocket: I already have problems understanding :earth_africa: :earth_americas: :earth_asia: :joy: :rofl:

Thank you for your answer, can you please show me how to implement the first option? I don’t really understand what you mean

There are several ways, but for example if you want to use the Babylon GUI, you can use the linkWithMesh method of a control. It will automatically compute the 2D pos from 3D position of a mesh, and move the control at the right place on the screen. Then put whatever you want in place of the control (a button, an image, whatever…)

++ :slight_smile:
Tricotou

1 Like