search

google / model-viewer

Easily display interactive 3D models on the web and in AR!
https://modelviewer.dev
Apache License 2.0
6.71k stars 799 forks source link

annotation not displayed in AR Mode - iOS #4596

Closed Arumugamsix closed 6 months ago

Arumugamsix commented 6 months ago

Below are my code for plotting annotations

its working fine in object mode. but in iOS AR mode annotations are not visible

<model-viewer src="assets/Compact.glb" id="lazy-load" Environment-image="images/Environment_Light.jpg" exposure="2" ar ar-modes="webxr scene-viewer quick-look"
ar-scale="30%" camera-controls disable-tap  disable-zoom camera-orbit="0deg 75deg 30m" max-camera-orbit="Infinity 80.5deg 80deg"
field-of-view="50deg" max-field-of-view="45deg" min-field-of-view="-130deg" interaction-prompt="auto"
interaction-policy="always-allow" interaction-prompt-style="wiggle" shadow-intensity="5"
  quick-look-browsers="safari chrome"  background-color="#ffffff" data-js-focus-visible>

  <button class="Hotspot" slot="hotspot-1" data-position="-0.19644680092602942m 2.3651676877019687m -0.6922548849712347m" data-orbit="-50.94862deg 84.56856deg 0.06545582m" data-target="-0.33m 2.39m -0.70m" data-normal="-0.00007420508962828334m -0.35952769861141953m 0.9331344106958981m"  data-visibility-attribute="visible">
    <div class="HotspotAnnotation">Bull Bar</div>
</button><button class="Hotspot" slot="hotspot-2" data-position="-0.07440097782269245m 1.4388222251808613m 0.08924203128929759m" data-normal="-0.3407357384929431m -0.1948053884010642m 0.9197554115978765m" data-visibility-attribute="visible">
    <div class="HotspotAnnotation">Steering Wheel</div>
</button><button class="Hotspot" slot="hotspot-3" data-position="-0.17398546977398371m 0.9388221901164062m 1.3096911042962902m" data-normal="0m 0.5224079616867806m 0.8526956793406797m" data-orbit="-50.94862deg 84.56856deg 0.06545582m" data-target="-0.00m 1.19m 0.13m" data-visibility-attribute="visible">
    <div class="HotspotAnnotation">HeadLamp</div>
</button><button class="Hotspot" slot="hotspot-4" data-position="-0.5559562532469977m 0.39911028045870345m 1.1910394789162557m" data-normal="-0.6766469484614339m -0.6790998552447758m 0.28455631032249895m" data-visibility-attribute="visible">
    <div class="HotspotAnnotation">Alloy Wheel</div>
</button><button class="Hotspot" slot="hotspot-5" data-position="0.011953279971061659m 1.3527626546785556m -0.7575810443538571m" data-normal="-0.004709107678016579m 0.17752894147687873m 0.984104313191938m" data-visibility-attribute="visible">
    <div class="HotspotAnnotation">Seat</div>
</button>