Is it possible to listen model-viewer events?

[hd-esteban]

I'd like to know if is possible to listen model-viewer events.

For example, we would like to execute some functionality, once model-viewer is ready to be used, is it possible to set some callbacks as attributes or something like that?

[cdata]

There are events in our docs :) you just have to scroll down the page to find them. You can listen to them with the standard DOM interfaces (e.g., addEventListener).

Of course, given that you already pointed out that our docs were wrong, I just checked and sure enough the docs for one of the events you probably want are missing.

There is a model-visibility event that is fired when the model is loaded and revealed to the viewer. There is also a load event that is fired when the model is loaded over the network (although it may not be visible to the user yet).

[cdata]

I filed this issue to update the docs for the model-visibility event: #554

[hd-esteban]

Thank you Chris @cdata, my mistake :( I searched with cmd + f 'onload' in the documentation page. I checked the list of events and would be great if you consider to add some other events such ready, error, and maybe some others to be dispatched when AR is requested. :)

I'm working with the progress event and waiting for the totalProgress property to be equals 1 to execute my function.

In my case I noticed any other event has been triggered since I'm working with the reveal property set as interaction, without a poster image, so It was difficult to find the totalProgress flag inside the detail objet from the progress event to take it as my reference.

[cdata]

@Esteban26 if you have time, could you file a separate issue for each event you would like, along with a description of what each one represents?

Generally we add events as needed. If users request specific events we are more likely to add them :)

Depending on what you are using the event for, I would recommend checking out the model-visibility event!

[streamgao]

On an additional note, we would like to track when the user enters the AR mode and exits the AR modes, the interactions he/she makes in both 3D/AR modes.
Any events we could listen to?

[cdata]

@streamgao unfortunately, the AR modes that are currently supported are built around native apps. On iOS we use AR Quick Look and on Android we use Scene Viewer. Since these are native apps, and exist outside of the browser, the information we can gleam about their usage is very limited. I doubt that we could ever report the kind of information you are asking for in a reliable way, if at all.

That said, when WebXR AR is finally shipped in the browser we will be able to provide events like the ones you are requesting.

[jalamprea]

I'm using model-viewer 0.10.0 and I can't listen to those events, even using this simple code:

    const modelViewer = document.querySelector('model-viewer');
    modelViewer.addEventListener('model-visibility', function(evt) {
        console.log(evt);
    })

are you sure that events are working?

[corecode1]

@cdata Any update on ar-status events? In my application, I need to know if AR is supported. I'm trying to do it like this:
document.getElementById('model-viewer').addEventListener('ar-status', e => { console.log(e); });
I'm not receiving ar-status event with this code, while the model-visibility works fine.

[elalish]

@corecode1 You'll only get ar-status events when the user successfully does something in AR mode, so it cannot serve to figure out if AR is supported. In fact, the browser restricts us from knowing if AR is really supported, so we have some heuristics on whether to show the AR button or not, but they are not at all perfect. You're welcome to look through our AR code and copy the heuristics we have if you want.

[lucasmatheustesta]

@elalish by reading the property "canActivateAR", you can tell if the device supports augmented reality, or am I mistaken?

[elalish]

@lucasmatheustesta As I said earlier, we only have heuristics, which are currently wrapped up into canActivateAR, but this is by no means a guarantee of support.

[paulsimplistics]

I've been hiding the model-viewer element with css when my page is initially hit (didn't want to use the poster), then listening to the load, preload and scene-graph-ready events, to show the model yet on some tests, the model cannot be interacted with.

Is this due to the order of these events? or an event that i'm missing?

[elalish]

@paulsimplistics I really can't say without having your page to repro with. I think just listening to the 'load' event should be enough. Are you talking about automated tests? Those can be a bit tricky since there's a lot of async stuff happening with lit-element and much of our logic is wrapped up in RAF callbacks. You may want to look at our own unit tests to see how we apply various waits to give state a chance to catch up.