Model-viewer: Model Viewer animation on hotspot click

[Arumugamhns]

In Ar mode hotspot is not displayed..
is it possible to add UI elements in AR mode.

By click hotspot i need to play animation and stop automatically.

kindly give some idea or sample files.

Thanks in advance

[cdata]

@Arumugamhns thank you for the thoughtful questions! Please see my answers below:

In Ar mode hotspot is not displayed..
is it possible to add UI elements in AR mode.

Good news: yes, this is possible. Bad news: not yet; Chrome 83 is the first browser release that will support DOM Overlay, which is what allows UI to be shown in AR mode. You can try it out today if you install Chrome Beta or Canary on an Android device.

See this Tweet for an example: https://twitter.com/modelviewer/status/1250796318886252545?s=20

By click hotspot i need to play animation and stop automatically.

You will need to use some script in order to do this. For example:

<model-viewer id="modelViewer" src="some-animated-model.glb" ...>
  <button id="hotspotButton"
    slot="hotspot-one"
    data-position="..." data-normal="...">Hotspot</button>
</model-viewer>
<script>
hotspotButton.addEventListener('click', () => {
  if (modelViewer.paused) {
    modelViewer.play();
  } else {
    modelViewer.pause();
  }
});
</script>

[Arumugamhns]

Thanks a lot..

i have another question..

i need to change the model color dynamically by click the button.

for example..

I have a car model in blue car on load

and i have 5 button in different colors by click this i need to change model color.

is it possible?

[cdata]

@Arumugamhns the basic capability to do this is supported but experimental. Please refer to this example to see how to do it: https://modelviewer.dev/examples/scene-graph.html

We are rapidly working on improving this part of the feature set (our scene graph API). Soon we hope to support custom textures as well.

[Arumugamhns]

but its not working in ios.. even in obj mode

[Arumugamhns]

how https://www.8thwall.com/ they open camera inside the browser. even in low end mobile.

[cdata]

@Arumugamhns yes, Quick Look does not support any kind of scriptability via the web. For that, you will need to use Apple's Reality Composer and produce an equivalent .reality file. This is the unfortunate "reality" of proprietary AR platforms: you need to create a special piece of content for every one of them.

With regards to 8th Wall, they do support AR on low-end devices on the web, but the way they do it is costly in terms of script size and relatively low-quality in terms of detection and tracking. The <model-viewer> project aims to rely on standardized browser features (WebXR) so that the script bundle can stay relatively small and also so that the AR experience is high quality where available.

This is just my personal opinion, but I believe that users who experience a low-quality AR experience are less likely to seek value from AR in the future. Although for some cases it can be a fun gimmick, in many practical cases (such as placing furniture to see if it fits in your room) a low-quality AR experience can be very frustrating for users and could even lead to a lost conversion for the company that offers it.

[Arumugamhns]

Thanks a lot sir..

finally only one question..

how to switch between two models.

i have vehicle model it have 5 colors. by clicking buttons i need to change the color.

[cdata]

@Arumugamhns please see my comment above https://github.com/google/model-viewer/issues/1160#issuecomment-620059015

We have limited facilities for this right now, but the scene graph API does allow you to switch base color factor.

Otherwise, the best option is to swap between 5 different models.

[Arumugamhns]

any example is available for swapping models?

[79pxls]

Hi! Thank you for all you do with Model Viewer :)

Please can you help me with your above code?
I have the animation working on click but its looping. Is there a way for it to only play once then stop? Then if the hotspot was clicked again it would just replay the animation?

Thank you!!

[79pxls]

Also...is there a way to add multiple hotspots to trigger multiple animations?
I can't find any documentation on this anywhere.

Cheers!

[elalish]

@Arumugamhns We now have a model-switching example.

@79pxls You can find examples of switching between multiple animations here. We don't currently support non-looping animations, but that feature has been requested. For now, you'll just need to watch currentTime and call pause() when it gets to the end of your animation.

[79pxls]

Thanks for the reply!

So just to confirm...I can call specific animations by name, then pause, then fire another animation on click, and so on?

Does the currentTime go by seconds or frames?

Many thanks.

[elalish]

@79pxls It goes by seconds. I don't believe glTF animations have a concept of frames, except for keyframes, which are not uniformly spaced.

[79pxls]

Thanks for clarifying Elalish!

Is there any documentation on calling specific animation by name on click anywhere?
I read through the animation page you sent me but cant find anything.

Sorry for all the questions, coding is not my strong suit.

[jeanieherold]

