How not to fall into the model by clicking at maximum zoom?

[89282222840]

Hello!
I want to end up with something like this
https://view3d.pik.ru/?url=https://0.db-estate.cdn.pik-service.ru/layouts/35463/panorams/1EM4_6_3-1_S_A.gltf.zip

Please tell me how I can limit the camera-target by height? I need that by pressing on the floor of the apartment I do not fall under it.
Panning is used
I do it based on this https://modelviewer.dev/examples/annotations/index.html#cameraViews

I specify data-orbit="auto auto 0%">

I need something like min-camera-target="auto 1m auto"

bandicam.2022-04-22.22-38-14-598.mp4

My code
<model-viewer id="flat" touch-action="auto" src="1.glb" camera-controls oncontextmenu="return false;" min-camera-orbit="auto 0deg 0%" max-camera-orbit="auto 140deg 2m" min-field-of-view="75deg" max-field-of-view="auto">

<button class="Hotspot" slot="hotspot-1" 
          data-position="-0.07166257943731114m 0.00040989014780161426m -0.5777030709950508m"  
          data-target="-0.07166257943731114m 0.13m -0.5777030709950508m" 
          data-orbit="auto auto 0%">          
              <div class="HotspotAnnotation">Room 1</div>            
</button>
          
<button class="Hotspot" slot="hotspot-2" 
          data-position="-0.48776109115758864m 0.0004098905915318439m -0.6940949506663779m"
          data-target="-0.48776109115758864m 0.13m -0.6940949506663779m" 
          data-orbit="auto auto 0m">          
              <div class="HotspotAnnotation">Room 2</div>            
</button>

<script type="module"> 

  const modelViewer1 = document.querySelector("#pan-demo");
  const annotationClicked = (annotation) => {
    let dataset = annotation.dataset;
    modelViewer1.cameraTarget = dataset.target;
    modelViewer1.cameraOrbit = dataset.orbit;
  }
  
  modelViewer1.querySelectorAll('button').forEach((hotspot) => {
    hotspot.addEventListener('click', () => annotationClicked(hotspot));
  });
</script>

[elalish]

Cool use case! I think your best bet would be something like:

mv.addEventListener('camera-change', () => {
  const target = mv.getCameraTarget();
  target.y = Math.max(target.y, minHeight);
  mv.cameraTarget = target.toString();
});

[elalish]

As an aside, if you'd be interested in contributing a simple version of this as an example for our docs pages, that would be awesome!

[89282222840]

Thanks for the quick response)) Now I don't fall into the floor if I move the camera. But if the camera has stopped, then I still fail on click.

Uploaded a new video

bandicam.2022-04-22.23-34-38-315.mp4

[elalish]

Thanks, that looks like a bug: apparently the camera-change event isn't getting fired for target updates. You may be able to work around it by using a click event listener, but please file an issue on this so I can get it fixed properly in the next version.

[89282222840]

modelViewer.addEventListener('click'

[elalish]

Fixed in #3427

[89282222840]

there is one moment left. How to restrict passage through walls?
https://user-images.githubusercontent.com/82583306/164791390-e64b8133-b268-4593-839a-06c859e88726.mp4

[elalish]

Good luck! That's why beyond the capabilities of MV on it's own.

[89282222840]

There is 1 more bug. If I first use the scroll to zoom in, then when I click on the floor, I fall through. If I initially use the button, then when I click on the floor, I do not fall through.

bandicam.2022-04-23.00-07-37-972.mp4