Forum

Triggering animations with JS

22 January 2019 17:38
Hey guys,
i got a problem. I want to trigger an animation with JS. But theres nothing happening when i press the button.
I use a HTML button to click and trigger the method:

// register the application module
b4w.register("my_project_main", function(exports, require) {

// import modules used by the app
var m_app       = require("app");
var m_cfg       = require("config");
var m_data      = require("data");
var m_preloader = require("preloader");
var m_ver       = require("version");
var m_anim      = require("animation");
var m_scns      = require("scenes");

// detect application mode
var DEBUG = (m_ver.type() == "DEBUG");

// automatically detect assets path
var APP_ASSETS_PATH = m_cfg.get_assets_path("my_project");

//objects


/**
 * export the method to initialize the app (called at the bottom of this file)
 */
exports.init = function() {
    m_app.init({
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        show_fps: DEBUG,
        console_verbose: DEBUG,
        autoresize: true
    });
}

/**
 * callback executed when the app is initialized 
 */
function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");
        return;
    }

    m_preloader.create_preloader();

    // ignore right-click on the canvas element
    canvas_elem.oncontextmenu = function(e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    };

    load();
}

/**
 * load the scene data
 */
function load() {
    m_data.load(APP_ASSETS_PATH + "my_project.json", load_cb, preloader_cb);
}

/**
 * update the app's preloader
 */
function preloader_cb(percentage) {
    m_preloader.update_preloader(percentage);
}

/**
 * callback executed when the scene data is loaded
 */
function load_cb(data_id, success) {

    if (!success) {
        console.log("b4w load failure");
        return;
    }

    m_app.enable_camera_controls();

    var button = document.getElementById("button");
    button.addEventListener("click", playAnimation);

}

function playAnimation(){
    var cube = m_scns.get_object_by_name("cube");
    
    m_anim.apply(cube,"cubeAction.002");    
    console.log(m_anim.get_anim_names(cube));        // apply the Blender animation
    m_anim.set_behavior(cube, m_anim.AB_FINISH_STOP);          // set the anim behavior: simply stop after playing, don't rewind
    m_anim.set_frame(cube,0);      // if doorstate is "closed", set anim to first frame (1), else last frame (25)      // if doorstate is "closed", play anim forward (speed=1), else backwards (speed=-1)
    m_anim.play(cube,null);       
    console.log("button");
}

});

// import the app module and start the app by calling the init method
b4w.require("my_project_main").init();




Hope you can help me there!
ty
boom3x
22 January 2019 19:48
theres nothing happening when i press the button.
Your code works fine for me.

When you click the button, does the browser console print the messages you put in the function?

Do you get any other (error) messages or warnings in the console?
22 January 2019 23:04
console.log(m_anim.get_anim_names(cube));

that prints an empty array,

console.log("button");

that works

m_anim.play(cube,null);

B4W ERROR: Object "cube" has no applied animation
B4W ERROR: No fcurves in action "cubeAction.002"

I'm more programmer than blender master. I think there might be an issue with my .blend file. What i did was that I inserted keyframes on 0 and 60 and changed the rotation on frame 60 to 360 degree z-axis. When i take a look at the outliner then there is a subtree called "animation" and under that, is my Animation called "cubeAction.002". The NLA view shows my animation as well. I have no idea if i forgot something. If it helps, i could provide my blend file. But its really not more than what i just descriped.
23 January 2019 00:27
If it helps, i could provide my blend file.
Yes, because the error message means that the animation did not get properly exported for some reason.
23 January 2019 07:56
Make re-export scenes or Export-> Blend4Web (.json)
Every time you modify the blender file you have to re-export scenes.
23 January 2019 20:40
Thank you Juani that worked! You can close that discussion as solved.
 
Please register or log in to leave a reply.