ThreeJS Animation Question

Hello, Klaus! A great example of a dancing cat. But I can't figure out one thing: how do I just start the animation of my 3d model and control it (stop and start, or loop playback)? In the example with the cat, everything is complicated. I don't need him to move with the mouse, and when clicked, a random animation is selected. I need to make a simple action to start an animation and stop it. I can't figure out how...

Quote from klaus.krpano

Hi, (I have moved question here as it is a usage question and not directly related to the news post)

E.g. if your file contains an animation named 'ani1' and you want to play it on click:

Code

<hotspot name="model" ...
    onclick="animations[ani1].play();"
    />

or when called from somewhere else:

Code

hotspot[model].animations[ani1].play();

More information here:

https://krpano.com/plugins/threejs/#gltfanimations

Best regards,
Klaus

Display More

Thank you, Klaus! It helped

I have a model that weighs 60mb and takes a long time to load. Is there some kind of preloader for 3d models that will show the loading process?

Quote from Tuur

Hi,

Best is to check the code of the Tesla example.

Tuur

This probably won't work for me, because in my model all the textures are in a single glb file.

Quote from klaus.krpano

Hi, (I have moved question here as it is a usage question and not directly related to the news post)

E.g. if your file contains an animation named 'ani1' and you want to play it on click:

Code

<hotspot name="model" ...
    onclick="animations[ani1].play();"
    />

or when called from somewhere else:

Code

hotspot[model].animations[ani1].play();

More information here:

https://krpano.com/plugins/threejs/#gltfanimations

Best regards,
Klaus

Display More

This is the model that turned out): https://panorama07.com/3d/dragon/ . There is also one more question: I did not find transparency properties in 3d models. I tried to do it as usual, but it didn't work.

Quote from klaus.krpano

Nice example!

A small improvement hint - try using an environment texture for the 3d-model. That helps integerating the model into the scene.

E.g. just add:

Code

<threejs envmapurl="preview" />

More information here:
https://krpano.com/plugins/threejs/#envmapurl

About transparency - what do you mean?

I tried making the alpha="0" like for regular hot spots, but it didn't work for the glb model.