Forum

Webmasters! 3 Ways to 3D Web

02 March 2017 15:34
Ok, thank you. I had changed it and now it looks like this.

b4w.register("app", function(exports, require) {

window.addEventListener("load", function() {
	b4w.require("app","NS_1").init_1({
		canvas_container_id: "container_id1",
		callback: load_cb
	});
	b4w.require("app","NS_2").init_2({
		canvas_container_id: "container_id2",
		callback: load_cb
	});
}, false);
}

function load_cb() {
    b4w.require("data").load("redCube.json", loaded_cb);
}

function loaded_cb() {
    b4w.require("app").enable_camera_controls();
}


<div id="canvas_cont_1"></div>
<div id="canvas_cont_2"></div>


But it still not work properly.
02 March 2017 15:53
This is the simple project - project.zip.

You can import it in the Project Manager.

Or.. do you need the another behavior?
02 March 2017 16:26
I mean exactly four 3d images.

On this page you can see 1. But I want just 4

http://blender.freemovies.co.uk/blend4web/scripting/hello3.html
02 March 2017 17:07
Hello
Do you mean this?

There are 4 interactive canvases on this page. I've attached the sources, just import it to you ProjectManager
Blend4Web developer
02 March 2017 17:22
It is correct. This is what I really want

Than you so much for help Dmitry Zhiganov, Roman Sementsov
02 March 2017 20:31
Well, I had tried to write it on my own, to understand blend4web. This is my code, but it unfortunately does not work.

b4w.register("sev_canvas_app", function(exports, require) {

// import modules used by the app
var m_app       = require("app");
var m_data      = require("data");
var m_preloader = require("preloader");

exports.init_1 = function() {
    m_app.init({
        canvas_container_id: "main_canvas_container_1",
        callback: init_cb1,
        show_fps: DEBUG,
        console_verbose: DEBUG,
        autoresize: true
    });
}

exports.init_2 = function() {
    m_app.init({
        canvas_container_id: "main_canvas_container_2",
        callback: init_cb2,
        show_fps: DEBUG,
        console_verbose: DEBUG,
        autoresize: true
    });
}

function init_cb1(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;
    };

    load1();
}

function init_cb2(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;
    };

    load2();
}



function load1() {
    m_data.load(APP_ASSETS_PATH + "sev_canvas1.json", load_cb, preloader_cb);
}

function load2() {
    m_data.load(APP_ASSETS_PATH + "sev_canvas2.json", load_cb, preloader_cb);
}

function preloader_cb(percentage) {
    m_preloader.update_preloader(percentage);
}

function load_cb(data_id, success) {

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

    m_app.enable_camera_controls();
}

});

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


	  <div class="wrapper">
        <div id="main_canvas_container_1"></div>
      </div>
	  <div class="wrapper">
        <div id="main_canvas_container_2"></div>
      </div>
03 March 2017 12:19
Hello,

You don't have to write init_cb1, init_cb_2. Look. In the example above, we have named our module "sev_canvas_app". It has standard functions: init, init_cb, load, load_cb. But we use this module several times:
b4w.require("sev_canvas_app", "NS_1").init_1();
b4w.require("sev_canvas_app", "NS_2").init_2();

We duplicated the init function twice, because we used different HTML elements: main_canvas_container_1 and main_canvas_container_2. We could write the following code and it would be the same:
b4w.register("sev_canvas_app", function(exports, require) {
var _name_space = b4w.get_namespace(require);
// import modules used by the app
var m_app       = require("app", _name_space);
var m_data      = require("data", _name_space);
var m_preloader = require("preloader", _name_space);

var _loading_scene = "";

exports.init = function(canvas_container_id, loading_scene) {
   _loading_scene = loading_scene;
    m_app.init({
        canvas_container_id: canvas_container_id,
        callback: init_cb1,
        show_fps: DEBUG,
        console_verbose: DEBUG,
        autoresize: true
    });
}

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();
}

function load() {
    m_data.load(APP_ASSETS_PATH + _loading_scene, load_cb, preloader_cb);
}

function preloader_cb(percentage) {
    m_preloader.update_preloader(percentage);
}

function load_cb(data_id, success) {

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

    m_app.enable_camera_controls();
}

});

// import the app module and start the app by calling the init method
b4w.require("sev_canvas_app", "canvas_1").init("main_canvas_container_1", "sev_canvas1.json");
b4w.require("sev_canvas_app", "canvas_2").init("main_canvas_container_2", "sev_canvas2.json");


The main code lines are placed in the end of this example:
b4w.require("sev_canvas_app", "canvas_1").init("main_canvas_container_1", "sev_canvas1.json");
b4w.require("sev_canvas_app", "canvas_2").init("main_canvas_container_2", "sev_canvas2.json");


Take a look at the "canvas_1" and "canvas_2" variables. They are called name space variables. They allow us to use one module twice. And each time, this module will be used as a new module.

Use the last code snippet

Anyway, we are going to write an article about this. I hope, it will be useful for users.
Blend4Web developer
 
Please register or log in to leave a reply.