Autorotation without using the webplayer
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>
09 October 2015 19:13
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>
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>
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 17:49
Hello,
You have put the following line at the beginning of your script:
It should look like this:
Sometimes, it is useful to check the console output. It generally says what is the problem.
And please, put your code inside the html or js tags when posting it on the forum. It is much easier to read it then.![]( "smiling")
You have put the following line at the beginning of your script:
var m_cam = camera_anim.require("cam");
It should look like this:
var m_cam = b4w.require("camera_anim");
Sometimes, it is useful to check the console output. It generally says what is the problem.
And please, put your code inside the html or js tags when posting it on the forum. It is much easier to read it then.
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 19:18
You have forgotten to put a quotation mark at the end of the height property of the canvas_id description. And you have put width/height fields twice: in the style description and inside the element description.
Should be like this:
Should be like this:
<div id="container_id" style="position: absolute; left: 0px; top: 0px; width:100%; height: 100%;"></div>
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