HTML Viewer to Engine
28 February 2015 05:45
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?
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
Hi,
Please check this tut https://www.blend4web.com/en/article/59. You might be interested in method 2.
Please check this tut https://www.blend4web.com/en/article/59. You might be interested in method 2.
28 February 2015 20:39
Here is video tutorial to help you too https://www.youtube.com/watch?v=Q_srhZvCIgY
If use this code
But
3D objects in Brower very small , how to set width to 100%
How incude image file in bin file? pack all in .blender?
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
Hi
The simple method to resize the canvas is using main.resize() function. You can get dimenstions from window as follows:
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.
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
https://twitter.com/AlexKowel
01 March 2015 13:04
Thanks!
I want set width to 100% ,plz fix my code
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
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:
(second line is to resize immediately)
window.onresize = on_resize;
on_resize();
(second line is to resize immediately)
Blend4Web Team
https://twitter.com/AlexKowel
https://twitter.com/AlexKowel
01 March 2015 16:25
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
https://twitter.com/AlexKowel
02 March 2015 14:16
Here I use throughout the project file, you can see all my questions arise.
plz use demo Teach me，
plz use demo Teach me，
02 March 2015 14:54
Hello, I found some issues in your example:
Working 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
https://twitter.com/AlexKowel
02 March 2015 16:45
ok,work fine!
Thank you for your teaching.
Developers that can solve many problems
Thank you for your teaching.
Developers that can solve many problems