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>

[faradraissa]

I am trying to run this code, but I cant even see the options for the button to turn on or off. is this the full code?
here is my code I am using. I can run other option code from modelviewer and se it on my phone and it works:

[faradraissa]

[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?

[adrianposteuca]

Yes, you can do that by accessing model materials and change colors from option selector.

try something like this:

modelViewer.addEventListener("load", () => {
const material = modelViewer.model.materials[6];
const createAndApplyTexture = async (channel, event) => {
const texture = await modelViewer.createTexture(event.target.value);
if (channel.includes("base") || channel.includes("metallic")) {
material.pbrMetallicRoughness[channel].setTexture(texture);
} else {
material[channel].setTexture(texture);
}
};

    document
      .querySelector("#diffuse2")
      .addEventListener("input", (event) => {
        createAndApplyTexture("baseColorTexture", event);
      });
  });

[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.

[Brahmbob]

Hello,

Thanks for your good work on modelviewer and the code above. I hope you could help me as well. I'm also using modelviewer and wants animation by click but not looping, just make the animation ones then pause on the last position/frame and by the next click just reverse the animation and then pause.

So, for example I have an animation where a door is opening and then is closing.
I would like, that on the first click on the hotspot, the door is opening and keeps open.
On the next click, the door is closing and keeps closed.

Probably I can do this with currentTime and call pause()

I tried a lot but I have not really a clue about java script. Please could you help me with a complete script from start to beginning like your script (mentioned above).
I could get this script working.

<model-viewer id="modelViewer" src="some-animated-model.glb" ...>
Hotspot

<script> hotspotButton.addEventListener('click', () => { if (modelViewer.paused) { modelViewer.play(); } else { modelViewer.pause(); } }); </script>

It is a good start. But could not find a way to include the function that I want:
first click on the hotspot, the door is opening and keeps open.
On the next click, the door is closing and keeps closed.
I red in the modelviewer explanation that you can make the animation reverse. That would for the animation I think the best for closing the door to just reverse the animation of the opening door.

So let us say the door is full open after 2 sec. Current Time or pause () for hold open door is 2 sec. then
next click: reverse animation until Current Time 0 sec. - door is closed and should be closed until next click.

It would be very helpful if you could help me with the script.

Thank you

[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 #1160 (comment)

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.

[Brahmbob]

Hello,

Thanks for your good work. I'm also using modelviewer and wants the same behavior with animation like 79pxls mentioned
"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?"

So, for example I have an animation where a door is opening and then is closing.
I would like, that on the first click on the hotspot, the door is opening and keeps open.
On the next click, the door is closing and keeps closed.

You said I could do this with currentTime and call pause()

I tried a lot but I have not really a clue about java script. Please could you help me with a complete script from start to beginning like the script from cdata (mentioned above). I could get this script working.

<model-viewer id="modelViewer" src="some-animated-model.glb" ...>
Hotspot

<script> hotspotButton.addEventListener('click', () => { if (modelViewer.paused) { modelViewer.play(); } else { modelViewer.pause(); } }); </script>

It is a good start. But could not find a way to include currentTime and call pause() function that it worked like I want:
first click on the hotspot, the door is opening and keeps open.
On the next click, the door is closing and keeps closed.
I red in the modelviewer explanation that you can also make the animation reverse. That would for the animation I think the best for closing the door to just reverse the animation of the opening door. ?? Or, What you think.

So let us say the door is full open after 2 sec. Current Time or pause () for hold open door is 2 sec. then
next click: reverse animation until Current Time 0 sec. - door is closed and should be closed until next click.

It would be very helpful if you could help me with the script, or give me some hints how to achieve it.

Thank you

[elalish]

We've made some upgrades that should give you some more options here. Look at the arguments you can pass to play. You may want to export your scene with an animation that only opens, then use timeScale = -1 to play it backwards too.

[Brahmbob]

Hi,
thanks for your answer. Yes, that's a good hint to make an animation that only opens and I also thought that's the right way. But I have no Idea how to script that in java Script. Can you help me there as well with a script.
Thank you

[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]

@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.

[fusignbc]

Is there anyone that could assist me with this?
I want this drawer to open when it is clicked on, and since I have multiple drawers, I want to add the same interstion to all of them. If someone can assist me, it would be greatly appreciated.

Thank you very much.

https://glitch.com/edit/#!/pethub?path=index.html%3A20%3A18

[miguelfernandesidesign]

have it solved? can not open your glitch

[miguelfernandesidesign]

Hello,
Sorry for the noob question but how can stop the animation after playing it once?
I searched for Documentation and I'm using autoplay. (https://modelviewer.dev/examples/animation/#autoplay)

Another thing that happens is this animation crashes when I try to open in my space.

This is the example:
https://ar-cenf.glitch.me/

Anyone with this issue that can help??

Thank you

[elalish]

Try the play() method instead of the attribute: https://modelviewer.dev/docs/#entrydocs-animation-methods-play

You're welcome to file a bug if something is crashing. Or do you just mean the animation doesn't play in AR? For that you should file a bug and fill in the issue template. Try to narrow down which AR modes work and which don't.

[miguelfernandesidesign]

Thank you @elalish,

i'm doing this work for school and don't find documentation with a script for play() method.

About the issue of animation error:
Open the AR mode and the animation in autoplay, happens when try to open in a Device and place it on my environment.
Take this screenshots:

Hope you can help me try to find a way.
THANK YOU