Forum

User posts Roman Sementsov
21 April 2017 16:08
We could reproduce the issue. I guess, your text editor use wrong encoding type. It should be "UTF-8" but it's not.
Could you try to set encoding type to "UTF-8"? Try to save your files with Sublime Text 2, it uses the "UTF-8" encoding by default.
21 April 2017 16:01
Thanks, you can use the latest Firefox Nightly, it should work fine
21 April 2017 16:00
I noticed, that you enable the "selectable" property for the wrong objects:

It's a little plain, but you need to enable this option for cubes.
21 April 2017 14:02
Hello
What browser do you use? Currently WebVR works only on Firefox Nightly and on Chromium special build.
UPD: we use Firefox Nightly 55.0a1 (2017-04-19) (64-bit)
21 April 2017 11:11
Hello
Could you attach the simple project, demonstrating the issue?
21 April 2017 10:36
Hello
Thanks for the report. We will fix it to the upcoming release
21 April 2017 10:00
День добрый.
Было чуть получше, если бы вы прикрепили простенький пример, воспроизводящий некорректное поведение. Тут как раз релиз скоро, можно будет оперативно внести изменения.
И ещё, на какой системе производили тестирование?
20 April 2017 18:50
Hello.
It looks like our bug. We will try to fix it to the upcoming release.
Thanks
20 April 2017 18:44
Looks nice!
This behaviour looks like a bug, thanks for the report
20 April 2017 18:25
Hello

My next wish would be on how to shrink the code in less lines and / or re-using the functions. I could not do them in a loop or callback function. Or maybe I did not know the right way of coding it. Eventually, I will post the link to the 3D view when I am done. I believe that it looks fantastic at the moment.

