Forum

HTML Viewer to Engine

28 February 2015 05:45
#1538
Rollo-s_Son
Hi, me again

How (if this is feasible) would I set up my files so that a Blender scene I'd created for the HTML viewer could be exported as JSON and give the same functionality? To put it another way, how would I combine my scene with your engine when there is no added javascript needed for what I want to do?
28 February 2015 06:29
#1539
Yuri Kovelenov
Hi,

Please check this tut https://www.blend4web.com/en/article/59. You might be interested in method 2.
The Founder | Twitter | Facebook | Linkedin
28 February 2015 20:39
#1540
laishi
Here is video tutorial to help you too https://www.youtube.com/watch?v=Q_srhZvCIgY

If use this code 

<!DOCTYPE html>
<html>
<head>
<script src="b4w.full.min.js"></script>
<script>

var m_app = b4w.require("app");
var m_data = b4w.require("data");

m_app.init({
    canvas_container_id: "body_id",
    callback: load_cb
});

function load_cb() {
    m_data.load("/Json/Monkey.json");
}

</script>
</head>

<body id="body_id"></body>

</html>


But

3D objects in Brower very small , how to set width to 100%
How incude image file in bin file? pack all in .blender?
28 February 2015 22:13
#1541
Alexander Kovelenov
Hi
The simple method to resize the canvas is using main.resize() function. You can get dimenstions from window as follows:
var w = window.innerWidth;
var h = window.innerHeight;
m_main.resize(w, h);

The second method is to resize canvas container element by css (or js if you prefer that) and then use app.resize_to_container().

Currently *.bin files contain only geometry and animation, you can not pack images or sounds in them. Actually that's not an issue, because the browsers "prefer" native *.png and *.jpg files.
Blend4Web Team
https://twitter.com/AlexKowel
01 March 2015 13:04
#1543
laishi
Thanks!

I want set width to 100% ,plz fix my code 

<!DOCTYPE html>
<html>
<head>
<script src="b4w.full.min.js"></script>
<script src="example.js"></script>
<script>

var m_app = b4w.require("app");
var m_data = b4w.require("data");

m_app.init({
    canvas_container_id: "body_id",
    callback: load_cb
});

function load_cb() {
    m_data.load("Monkey.json");    
}

function on_resize() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    m_main.resize(w, h);
}

</script>
</head>

<body id="body_id"></body>

</html>
01 March 2015 14:22
#1545
Alexander Kovelenov
I think the problem is on_resize() is never being executed, you need to register callback, best way to do this in load_cb() function:
window.onresize = on_resize;
on_resize();

(second line is to resize immediately)
Blend4Web Team
https://twitter.com/AlexKowel
01 March 2015 16:25
#1546
Alexander Kovelenov
Also to get the whole picture I'd recommended you to check some of our simple tutorials like Jungle Outpost. Demo. Tutorial.
Blend4Web Team
https://twitter.com/AlexKowel
02 March 2015 14:16
#1549
laishi
Here I use throughout the project file, you can see all my questions arise.
plz use demo Teach me，
02 March 2015 14:54
#1551
Alexander Kovelenov
Hello, I found some issues in your example:
  • No need to load example.js script
  • Module main was not registered
  • Correct execution flow should be: app.init() -> load_cb() -> on_resize() -> main.resize()
  • You need to disable physics by passing physics_enabled: false during initialization (or add uranium.js module to your project if you need some physics)

Working example:
<!DOCTYPE html>
<html>
<head>
<script src="b4w.full.min.js"></script>
<script>

var m_app = b4w.require("app");
var m_data = b4w.require("data");
var m_main = b4w.require("main");

m_app.init({
    canvas_container_id: "body_id",
    callback: load_cb,
    physics_enabled: false
});

function load_cb() {
    m_data.load("Monkey.json");    

    window.onresize = on_resize;
    on_resize();
}

function on_resize() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    m_main.resize(w, h);
}

</script>
</head>

<body id="body_id"></body>

</html>
Blend4Web Team
https://twitter.com/AlexKowel
02 March 2015 16:45
#1554
laishi
ok,work fine!

Thank you for your teaching.

Developers that can solve many problems
 
Please register or log in to leave a reply.