Forum

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.

// 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
 
Please register or log in to leave a reply.