User posts chlowden
06 June 2017 08:54
Hello
2 years later and it was time to change a couple of details to the page above. I installed the latest version of the blender plugin and just changed a few URLs on my model and exported it as json. But sadly the new export would not work in any browser.
So I figured that maybe the index.html loader page had some old code and downloaded the latest blend4web dev version.
The new page looks like this:
I changed
I also noticed in the new dev package that the old b4w.min.js was not in there and I replaced it
<script src="js/camera_anim.js"></script>
with the latest version.
Now the model loads but I cannot interact with it in any browser except to click on URLs that are embedded in the model.
Before I could move round the model and the model auto-rotated on loading.
Here is a link
to the page
Any help is much appreciated
Thank you
2 years later and it was time to change a couple of details to the page above. I installed the latest version of the blender plugin and just changed a few URLs on my model and exported it as json. But sadly the new export would not work in any browser.
So I figured that maybe the index.html loader page had some old code and downloaded the latest blend4web dev version.
The new page looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<!– Css –>
<link rel="stylesheet" type="text/css" href="css/loader.css" media="screen" />
<!– Script –>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
</head>
<body>
<div class="loader"></div>
<!– Js –>
<script src="js/b4w.simple.min.js"></script>
<script src="js/camera_anim.js"></script>
<script>
var m_app = b4w.require("app");
var m_data = b4w.require("data");
var m_cam = b4w.require("camera_anim");
m_app.init({
canvas_container_id: "container_id",
callback: load_cb,
show_fps: false,
console_verbose: true,
autoresize: true
})
function load_cb() {
m_data.load("170606_CL_BOX04_MERGED_BLEND4WEB_WIREFRAME_APPLY.json", loaded_cb);
}
function loaded_cb() {
m_app.enable_controls();
m_app.enable_camera_controls();
m_cam.auto_rotate(0.15);
}
</script>
<div id="container_id" style="position: absolute; left: 0px; top: 0px; width:100%; height: 100%;"></div>
</body>
</html>I changed
<script src="js/b4w.min.js"></script>
to
[code=js]<script src="js/b4w.simple.min.js"></script>
I also noticed in the new dev package that the old b4w.min.js was not in there and I replaced it
<script src="js/camera_anim.js"></script>
with the latest version.
Now the model loads but I cannot interact with it in any browser except to click on URLs that are embedded in the model.
Before I could move round the model and the model auto-rotated on loading.
Here is a link
http://88.191.217.32:7777/
Any help is much appreciated
Thank you
12 October 2015 18:41
Evgeny
Many thanks for your reply.
I am sure you have pushed me in the right direction bit now I am now getting a strange error in the web browser console ..
And the web page is show blank with the body empty.
I am also wondering about the validity of the line:
Which is what I think I should be calling from what I understand of the method you showed above, in the hope that there is an auto rotate on page load.
I hope that I have formatted better. Thanks again
Many thanks for your reply.
I am sure you have pushed me in the right direction bit now I am now getting a strange error in the web browser console ..
TypeError: f is null …absolute";e.style.left=0;e.style.top=0;e.style.width=f.offsetWidth+"px";e.style….b4w.min.js (ligne 1872, col. 766)And the web page is show blank with the body empty.
I am also wondering about the validity of the line:
m_cam.auto_rotate(1);
Which is what I think I should be calling from what I understand of the method you showed above, in the hope that there is an auto rotate on page load.
I hope that I have formatted better. Thanks again
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<script src="js/b4w.min.js"></script>
<script src="js/camera_anim.js"></script>
<script>
var m_app = b4w.require("app");
var m_data = b4w.require("data");
var m_cam = b4w.require("camera_anim");
m_app.init({
canvas_container_id: "container_id",
callback: load_cb,
show_fps: true,
console_verbose: true,
autoresize: true
})
function load_cb() {
m_data.load("151010_CL_BOX04_MERGED_BLEND4WEB_WIREFRAME_APPLY.json", loaded_cb);
}
function loaded_cb() {
m_app.enable_controls();
m_app.enable_camera_controls();
m_cam.auto_rotate(1);
}
</script>
</head>
<body>
<div id="container_id" style="position: absolute; left: 0px; top: 0px; width:100%; height: 100%;" width="100%" height="100%></div>
</body>
</html>
12 October 2015 16:34
Having read more, I think I am getting closer … just not close enough for it to work. I am inventing some lines as I can't find any references. Please could someone tell me where I am going wrong?
thank you in advance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<script src="js/b4w.min.js"></script>
<script src="js/camera_anim.js"></script>
<script>
var m_app = b4w.require("app");
var m_data = b4w.require("data");
var m_cam = camera_anim.require("cam");
m_app.init({
canvas_container_id: "container_id",
callback: init_cb,
show_fps: true,
console_verbose: true,
autoresize: true
})
function load_cb() {
m_data.load("151010_CL_BOX04_MERGED_BLEND4WEB_WIREFRAME_APPLY.json", loaded_cb);
}
function loaded_cb() {
m_app.enable_controls();
m_app.enable_camera_controls();
m_cam.auto_rotate(1);
}
</script>
</head>
<body>
<div id="container_id" style="position: absolute; left: 0px; top: 0px; width:100%; height: 100%;" width="100%" height="100%></div>
</body>
</html>
thank you in advance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<script src="js/b4w.min.js"></script>
<script src="js/camera_anim.js"></script>
<script>
var m_app = b4w.require("app");
var m_data = b4w.require("data");
var m_cam = camera_anim.require("cam");
m_app.init({
canvas_container_id: "container_id",
callback: init_cb,
show_fps: true,
console_verbose: true,
autoresize: true
})
function load_cb() {
m_data.load("151010_CL_BOX04_MERGED_BLEND4WEB_WIREFRAME_APPLY.json", loaded_cb);
}
function loaded_cb() {
m_app.enable_controls();
m_app.enable_camera_controls();
m_cam.auto_rotate(1);
}
</script>
</head>
<body>
<div id="container_id" style="position: absolute; left: 0px; top: 0px; width:100%; height: 100%;" width="100%" height="100%></div>
</body>
</html>
12 October 2015 16:34
Having read more, I think I am getting closer … just not close enough for it to work. I am inventing some lines a Please could someone tell me where I am going wrong?
thank you in advance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<script src="js/b4w.min.js"></script>
<script src="js/camera_anim.js"></script>
<script>
var m_app = b4w.require("app");
var m_data = b4w.require("data");
var m_cam = camera_anim.require("cam");
m_app.init({
canvas_container_id: "container_id",
callback: init_cb,
show_fps: true,
console_verbose: true,
autoresize: true
})
function load_cb() {
m_data.load("151010_CL_BOX04_MERGED_BLEND4WEB_WIREFRAME_APPLY.json", loaded_cb);
}
function loaded_cb() {
m_app.enable_controls();
m_app.enable_camera_controls();
m_cam.auto_rotate(1);
}
</script>
</head>
<body>
<div id="container_id" style="position: absolute; left: 0px; top: 0px; width:100%; height: 100%;" width="100%" height="100%></div>
</body>
</html>
thank you in advance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<script src="js/b4w.min.js"></script>
<script src="js/camera_anim.js"></script>
<script>
var m_app = b4w.require("app");
var m_data = b4w.require("data");
var m_cam = camera_anim.require("cam");
m_app.init({
canvas_container_id: "container_id",
callback: init_cb,
show_fps: true,
console_verbose: true,
autoresize: true
})
function load_cb() {
m_data.load("151010_CL_BOX04_MERGED_BLEND4WEB_WIREFRAME_APPLY.json", loaded_cb);
}
function loaded_cb() {
m_app.enable_controls();
m_app.enable_camera_controls();
m_cam.auto_rotate(1);
}
</script>
</head>
<body>
<div id="container_id" style="position: absolute; left: 0px; top: 0px; width:100%; height: 100%;" width="100%" height="100%></div>
</body>
</html>
09 October 2015 22:28
Thank you very much for the js file. Now I am a real newbie. From what I can understand from the manual, the page could look like below. But to be honest, I have no idea what I am doing.
Any thought would be very grateful
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<script src="js/b4w.min.js"></script>
<script src="js/addons_camera_anim.js"></script>
<script>
var m_app = b4w.require("app");
var m_data = b4w.require("data");
m_app.init({
canvas_container_id: "container_id",
callback: load_cb
})
function load_cb() {
m_data.load("151009_CL_BOX04_MERGED_BLEND4WEB_WIREFRAME_APPLY.json", loaded_cb);
}
function loaded_cb() {
m_app.enable_controls();
m_app.enable_camera_controls();
}
// check if module exists
if (b4w.module_check("addons_camera_anim"))
throw "Failed to register module: addons_camera_anim";
// register my_module
b4w.register("addons_camera_anim", function(exports, require) {
// import module "version"
var m_version = require("version");
// export print_build_date() from module "my_module"
exports.print_build_date = function() {
// exec function date() from module "version"
console.log("Engine build date: " + m_version.date());
}
});
// import module "my_module"
var m_my_module = b4w.require("my_module");
// exec function print_build_date() from module "my_module"
m_my_module.print_build_date();
</script>
</head>
<body>
Any thought would be very grateful
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<script src="js/b4w.min.js"></script>
<script src="js/addons_camera_anim.js"></script>
<script>
var m_app = b4w.require("app");
var m_data = b4w.require("data");
m_app.init({
canvas_container_id: "container_id",
callback: load_cb
})
function load_cb() {
m_data.load("151009_CL_BOX04_MERGED_BLEND4WEB_WIREFRAME_APPLY.json", loaded_cb);
}
function loaded_cb() {
m_app.enable_controls();
m_app.enable_camera_controls();
}
// check if module exists
if (b4w.module_check("addons_camera_anim"))
throw "Failed to register module: addons_camera_anim";
// register my_module
b4w.register("addons_camera_anim", function(exports, require) {
// import module "version"
var m_version = require("version");
// export print_build_date() from module "my_module"
exports.print_build_date = function() {
// exec function date() from module "version"
console.log("Engine build date: " + m_version.date());
}
});
// import module "my_module"
var m_my_module = b4w.require("my_module");
// exec function print_build_date() from module "my_module"
m_my_module.print_build_date();
</script>
</head>
<body>
09 October 2015 18:48
Hello
I am using the quick app example to load the json file directly without using the webplayer.
I was wondering if there is a way of making the scene have an auto rotation when loaded.
Below is the code. Many thanks for any thoughts.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<script src="js/b4w.min.js"></script>
<script>
var m_app = b4w.require("app");
var m_data = b4w.require("data");
m_app.init({
canvas_container_id: "container_id",
callback: load_cb
})
function load_cb() {
m_data.load("150910_CL_BOX04_MERGED_BLEND4WEB_PIXEL2.json", loaded_cb);
}
function loaded_cb() {
m_app.enable_controls();
m_app.enable_camera_controls();
}
</script>
</head>
<body>
<div id="container_id" style="position: absolute; left: 0px; top: 0px; width: 1024px; height: 768px;" width="1024" height="768"></div>
</body>
</html>
I am using the quick app example to load the json file directly without using the webplayer.
I was wondering if there is a way of making the scene have an auto rotation when loaded.
Below is the code. Many thanks for any thoughts.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<script src="js/b4w.min.js"></script>
<script>
var m_app = b4w.require("app");
var m_data = b4w.require("data");
m_app.init({
canvas_container_id: "container_id",
callback: load_cb
})
function load_cb() {
m_data.load("150910_CL_BOX04_MERGED_BLEND4WEB_PIXEL2.json", loaded_cb);
}
function loaded_cb() {
m_app.enable_controls();
m_app.enable_camera_controls();
}
</script>
</head>
<body>
<div id="container_id" style="position: absolute; left: 0px; top: 0px; width: 1024px; height: 768px;" width="1024" height="768"></div>
</body>
</html>
01 September 2015 16:26
It looks like the safari issue is only at my house. Sorry for the bother.
Concerning opening a new page, as I do not know javascript, I use the simple export and when I opend the exported file, I could not find anything that looks like what you wrote above.
Concerning opening a new page, as I do not know javascript, I use the simple export and when I opend the exported file, I could not find anything that looks like what you wrote above.
31 August 2015 01:08
Just a quick note to say that I have tested on safari and after activating the webgl button, the scene opens but freezes and there is no interaction. On the safari iphone, surprisingly it works. Any ideas why?