There are a number of ways to rig a spring mesh in normal Blender. I'm having trouble trying to think of ways to do this in Blend4Web.

Here's a quick example I made. This is is Bezier curve, hooked to an empty object. The empty is scaled on the z-axis, which moves the bezier points but doesn't warp the spring's round profile:



I've done a lot of research in Blend4Web forums and documentation, and tried to use shape keys, bones, and other supported items, but I can't think of how this could be done. Can you help point me in the right direction so I can figure it out?

Alpha blending has strange artifacts as show on the pipes and metal objects in this illustration:


Of all the alpha blending options, only the "Add" option seems to create smooth blends. The same transparency option seems to work on my other model:


Here's my blend file:
https://www.dropbox.com/s/jxm0rvqwvw165e6/b4w-alpha-shader.blend?dl=0

All of your suggestions are working perfectly

I used your tutorial here to learn how to animate a texture along UVs.

Here is my example scene that I am working with.

• First question:
Is there a better way to animate the texture mapping node? My current way seems overly complicated, though it is from your tutorials. The mapping node can't be keyframed directly, right?


• Second question:
I want this section of pipe to have the brown air blow through it at a certain time period, say from frame 25-48. Can I determine when the animated gradient mask sweeps through the tube?


Here is my blend file.

I see. I hadn't considered animating an image texture along the UVs, but that makes sense. I'm actually using that same technique (from the tutorial you linked) for other parts of my model, so I do know how it's done. Should be no problem. Thanks!

That worked! Thanks :)

I have another question for you on the same model. I want to animate the belt on the front of the engine. Normally I would use the "curve" modifier and animate my object along some axis, as shown:



Of course modifiers don't export to Blend4Web, so I get this result:



I was looking into animating an armature along a path and baking the action as I did before, but it gets complex very quickly (link)

What is your suggestion to solve this? It's a pretty common technique – I was surprised I didn't find anything after a thorough search of the forums. Maybe I'm missing something obvious? I hope so!

I'm currently animating a car engine. Normally, I would use the "copy rotation" constraint so that each pulley on the front of the engine would rotate based on the highlighted circle empty's rotation.

How can this be done with Blend4Web? I know constraints aren't supported. Will I have to animate each pulley individually, then?

I'm looking at the code for "simple_app.js" that's provided with Blend4Web SDK.

I already know how to position and style div elements on a page with html and css, so I understand that part of the sample project. What I don't understand is how to load additional 3D models into separate divs.

From what I can see, the Blend4Web app is loaded into a div with the id of "main_canvas_container". How would the code look if I wanted to load a couple of different models into their own divs, so you could view them as you scroll down the page? It's important that the models are in their own divs, not in the same scene, and that they have their own rotate controls, etc. I don't need any UI elements or extra features. Just simply displaying 3D models in their own divs on the same page, with the ability to rotate/zoom/etc. like the "simple_app" example.

I've provided the "simple_app.js" code to make it easier to show me what lines I need to modify or add for each new 3D model and corresponding div element:

"use strict"

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

// import modules used by the app
var m_anim      = require("animation");
var m_app       = require("app");
var m_data      = require("data");
var m_scenes    = require("scenes");

var _previous_selected_obj = null;

/**
 * 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: true,
        console_verbose: true,
        autoresize: true
    });
}

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

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

    canvas_elem.addEventListener("mousedown", main_canvas_click, false);

    load();
}

/**
 * load the scene data
 */
function load() {
    m_data.load("simple_app.json", load_cb);
}

/**
 * callback executed when the scene is loaded
 */
function load_cb(data_id) {
    m_app.enable_controls();
    m_app.enable_camera_controls();

    // place your code here

}

function main_canvas_click(e) {
    if (e.preventDefault)
        e.preventDefault();

    var x = e.clientX;
    var y = e.clientY;

    var obj = m_scenes.pick_object(x, y);

    if (obj) {
        if (_previous_selected_obj) {
            m_anim.stop(_previous_selected_obj);
            m_anim.set_frame(_previous_selected_obj, 0);
        }
        _previous_selected_obj = obj;

        m_anim.apply_def(obj);
        m_anim.play(obj);
    }
}


});

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

Nevermind! I used a "print to console" node and saw that the function is in fact looping, I just don't have the variable set up correctly to increase incrementally, so the rotation only happens once. I'll keep tinkering with it I guess!

That's helpful to control the speed of variable update … but how do I get the code to loop? Right now, this only plays once.