When i make scroll in my ui then the model aslo gets zoom in or out ib dont want that how can i stop that from happening
You can detect in and out pointer when entering the scrollviewer.
onPointerEnterObservable, detach the camera(s).
onPointerOutObservable, attach them again. This will avoid camera movement outside the scrollviewer while hovering the scrollviewer.
Edit: I also detected something weird with your first level menu naming. You are using the name of ‘canvas’. But in BJS, the canvas is the scene (not a part of the UI element). This can create confusion and even issues. I can rather advise you would change this name of ‘canvas’ for your first level GUI menu.
Thanks of the help and i will change the name of canvas also.
Appreciated. Thanks 
i need one more help i want to move the model to the right so that it look in the center but i am not ableto do it can u plz help
Yes. There is just one restriction to this solution. You cannot use parallax occlusion with it. So far, it looks like you do not use it in your scene, but if you do, it will create a visual bug on the model. I’ll send you the PG in a few minutes…
Edit: @Ashish_Abhiwan . Ok, so following the above here is your updated PG (line 246 and 337).
The function is called ‘targetScreenOffset’ and needs to be applied to a camera (the active camera).
The input is a Vector3 (x,y,z) coordinates FROM the target.
It works along with ‘camera.setTarget’ or ‘camera.target’ and can be used with the arcRotateCamera or the freeCamera.
On button click or user interaction, call camera.targetScreenOffset and set your offset FROM the target.
On button click (end of interaction), call the same function and reset all values to zero to zero in on your target.
Edit 2: May be you noticed that I have added a second camera in your PG and you may ask yourself why I did this. Well, at first, I did it to debug the autoRotation function, to make sure the camera settings was not interfering with the autoRotation speed.
Now, it’s actually good practice to have 2 cameras (or 2 scenes) for your main scene and for the BJS GUI. Two reasons for this:
- Performance: The rendering is always done from the active camera. Having just one camera (or one scene) to render both your main scene and the advancedTexture can have an impact on performance
- The order of display: By default, post processing and the BJS 3D GUI will both render ON TOP OF your 2D GUI. This can be problematic since you might not want to have post process on your UI or show 3D GUI elements on top of it.
Conclusion for the multiple cameras approach:
To avoid the above, it is good practice to create a clone of the scene camera and use this clone to render your advancedDynamicTexture. In order to make sure the cloned camera is assigned ONLY for your GUI, we use a technique called ‘layerMask’. The ‘layerMask’ overides the default rendering order.
Here I am instructing to display the advancedDynamicTexture ALWAYS on top of all other layers (including post-processing).
It is done very easily. You just need to follow 5 simple steps:
- create a clone of your main scene camera, like this:
guicamera = camera.clone(“guicamera”);
- on your GUI camera (the cloned camera), add this line of code instructing to display this camera on top of all scene layers:
guicamera.layerMask = 0x10000000;
- attach both cameras to the scene, like this:
camera.attachControl(canvas, true); guicamera.attachControl(canvas, true);
- set BOTH cameras as ‘activeCameras’ AT ONCE with a single line of code, like this:
scene.activeCameras = [camera, guicamera];
- Finally, on your advancedDynamicTexture, assign the same layerMask as your guicamera. Two ways to do this:
advancedTexture.layer.layerMask = 0x10000000;
or
advancedTexture.layer.layerMask = guicamera.layerMask;
With this, you now have a separate camera to render either the main scene or the UI and your UI will always show on top of all layers and will not be affected by any post-processing you would want to add to your scene.
@mawa @RaananW facing a problem in mobile like if i use any button from the ui then i cant zoom in or zoom out.
Is that something new (from after we added the scollviewer behavior)? Did you try comment what we did on the scrollviewer and in case, does it work like this? The point is your buttons are actually inside a scrollviewer and we are detecting enter and out pointer to block the camera on scrollviewer interaction. If so we might need to add something for mobile (or serve a mobile version of the GUI). Can you please check on this and let us know? Thanks,
After the codes that you wrote in the pg i did not made any changes in that and i tried that in the mobile view. I checked that it only happens when we click on any buttoon or scroll in the ui then we can not zoom in or out in the mobile.
The question was: Was it working before the code update. Can you confirm?
yes that was working
can be checked in this pg https://playground.babylonjs.com/#SI13I2#18
Ok, then I think I know the problem. Let me see what best solution I can propose…
ok thanks for the help again
I believe I have a solution. Unfortunately, I’m unable to load the scene on my mobile. It just spins forever.
I’m not sure why (but it has nothing to do with the new code. It does the same with the old one).
Anyways, in this PG from lines 199 to 207, I use a function to check if the control is ‘picked’. You can open the console to view the info. Each time you pick in the GUI, it triggers a function to detach the camera. Each time you click/pick, in the scene, it attaches it again.
You can combine this with a timeout (lines 209 to 219). In this case move lines 204 and 205
camera1.detachControl();
e.onPointerUpObservable.addOnce(() => camera1.attachControl(canvas, true));
to the timer function and call the timer function instead on line 204, like this:
addDelay();
I hope this will work,
we can check that on crome it self by pressing f12 after downloading the pg and click on the toggle device toll bar on that through that we can test the mobile view aslo.
i will check it and let you kown if the problem got fixed or still has some issue
yes, but i like to test on the real thing because chrome on desktop is just a simu (and is not 100% reliable)
it almost solve the problem but we can not again zoom in or zoom out if we click or touch on the ui panel. we can again zoom in or out or rotate after clicking on the button.
link of the project http://45.79.126.10/AbhiwanDemos/testcon/ through this we can test it on mobile.
and it also removes the lock of the scroll and i am sending the main project link to you personally so that you can also test the solution of the problem
Well, I suppose with this solution, you need to click/tap in the scene again to recover the zoom, correct?
Sry, I don’t have time to look into this further today but I’ll have a look tomorrow morning.
May be in the meantime, someone else will have a better solution…
Anyways, have a great day/evening,
yeah sure i have given the project link to you in personal message you can test it there its not updated now but will be updated soon
got it.