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:
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.
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?
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.
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。
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.
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。
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。
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.
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”?
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?
