Webmasters! 3 Ways to 3D Web (2)

02 March 2017 15:34

#15850

posts: 5

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

#15851

Dmitry

posts: 44

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

#15852

badeunite

posts: 5

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

#15853

Roman Sementsov

posts: 900

Hello
Do you mean this?

There are 4 interactive canvases on this page. I've attached the sources, just import it to you ProjectManager

02 March 2017 17:22

#15854

badeunite

posts: 5

It is correct. This is what I really want smiling

Than you so much for help Dmitry Zhiganov, Roman Sementsov

02 March 2017 20:31

#15864

badeunite

posts: 5

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

#15869

Roman Sementsov

posts: 900

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.

Forum

Webmasters! 3 Ways to 3D Web

Please register or log in to leave a reply.