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.

Hi! play(loop, blendtime, playalone, callback). I can't figure out how to fit a certain number of repetitions of a single animation into this design. It is stated that it is simple: once, repeat, and pingpong. No, and so: (the number of repetitions is several, infinite by default.). The question is how to use - repetitions

Quote from Tuur

Hi,

i have such in an opensource barebone example here:
https://www.virtualtuur.com/krpano/122/bar…lb/1/index.html

xml:
https://www.virtualtuur.com/krpano/122/bar…/glb/1/tour.xml

look in the DoOnclick action.
.. to be short... use a 'counter'

Hope it helps,
Tuur

Display More

Thanks! Here's an action game that solved this issue.:

<action name="DoOnclick_model2" type="js"><![CDATA[
    // ========== ANIMATION SETTINGS ==========
    // Array defining the sequence of animations to play
    var animation_sequence = ["fly", "fly_right", "glide"];
    
    // Number of repeats for each corresponding animation
    var repeat_counts = [3, 2, 1];
    
    // Transition time between animations in seconds
    var blend_time = 0.3;
    
    // ========== SYSTEM VARIABLES ==========
    // Get reference to our hotspot
    var hs = krpano.get("hotspot[model2]");
    
    // Index of current animation in sequence
    var current_animation_index = 0;
    
    // Counter for current animation repeats
    var current_repeat_count = 0;
    
    // ========== MAIN PLAYBACK FUNCTION ==========
    function playNextAnimation() {
        // Loop back to first animation when sequence completes
        if (current_animation_index >= animation_sequence.length) {
            current_animation_index = 0;
        }
        
        // Get current animation name and object
        var anim_name = animation_sequence[current_animation_index];
        var anim = hs.animations.getItem(anim_name);
        
        // Reset repeat counter for new animation
        current_repeat_count = 0;
        
        // Clean up previous handler if exists
        if (anim.onloop) anim.onloop = null;
        
        // ===== ANIMATION LOOP HANDLER =====
        anim.onloop = function() {
            // Increment repeat counter
            current_repeat_count++;
            
            // Debug output
            console.log("Animation " + anim_name + ", loop: " + current_repeat_count);
            
            // Check if reached required repeats
            if (current_repeat_count >= repeat_counts[current_animation_index]) {
                // Remove handler
                anim.onloop = null;
                
                // Move to next animation
                current_animation_index++;
                
                // Play next animation
                playNextAnimation();
            }
        };
        
        // ===== START ANIMATION WITH PARAMETERS =====
        // 1. "repeat" - loop mode
        // 2. blend_time - transition duration
        // 3. true - stop other animations (playalone)
        // 4. null - no callback function
        anim.play("repeat", blend_time, true, null);
        
        // Log animation start
        console.log("Starting animation: " + anim_name);
    }
    
    // ========== INITIATE ANIMATION CYCLE ==========
    playNextAnimation();
]]></action>