Rotate object on itself axis.

24 July 2017 14:29
Hi, there!
How I must to do, with mouse rotate an object in itself object axis? What is of kind API method I must to use?

Update: This is what I did. How I can set up a camera angles after, change the camera type?

"use strict"

// register the application module
b4w.register("test_project_main", function(exports, require) {

// import modules used by the app
var m_app       = require("app");
var m_cfg       = require("config");
var m_data      = require("data");
var m_preloader = require("preloader");
var m_ver       = require("version");
var m_scenes = require('scenes');
var m_version = b4w.require('version');
var m_fps = require("fps");
var m_ctl = require('controls');
var m_cont =  require('container');
var m_cam = require('camera');
var m_mouse = require('mouse');
var m_trans = require('transform');
var m_phys = require('physics');
var m_obj = require('objects');
var m_const = require('constraints');
var m_quat = require('quat');

// detect application mode
var DEBUG = (m_ver.type() == "DEBUG");

// automatically detect assets path
var APP_ASSETS_PATH = m_cfg.get_assets_path("test_project");

var _vec2_tmp = new Float32Array(2);

 * export the method to initialize the app (called at the bottom of this file)
exports.init = function() {
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        show_fps: DEBUG,
        console_verbose: DEBUG,
        autoresize: true

 * callback executed when the app is initialized 
function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");


    // ignore right-click on the canvas element
    canvas_elem.oncontextmenu = function(e) {
        return false;


 * load the scene data
function load() {
    m_data.load(APP_ASSETS_PATH + "test_project.json", load_cb, preloader_cb);

 * update the app's preloader
function preloader_cb(percentage) {

 * callback executed when the scene data is loaded
function load_cb(data_id, success) {

    if (!success) {
        console.log("b4w load failure");


    var cont = m_cont.get_container();
    cont.addEventListener("mousedown", main_canvas_down, false);

function main_canvas_down(e) {
    if (e.preventDefault) {

    var x = m_mouse.get_coords_x(e);
    var y = m_mouse.get_coords_y(e);

    var obj = m_scenes.pick_object(x, y);

    if (obj) {
        var pos = m_trans.get_translation(obj);
        var cam = m_scenes.get_active_camera();

        switch ( {
            case 'Cube test':
                var pos = m_trans.get_translation(obj);

                m_cam.eye_setup(cam, {look_at: pos});
                    m_cam.eye_setup(cam, {look_at: pos});
                }, 1000);

            case 'Cube Click':
                m_cam.get_camera_angles(cam, _vec2_tmp);

                var pos = m_trans.get_translation(obj);
                m_cam.target_setup(cam, {pivot: pos, dist_lim: {min: 1, max: 10}});


25 July 2017 17:27
Hi Max,
If you have a look at the Bone API, it does some rotating of objects. See the 'View Code' button in the lower left corner when you open this link.

For camera moving, you can do this with Logic Nodes or the camera_anim JavaScript API.
27 July 2017 11:07
If you have a look at the Bone API, it does some rotating of objects. See the 'View Code' button in the lower left corner when you open this link.

Hi, Will. Thank you.
I am a newbie. Only one week, that I use this blend4web engine. The documentation is not full. And API doesn't have an search field.

I have been loaded my scene. Can you check it? I can't select an objects. My mouse cursor is hided.
27 July 2017 16:34
Hi Max,
request_pointerlock(container); on line 107 is what causes your mouse to disappear and 'lock' in to mouse-look mode.
Read about it here.

Unrelated but, you need to add:
var m_trans = require('transform');

because on line 198 you have:
var pos = m_trans.get_translation(obj);
28 July 2017 10:25

Hi, Will. Thank you for your replies. I have a question about this function. May I use this function and select object, when click mouse button 1. I think, in my case I must use ray. But I can't found documentation.

Next question is: How to rotate an object to vector, where the camera is targeted. I mean where the camera saw.

28 July 2017 10:41
May I use this function and select object
I am not sure. I don't understand what you are trying to do.

For rotation, you will be getting into quaternions. There is a thread where I modified the Cartoon Interior code to do some different things. In this code I acquired the rotation data from the camera, reversed it and applied it to the selected object to offset rotation. This was done so I could parent the object to the camera without losing the objects original rotation data. But this might be helpful to your project. It has example code you can download. Cartoon Interior thread.
28 July 2017 11:51
Thanks again for you reply.

Sorry to my English. I want to do this. When I click an object, then I must rotate item, when I clicked. You can understand this, if you load my "test_project". But I can't yet did rotate object. I just create two scenes. And interact it with JS.

Now, I want to do this. When object clicked, it must rotate to angle as "Target" object. But I do something wrong.

Zip file:
28 July 2017 12:33
Have a look at get_rotation() in the Transform module.
And also set_rotation().
So getting your camera rotation data would look like this:
var cam = m_scenes.get_active_camera();
            _cam_quat = m_trans.get_rotation(cam, _cam_quat);
            m_quat.invert(_cam_quat, _cam_quat);//you may not need this
            console.log("Camera quat = " + _cam_quat);

Setting that rotation to another object might look like this.
var my_obj = m_scenes.get_object_by_name("my_obj");
            m_trans.set_rotation(my_obj, _cam_quat[0], _cam_quat[1], _cam_quat[2], _cam_quat[3]);
28 July 2017 13:12
Just a thought, but if you are trying to make an object track to or 'look' at the camera, there is a constraint for that.
var cam = m_scenes.get_active_camera();
var my_obj = m_scenes.get_object_by_name("my_obj");
m_cons.append_track(my_obj, cam);
//then to remove the constraint
m_cons.remove(my_obj, true);//true turns it back to where it was, false leaves it in its new position
28 July 2017 13:17
Thank you, Will.

This is my piece of code, where I want to try rotate with animate. But it not work as I wait.

var elapsed_sensor = m_ctl.create_elapsed_sensor();
var delta_rotate = new Float32Array(4);
var rotate = 3;
var obj_rot = new Float32Array(4);
var target_rot = new Float32Array(4);

m_trans.get_translation(obj, obj_pos);
m_trans.get_translation(target, target_pos);

m_trans.get_rotation(obj, obj_rot);
m_trans.get_rotation(target, target_rot);

var main_cb = function(obj, id) {
    var elapsed = m_ctl.get_sensor_value(obj, id, 0);

    m_trans.get_rotation(target, target_rot);
    m_vec4.subtract(obj_rot, target_rot, delta_rotate);
    m_vec4.normalize(delta_rotate, delta_rotate);
    m_vec4.scale(delta_rotate, elapsed * rotate, delta_rotate);
    m_vec4.add(obj_rot, delta_rotate, obj_rot);
    m_trans.set_rotation_v(obj, obj_rot);

m_ctl.create_sensor_manifold(obj, 'HANDLE', m_ctl.CT_CONTINUOUS, [elapsed_sensor], null, main_cb);

What I am do wrong?
Please register or log in to leave a reply.