Mesh scale problem

Questions
#1

I provide a scene to show my customer’s products.
for example, customer A and customer B. And they provide product and a simple description for the product.

customerA provide:
product1 model with some description to the product1 model;
product2 model with some description to the product2 model;
and I show his products like this:
https://playground.babylonjs.com/#S3FFNK

customer B provide:
product3 model with some description to the product3 model;
product4 model with some description to the product4 model;
and I show her products like this:
https://playground.babylonjs.com/#S3FFNK#2

the yellow sphere aside the product is just a trigger button to show the product’s description. And my customer only provide the position of the sphere to place near the product. And they want to:

  1. keep the sphere’s diameter is a fixed pixel on the browser screen(for example 40PX), and do not affected by the distance between the camera and the product.
  2. the product zoom on the screen when the camera near to the product.

the problem is:
When mousewheel, the product and the sphere both zoom or reduce on the screen. And how to just keep the diameter of the sphere on the screen at 40 pixels when mousewheel?

How to keep some model the same size on the screen and some scaling when mousewheel with ArcRotateCame scene?
#2

Hi 99999,

If you genuinely want the sphere to be a piece of in-scene geometry at a constant screen-space size, you can scale it frame-by-frame based on how far it is in front of the camera. The Gizmos do something similar to this, though I’m not sure that logic is quite correct; that logic appears to be based on how far away the object is from the camera, whereas it probably should be based on how far in front. Nevertheless, probably the easiest way to achieve what you’re looking for is to simply make your sphere a Gizmo; see the Gizmo documentation for more details.

However, unless there’s a strong reason why your spheres need to be geometry, you might consider using GUI instead. Having auto-resizing geometry in your scene can be tricky and error-prone; things can get in the way of picking, or clip through each other, or receive light or cast shadows when you didn’t want them to… There are just a lot of edge cases that you don’t have to deal with if you use GUI. This Playground shows some examples of GUI elements with constant screen space size attached to geometry behind them. Might not be viable for your use case, but it could be worth considering.

1 Like
#3

Thanks! Your suggestion is very helpful！
When I use the sphere as Gizmo, it can’t adapt to position when mousewheel。
so I dynamic scale the sphere’s size.
And I edit one sphere( the bottom one) in the scene, and the code:
https://playground.babylonjs.com/#S3FFNK#3
and some of the code is from the forum or other demos and some code I don’t know why, maybe it is not the correct way, but I think it can meet the needs of my boss。

1 Like
#4

Just a random thought - you could use two cameras, one with the scalable meshes, that is attached to the canvas for user input, and the other fixed, that just renders stuff.
I guess the issue with this approach is that you can’t control the render order of the meshes (it will be fixed for the cameras). But if this works you don’t have to constantly scale the meshes. Thou it is , of course, a wonderful solution, and possibly the only viable one.

#5

I think it’s similar with the Gizmo。When mousewheel，the sphere is fixed， but the product is scaled， it looks like the distance is changed from the sphere to the product。

#6

image

It is what I want to achieve, and can I achive this without too complicated method in babylon.js？

#7

Would the default Babylon Gui Features not be ok for this ?

https://www.babylonjs-playground.com/#XCPP9Y#3194

https://doc.babylonjs.com/how_to/gui#tracking-positions

#8

image
image

Yes, I had tried to use the tracking gui method, but there is a problem：
I want to hide the corresponding circular button(marked red in the picture) when the emphasized part in the model( I think is the right arm in the picture) is turned behind the screen， but I do not know how to achieve。

#9

ohhhh I see, and it has been a recurring ask as I can see this week. Let s see how we could easily do it playing with scaling depending on the distance from the camera.

#10

Adding the other thread for reference : Keeping a sprite the same size independent of camera zoom

@EvilTwinsNiceBrother it looks like this feature would be a hit :slight_smile:

#11

Ok I guess you could use something like this :slight_smile:

https://playground.babylonjs.com/#P89ASS

This is based of our gizmo which can already be stable in size on screen. Let me know if that can work.

1 Like
#12

Yes, perfect, this is exactly what I want. Thanks very much!

1 Like
#13

this is also what I want :partying_face:

1 Like
#14

Aha. One thing still not satisfying:
I would need the added Gizmo to always “face” the camera.
That is happening if i use
the BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI and add an Element.
However there I do not get the Culling.
Does a Gizmo have the option to always “face the camera”?

#15

You can set the billboard mode of the underlying gizmo root mesh:

https://playground.babylonjs.com/#P89ASS#1

I needed to access the _rootMesh property, but as it is public I guess it’s ok (also, it is not marked hidden).

3 Likes
#16

amazing!

#17

Hello,
well i played now with most of the new discoveries, however i am having a bit of a problem with the position property. I guess I lack some understanding of the Gizmo layer position.
https://www.babylonjs-playground.com/#00KTGF
When you click on the object a sprite and a gizmo are added at the pointer position But the gizmo is quite off this position.
Any idea where I should look for the issue?

Thanks!

#18

I guess it is link to how the parenting works for positions : https://www.babylonjs-playground.com/#00KTGF#1

You also need to add a bit of offset from your object if you do not want collision while rotating

#19

Your problems go away if you set the scene to be right handed (which is the default handedness in a gltf file):

https://www.babylonjs-playground.com/#00KTGF#3

Doing this remove the -1 scale on the Z axis of the root node.

1 Like
#20

aha! interesting indeed.

so that would mean I should use something like:

if (currentPluginName === "gltf") {
    scene.useRightHandedSystem = true;
}