I haven't tested this code but I guess it should be something like this:
"use strict";

 b4w.register("3Dmodel-Hat-06_app", function (exports, require) {

     var m_app = require("app");
     var m_cam = require("camera");
     var m_cfg = require("config");
     var m_preloader = require("preloader");
     var m_cont = require("container");
     var m_ctl = require("controls");
     var m_data = require("data");
     var m_scenes = require("scenes");
     var m_time = require("time");
     var m_trans = require("transform");
     var m_vec3 = require("vec3");
     var m_version = require("version");

     var eyes = ["Eye-0", "Eye-2", "Eye-3", "Eye-4", "Eye-5", "Eye-6", "Eye-7", "Eye-1"];
     var targets = ["Eye-0-Target", "Eye-2-Target", "Eye-3-Target", "Eye-4-Target", "Eye-5-Target", "Eye-6-Target", "Eye-7-Target", "Eye-1-Target"];
     var stops = [5, 5, 5, 5, 5, 5, 5, 5, 5];

     var DEBUG = (m_version.type() === "DEBUG");

     var ANIM_TIME = 5;
     var counter = 1;
     var APP_ASSETS_PATH = m_cfg.get_assets_path("3Dmodel-Hat-06");

     var _anim_stop = false;
     var _delta_target = ANIM_TIME;
     var _cam_anim = {
         timeline: -ANIM_TIME,
         starting_eye: new Float32Array(3),
         starting_target: new Float32Array(3),
         final_eye: new Float32Array(3),
         final_target: new Float32Array(3),
         current_eye: new Float32Array(3),
         current_target: new Float32Array(3)
     }

     var _vec3_tmp = new Float32Array(3);

     exports.init = function () {
         m_app.init({
             canvas_container_id: "main_canvas_container",
             callback: init_cb,
             physics_enabled: false,
             alpha: true,
             //show_fps: true,
             autoresize: true,
             // assets_dds_available: !DEBUG,
             //assets_min50_available: !DEBUG,
             console_verbose: true
         });
     }

     function init_cb(canvas_elem, success) {

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

         m_preloader.create_preloader();

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


         load();
     }

     function load() {
         m_data.load(APP_ASSETS_PATH + "3Dmodel-Hat-06.json", load_cb, preloader_cb);
     }

     /**
      * update the app's preloader
      */
     function preloader_cb(percentage) {
         m_preloader.update_preloader(percentage);
     }

     function load_cb(data_id) {
         m_app.enable_camera_controls();
         var camobj = m_scenes.get_active_camera();
         init_camera_animation(camobj);
         var move_camera_element = document.getElementById("start_anim");
         move_camera_element.addEventListener("click", start_action);
         var main_canvas = m_cont.get_canvas();
         main_canvas.addEventListener("mouseup", main_canvas_up);
         main_canvas.addEventListener("mousedown", main_canvas_down);
     }
     function start_action() {
        var counter = 1;
        var main_show = function() {
            var target = m_scenes.get_object_by_name(targets[counter]);
             var eye = m_scenes.get_object_by_name(eyes[counter]);
             if (eye && target) {
                 var camobj = m_scenes.get_active_camera();
                 var pos_view = m_trans.get_translation(eye);
                 var pos_target = m_trans.get_translation(target);
                 m_scenes.show_object(m_scenes.get_object_by_name("Box-Parent"), false);
                 start_camera_animation(camobj, pos_view, pos_target);
             }
             if (counter < eyes.length - 1)
                 setTimeout(function() {
                    counter++;
                    main_show();
                 }, 1000 * stops[counter] + 1000);
        }
        main_show();
     }

     function main_canvas_up(e) {

         if (e.button != 0)
             return;

         if (e.preventDefault)
             e.preventDefault();

         var obj = m_scenes.pick_object(e.clientX, e.clientY);

         if (obj)
             switch (m_scenes.get_object_name(obj)) {
                 case "Box-Parent":
                     var target = m_scenes.get_object_by_name("Cube-Target");
                     var eye = m_scenes.get_object_by_name("Cube-Eye-3");
                     break;
                 case "Cylinder.000":
                     var target = m_scenes.get_object_by_name("Cylinder.000");
                     var eye = m_scenes.get_object_by_name("Cube.001");
                     break;
                 default:
                     return;
             }

         if (eye && target) {
             var camobj = m_scenes.get_active_camera();
             var pos_view = m_trans.get_translation(eye);
             var pos_target = m_trans.get_translation(target);
             start_camera_animation(camobj, pos_view, pos_target);



         }

     }

     function main_canvas_down(e) {

         if (e.button != 0) return;

         var camobj = m_scenes.get_active_camera();

         if (m_ctl.get_sensor_value(camobj, "CAMERA_MOVE", 0) - _cam_anim.timeline < ANIM_TIME) _anim_stop = true;

     }

     function start_camera_animation(camobj, pos_view, pos_target) {
         // retrieve camera current position
         m_cam.target_get_pivot(camobj, _cam_anim.current_target);
         m_trans.get_translation(camobj, _cam_anim.current_eye);

         // set camera starting position
         m_vec3.copy(_cam_anim.current_target, _cam_anim.starting_target);
         m_vec3.copy(_cam_anim.current_eye, _cam_anim.starting_eye);

         // set camera final position
         m_vec3.copy(pos_view, _cam_anim.final_eye);
         m_vec3.copy(pos_target, _cam_anim.final_target);

         // start animation
         _delta_target = ANIM_TIME;
         _cam_anim.timeline = m_time.get_timeline();

         return;
     }

     function init_camera_animation(camobj) {

         var t_sensor = m_ctl.create_timeline_sensor();
         var e_sensor = m_ctl.create_elapsed_sensor();

         var logic_func = function (s) {
             // s[0] = m_time.get_timeline() (t_sensor value)
             return s[0] - _cam_anim.timeline < ANIM_TIME;
         }

         var cam_move_cb = function (camobj, id, pulse) {

             if (pulse == 1) {
                 if (_anim_stop) {
                     _cam_anim.timeline = -ANIM_TIME;
                     return;
                 }

                 m_app.disable_camera_controls();
                 // elapsed = frame time (e_sensor value)
                 var elapsed = m_ctl.get_sensor_value(camobj, id, 1);
                 var delta = elapsed / ANIM_TIME;

                 m_vec3.subtract(_cam_anim.final_eye, _cam_anim.starting_eye, _vec3_tmp);
                 m_vec3.scaleAndAdd(_cam_anim.current_eye, _vec3_tmp, delta, _cam_anim.current_eye);

                 _delta_target -= elapsed;
                 delta = 1 - _delta_target * _delta_target / (ANIM_TIME * ANIM_TIME);
                 m_vec3.subtract(_cam_anim.final_target, _cam_anim.starting_target, _vec3_tmp);
                 m_vec3.scaleAndAdd(_cam_anim.starting_target, _vec3_tmp, delta, _cam_anim.current_target);

                 m_cam.target_set_trans_pivot(camobj, _cam_anim.current_eye, _cam_anim.current_target);

             } else {
                 m_app.enable_camera_controls(false);
                 if (!_anim_stop)
                     m_cam.target_set_trans_pivot(camobj, _cam_anim.final_eye, _cam_anim.final_target);
                 else
                     _anim_stop = false;
             }
         }

         m_ctl.create_sensor_manifold(camobj, "CAMERA_MOVE", m_ctl.CT_CONTINUOUS, [t_sensor, e_sensor], logic_func, cam_move_cb);
     }
 });
 b4w.require("3Dmodel-Hat-06_app").init();