How to make Dynamic Lines?
10 June 2019 15:15
Hello, I am using Spring Framework for my project, so Basically it will contains some complex structure.
And I am trying to working with blend4web to make a great Design for the client.
What I am trying to make is just a simple Line (Straight Line and Curve Line) and some dynamic code based on Data. So when I look here : https://www.blend4web.com/apps/code_snippets/code_snippets.html?scene=lines
I thought it is possible to make a dynamic code with blend4web.
I want to make a simple 2 straight line at first, when left side has X = 0, Y = 0 until X = 0, Y = 100, and then right side has X = 100, Y = 0 until X = 100, Y = 100.
And then create another Line again in below that Line, with X smaller than before (assume that 2 first Line, has width = 100, next 2 line has width = 80, and next 2 line has width = 50)
Thank You
And I am trying to working with blend4web to make a great Design for the client.
// import the app module and start the app by calling the init method
var m_app = b4w.app;
var m_cfg = b4w.config;
var m_data = b4w.data;
var m_geom = b4w.geometry;
var m_mat = b4w.material;
var m_scs = b4w.scenes;
var m_obj = b4w.objects;
var m_trans = b4w.transform;
var m_version = b4w.version;
var APP_ASSETS_PATH = "/js/blend4web"
var DEBUG = (m_version.type() === "DEBUG");
function init() {
m_app.init({
canvas_container_id: "main_canvas_container",
callback: init_cb,
physics_enabled: false,
show_fps: true,
alpha: false,
gl_debug: 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;
}
load();
}
//What we need to Load
function load() {
m_data.load(APP_ASSETS_PATH + "/lines.json", load_cb);
}
//Load what need to be showed
function load_cb(data_id) {
m_app.enable_camera_controls(false, false, false, null, true);
draw_lines();
}
//Draw Lines Here, All Code to Draw
function draw_lines() {
var line_2 = m_scs.get_object_by_name("Line1");
m_mat.set_line_params(line_2, { width: 3,
color: new Float32Array([0.0, 1.0, 1.0, 1.0])
});
var points_2 = new Float32Array([0, 0, 0, 0, 5, 0]);
//X1, Y1, Z1, X2, Y2, Z2,
m_geom.draw_line(line_2, points_2, true);
$.ajax({
async: false,
url:"ajax to my data"
}).done(function(data){
var oldDepth = 0;
for (var i = 0; i < data.length; i++) {
var line1 = m_scs.get_object_by_name("Line1");
var line2 = m_scs.get_object_by_name("Line2");
var positions1 = new Float32Array(3 * data.tvdSchematicTransient.listSection.length);
var positions2 = new Float32Array(3 * data.tvdSchematicTransient.listSection.length);
var section = data[i];
if(section.type != null && section.type !== ""){
//Left Lines
positions1[0] = 100 * i + 1; //x
positions1[1] = 100 * i + 1; //y
positions1[2] = 0; //z
//Right Lines
positions2[0] = 200 * i + 1; //x
positions2[1] = 100 * i + 1; //y
positions2[2] = 0; //z
}
m_geom.draw_line(line1, positions1);
m_geom.draw_line(line2, positions2);
oldDepth = section.depth;
}
});
}
init();
What I am trying to make is just a simple Line (Straight Line and Curve Line) and some dynamic code based on Data. So when I look here : https://www.blend4web.com/apps/code_snippets/code_snippets.html?scene=lines
I thought it is possible to make a dynamic code with blend4web.
I want to make a simple 2 straight line at first, when left side has X = 0, Y = 0 until X = 0, Y = 100, and then right side has X = 100, Y = 0 until X = 100, Y = 100.
And then create another Line again in below that Line, with X smaller than before (assume that 2 first Line, has width = 100, next 2 line has width = 80, and next 2 line has width = 50)
Thank You