I have a reset button in the model viewer that sets camera-orbit attr to specified values. It works fine until the user interacts with the glb file rotating the image - then the reset doesnt work.
I was thinking I should use the currentTime property on button click instead --> but how do I set that up in js?
I tried just consoling modelViewer.currentTime(); and wasnt getting anything valid. (Where modelViewer is just the id of the model-viewer.
I have everything working great so far on our page with the 3D and AR aspects but the designer really would like a button to reset the 3D model after the user has interacted and I am not finding any good example of using the properties defined in the modelviewer.dev docs - and currentTime() sure seems like what I need or a way to update the model-viewer camera orbit after user has interacted.

Any help would be greatly appreciated!! Please let me know if this should be a separate issue.

[elalish]

@jeanieherold I think you may have confused camera motion with animation (confusing since they both cause requestAnimationFrame() to fire, which is yet a third, separate concept). Animation (involving currentTime, play, pause) is for animations built into the glb; think of a model of a person walking. The camera is completely independent of that, and you should be able to reset it by setting the camera-orbit attribute as you said. Can you give a link to your project or a Glitch that demonstrates what you're trying to do? I'd guess it's just a small bug in the JS somewhere.

[jeanieherold]

@elalish Thanks for explaining that difference in camera motion vs animation! :)
Here is a page I have dummied down to just the modelviewer (and borrowed your astronaut :) and an ios udzs file as I am not allowed to publicly display our actual assets for the project we are working - hope that is ok. I need to go make sure I give credits there! )
http://heroldwebdesign.com/

And in retesting.. I CAN move the 3D around and click reset and it goes to where I want it.. but then the button doesnt work on subsequent tries... I am thinking I should not need an event listener on this?! right?
Also... if I zoom and then hit the reset - the zoom back out to 3m isnt working. I know I am just setting it somehow just off.

I am probably doing something really simple wrong in my scripts.

I appreciate your help! I love this model-viewer!! and so does our team!

[elalish]

Yeah, I'm not exactly sure where the bug is, but it's probably something simple. Your syntax isn't very familiar to me; it might be helpful to look at the fourth example here which has a script snippet.

[jeanieherold]

@elalish Thank you!!! you are awesome... that was exactly what I needed... the right way to implement the scripts and that told me what I needed!
It is working perfectly now :)

http://heroldwebdesign.com/

I am so excited to keep learning more about model-viewer! Thank you again for your help :)

[7thFlare]

@elalish Sorry for the noob question.. Im trying to test out the model switching example for webxr with no luck..
The carousel and the first model launch just fine. If i click on any other model it all falls apart and all the models stop working.
Im using glitch for the files and models i have. What could be going wrong?

[elalish]

@7thFlare Have you checked the JS console? Errors and warnings there are a good place to start. It's likely something simple like JS syntax or a bad file path. I can only help if you post a link I can inspect (ideally the editing link from Glitch).

[7thFlare]

I also thought it was the file paths but i think I got that right.. maybe a js error as you say coz i havent done much on that front.
heres what i got so far:
https://glitch.com/edit/#!/join/825df2eb-14cc-4db4-ad63-8c1f82803f89

[elalish]

@7thFlare Yeah, looks like it's the file paths; lots of 404s and 403s in the console. Looks you haven't updated all your links to your glitch CDN assets. You're still trying to load my assets in my file structure, which doesn't match your Glitch site.

[7thFlare]

I have two main models.. ive linked those two in glitch.. the first one loads, but if i press another they both stop.
maybe im getting something wrong but thats the only place ive linked my models.. is there an array or something where im supposed to link them?

[elalish]

@7thFlare You need to remove all of my stuff first so that it's more clear what you're trying to do. Make sure your JS is only setting src to your actual CDN paths.

[7thFlare]

cleaned it up.. but still nothing.. i feel my issue might be setting the correct base for it to switch the source from.

[elalish]

@7thFlare Yes, precisely. The base of the URL is just my own file structure. You need to remove all that and set the src to what you want it to be.

[likhita-biyyala]

Hi,
UI elements not appearing in AR mode of IOS devices (safari/chrome).
any reference documentation that i can go through for this one [_"you will need to use Apple's Reality Composer and produce an equivalent .reality file"_] @cdata

[elalish]

@likhita-biyyala You'll want Apple's documentation for that, which shouldn't be too hard to find. What I'm less sure of is if what you want to do is possible in a .reality file. I'm not sure how much UI they support, as they certainly don't support DOM like webXR does.