Forum

Trying to init multiple canvases on one page

30 August 2018 16:47
Hi,

I'm currently using b4w with npm and webpack. I'm using ES6 style syntax for the modules. The code works on one canvas, if I call just one init function it will work. When I try to add another it breaks. I get the error "TypeError: vendor is null, can't access property "indexOf" of it" and when I go in to inspect the error the line which is causing the error is to do with Qualcomm
vendor.indexOf("Qualcomm")


This is my main js file that gets called from my HTML
import { b4w_init } from './b4w_canvas1.js';
import { b4w_init2 } from './b4w_canvas2.js';
$(function () {
  b4w_init();
  b4w_init2();
});

Here is my first module code in b4w_canvas1.js
import b4w from "blend4web";
var m_app       = b4w.app;
var m_cfg       = b4w.config;
var m_data      = b4w.data;
var m_preloader = b4w.preloader;
var m_ver       = b4w.version;

var m_main      = b4w.main;

var APP_ASSETS_PATH = '/path/to/b4w/assets/';

export function b4w_init() {
    m_app.init({
      canvas_container_id: 'canvas_container_0',
      callback: init_cb,
      physics_enabled: false,
      show_fps: false,
      console_verbose: false,
      autoresize: true,
      force_container_ratio: 1,
      alpha: true,
    });
}
...


And here is the second b4w_canvas2.js
import b4w from "blend4web";
var m_app       = b4w.app;
var m_cfg       = b4w.config;
var m_data      = b4w.data;
var m_preloader = b4w.preloader;
var m_ver       = b4w.version;

var m_main      = b4w.main;

var APP_ASSETS_PATH = '/path/to/b4w/assets/';

export function b4w_init() {
    m_app.init({
      canvas_container_id: 'canvas_container_1',
      callback: init_cb,
      physics_enabled: false,
      show_fps: false,
      console_verbose: false,
      autoresize: true,
      force_container_ratio: 1,
      alpha: true,
    });
}
...
 
Please register or log in to leave a reply.