Forum

User posts badeunite
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>
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 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 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.
01 March 2017 19:00
Hi everyone,

I would really like to know, how to add more Interactive 3D images on single web page.

For example:

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


Because in init we can add just one id:

exports.init = function() {
m_app.init({
canvas_container_id: "canvas_cont",
callback: init_cb,
alpha: true
});
}