How to add Buy icon within the AR mode, and how to do some action when clicked.

[rksambari]

How to add Buy icon within the AR mode, and how to do some action when clicked.

Description

I have an AR Model developed with model viewer, when I click on View in you space, I'm able to see the model in real world but I want to add an icon some where right/left of the camera view, and need to perform some action when clicked.

Version

https://unpkg.com/[email protected]/dist/focus-visible.js
https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js

• model-viewer: v5.0.2

Browser Affected

• Chrome, version: xx.x.xxxx.xx
• Edge
• Firefox
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

AR

• WebXR
• SceneViewer
• QuickLook

[elalish]

It depends on your ar-mode, which also depends on your device. For WebXR (our default on Android) this is easy; just add any HTML elements as children of your mv element: https://modelviewer.dev/examples/augmentedreality/index.html#webXR

For iOS, quick-look is your only option and you'll need to pass their API's query params in your ios-src. They don't have a lot of options, but you can create a button.

[elalish]

The first link I shared is that example. It has a whole HTML carousel, but you should be able to simplify that to an icon.

[rksambari]

Hi @elalish, we have 2 views in model viewer.
ONE, the 3d view which is the html page loads when you click on the url and this view has that AR icon(View In AR).
SECOND, the AR view which comes up on clicking View in AR button in 3d view.

The carousel example you shared is the type ONE(3d View) but not the AR view. What I need is an ICON on the AR camera view(SECOND, the real-world camera view).

In my previous comment, I shared 2 images, one is taken from ARView(real-world camera view), second image is from 3d view. Your example is getting all items(carousel slider) on the 3d view but not in the AR view, thus can you please share an example that helps me creating an ICON on the AR View(SECOND).

Thanks.

[elalish]

Not true; if you try that example on Android and hit the AR button, you will see that same carousel in AR, via WebXR. You can style your CSS to change visibility and such between 3D and AR mode using this: https://modelviewer.dev/docs/#entrydocs-augmentedreality-css-arStatus.

[polishchuk37a]

Not true; if you try that example on Android and hit the AR button, you will see that same carousel in AR, via WebXR. You can style your CSS to change visibility and such between 3D and AR mode using this: https://modelviewer.dev/docs/#entrydocs-augmentedreality-css-arStatus.

But how can i make it working for IOS devices?

[elalish]

You can't, sadly. Ask Apple to support WebXR? @grorg.