Forum

Autorotation without using the webplayer

09 October 2015 18:48 #4305
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>
09 October 2015 19:13 #4306
Hello,

Yes, it is possible. You can use a corresponding method from the camera animation addon.
Blend4Web developer
09 October 2015 22:28 #4310
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>
12 October 2015 16:34 #4345
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>
12 October 2015 16:34 #4346
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>
12 October 2015 17:49 #4351
Hello,

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.
Blend4Web developer
12 October 2015 18:41 #4352
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 ..

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 #4354
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:
<div id="container_id" style="position: absolute; left: 0px; top: 0px; width:100%; height: 100%;"></div>
Blend4Web developer
13 October 2015 09:56 #4362
Thank you so much. I was looking elsewhere. It works for me
 
Please register or log in to leave a reply.