User posts Roman Sementsov
21 April 2017 16:08
21 April 2017 16:01
21 April 2017 16:00
21 April 2017 14:02
21 April 2017 11:11
21 April 2017 10:36
21 April 2017 10:00
20 April 2017 18:50
20 April 2017 18:44
20 April 2017 18:25
Hello
I haven't tested this code but I guess it should be something like this:
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();