Forum

Camera Location and Target Move in HTML

02 April 2017 01:31
Hi

I have made a blend4web scene now hat-3d.json. I made HTML file and can view the model. Can someone help me with the following tasks?

1 - I want to make a button in html and using javascript move the camera to a new location and looking at a new target. I have made empties (empty-camera1) (empty-target1) to get the locations of camera and target.

2 - Please let me know how to control the camera movement speed.

3 - My third question is how to hide and show object visibility using a button in javascript code and html holding the json in canvas.

Thanks
03 April 2017 13:48
Hello and welcome to the forum

1 - I want to make a button in html and using javascript move the camera to a new location and looking at a new target. I have made empties (empty-camera1) (empty-target1) to get the locations of camera and target.

Add a new button to the DOM tree. Then add a new click event listener:
<body>
  <div id="main_canvas_container"></div>
  <div id="move_camera"></div>
</body>

var m_cam_anim = require("camera_anim");
function load_cb(data_id, success) {

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

    m_app.enable_camera_controls();

    // place your code here
    var move_camera_element = document.getElementById("move_camera");
    var cam_obj = m_scenes.get_active_camera();
    var cam_move_cb = function() {
        var pivot_point = new Float32Array(3);
        var pivot_pos_obj = m_scenes.get_object_by_name("empty-target1");
        m_trans.get_translation(pivot_pos_obj, pivot_point);
        m_cam.target_setup(cam_obj, {pivot:pivot_point});
    };
    move_camera_element.addEventListener("click", function(e) {
        var final_pos_obj = m_scenes.get_object_by_name("empty-camera1");
        m_cam.static_setup(cam_obj);
        m_cam_anim.move_camera_to_point(cam_obj, final_pos_obj, 1.0, 0.5, cam_move_cb);
    }, false);
}

You can read more about this method in our doc
Blend4Web developer
03 April 2017 13:52
2 - Please let me know how to control the camera movement speed.

Try this code line with your parameters:
m_cam.set_velocities(m_scenes.get_active_camera(), {trans:1,rot:0.01,zoom:2})
Blend4Web developer
03 April 2017 13:57
3 - My third question is how to hide and show object visibility using a button in javascript code and html holding the json in canvas.

Be sure that the Force Dynamic Object is enabled in Blender


var show_hide_element = document.getElementById("YOUR_ID");
show_hide_element.addEventListener("click", function(e) {
        var object = m_scenes.get_object_by_name("MY_OBJECT_NAME_FROM_BLENDER");
        if (m_scenes.is_hidden(object))
             m_scenes.show_object(object);
        else
             m_scenes.hide_object(object);
    }, false);
Blend4Web developer
03 April 2017 19:19
Please refer to my last post. I will update the files for this presentation.
04 April 2017 02:30
Hi Again

It works. Camera moves to the new location and at the end the camera target jumps to the target chosen.

I wish I could move the camera and at the same time target transitions to the new target while camera is moving. How can do that?
04 April 2017 10:55
Hello.

m_cam_anim.move_camera_to_point translates and rotates the camera. You can rotate the "Camera-State1-Empty-target" object in Blender so that it points to the target empty object(now it's "Camera-State1-Empty"). And the move_camera_to_point method will rotate the camera and there will be no jumps.
Blend4Web developer
05 April 2017 01:52
Thank you for the help and support. I am slowly getting a hang of it.

I cheated a bit here and used the code from one of the snippet and works awesome. It calculates the location of present and final target location and manages the transition. However I could not manage to go to four EYE-TARGET points and pause. Can you please help again.

By the way the above answer did not work for me.


Here is the code again

Please see me last post here….

——————————————

Thank you very much for the support.
05 April 2017 17:56
Hello
Take a look at this example, it's easier than that code snippet
Here are the source files
Blend4Web developer
05 April 2017 18:10
I appreciate your help.

Kind regards
 
Please register or log in to leave a reply.