Posts - Charlie | Blend4Web

29 July 2017 14:01

#18167

Charlie

posts: 50

Hey Will, that's pretty close to what I got, but the build/deploy didn't generate the (if I'm referencing your directory) 'my_project.min.js', it's nowhere to be found.

Thanks

28 July 2017 22:30

#18157

Charlie

posts: 50

Hi all,

I've created a 'starter files' JSON project, built it and deployed it.

After I'd FTP'd it up to my server, the screen was just black.

The console showed that a few files were missing, and on closer inspection the deployed project looks pretty lightweight.

Here's the file structure that deployed:

Top level
-Project Assets Directory
-b4w.simple.min.js
-images (custom folder for the UI)
-Project.html
-Project.min.CSS
-uranium.js
-uranium.js.mem

Second level
-all of my textures (Project Assets Directory)
-Project.JSON (Project Assets Directory)
-Project.bin (Project Assets Directory)

And that's it!

No 'project.js' and there's probably other stuff missing too, considering the amount of dependencies in the project manager framework.

Am I doing something wrong?

Best regards

Charlie

25 July 2017 19:25

#18090

Charlie

posts: 50

OK, NO NEED TO DOWNLOAD.

I looked at your console code and incorporated it within the function, like:

m_mat.inherit_material(donor001, "donorMat", sel, targetMat[0]);

This works!

I don't know why it works, but it does. Can you explain to me what's actually happening, thanks.

Big help!

C

25 July 2017 19:18

#18089

Charlie

posts: 50

Hey Will, thanks for the pointer.

The console returns the name of the material; 'RecMat'.

I'm totally stuck here, so I've uploaded the project. If you wouldn't mind taking a look that would be so helpful, I'm absolutely stuck on this one.

Here's a link to the zip:

www.charlieandmark.co.uk/FROMTHETOP.zip

The project's main HTML file contains the menu and active links (although I'm sure they work fine)

In preview, if you click the large cube on the left, it flips to the right menu, then click the link 'THIS ONE' (at the top), to replicate the problem.

Let me know if you have any luck, I'm banging my head on the wall with this one

Regards

Charlie

25 July 2017 01:22

#18071

Charlie

posts: 50

Hey Guys,

I thought long and hard whether I should post this in the bugs category… I'm pretty new to your framework and js, but after spending hours and hours, with the guidance of a few other forums, I've decided to post.

There's certainly a chance I've missed something, but the coding problem I have seems so obvious, that at the very least, it's an omission, so worth raising.

If I have missed something obvious, please accept my apologies in advance and feel free to move this to a more relevant category.

OK. I've been working with the inherit material feature and the problem in it's simplest form is this… I can declare the object 'to' and the object 'from' as any variable I like, such as:

var donor001 = m_scenes.get_object_by_name("donorCube");

However, it seems there is no other way to declare the materials, other than hardcoding them by name. It is not possible to declare the material as a variable and include it within the inherit.material function.

If I'm wrong, I'm wrong. I'm sorry… Please set me straight and tell me how it's done.

Here's my function code, an explanation and the console output:

Code:

function button_controls() {    

    document.getElementById("action1").addEventListener("click", function(e) {

            
var sel = _selected_obj;        
 
        
var targetMat = m_mat.get_materials_names(sel);             
var donor001 = m_scenes.get_object_by_name("donorCube");

        
m_mat.inherit_material(donor001, "donorMat", sel, targetMat);        
        
        

    console.log(m_scenes.get_object_name(sel));
	console.log(m_mat.get_materials_names(sel));
    });
 }

So my function is mapped to a HTML button and it works fine if both my materials are named. But if you look at the code, I want a 'picked object' to inherit material form a pre-named source.

Looking more closely at this function:

m_mat.inherit_material(donor001, "donorMat", sel, targetMat);

1/ The donor object and it's material are set up correctly.
2/ My selected object; 'sel' works fine if I name it's material, but targetMat doesn't work as a true variable.

I looked at the semantics of the command to start with; 'm_mat.get_materials_names' against 'm_scenes.get_object_by_name'… Obviously one is actually retrieving the object, whilst the other is retrieving the NAME of a material. You can't apply a NAME to an object. Not sure if that's right, but I guess it would make sense.

The console reports that: B4W ERROR: inherit_material(): material "RecMat" not found on the object "RecCube".

So I know the function is working correctly, as RecMat is the right name for the material and RecCube is the right name of the object. If you look at the code again, you'll see that I've set up a log to report the name and material of the selected object. These both return true, with the right names.

So why can't B4W identify a material as a pre-declared variable?

Help appreciated, as this has pretty much put a halt to my current project.

All the best

Charlie

24 July 2017 20:47

#18069

Charlie

posts: 50

I'll probably start this off on a separate topic, as I suspect the 'problem' might actually be an interesting one… Here's a quick rundown on what I've discovered.

The first thing I did was map the standard inherit.material function to my button (when I say 'standard', I mean that I named all of the materials without inheriting them as variables). It worked fine, so I'm pretty sure it's not a button error.

So, I thought I'd take baby steps, by defining the objects (donor and receiving) as variables, but leaving the material names AS names, in speech marks, e.g; "myMaterial".

This also works fine.

The problem arises when I try to declare the material from the 'picked' object as a variable, so let's say the function looks like this:

function botton_controls() {    

    document.getElementById("action1").addEventListener("click", function(e) {
        if (_selected_obj)
            
var sel = _selected_obj;        
    
var tMat = m_mat.get_materials_names(sel); 
              
var c1 = m_scenes.get_object_by_name("donorCube");
var c2 = m_scenes.get_object_by_name("RecCube");
        
m_mat.inherit_material(c1, "donorMat", c2, tMat);        
        
        


    console.log(m_scenes.get_object_name(sel));
	console.log(m_mat.get_materials_names(sel));
    });
 }

So, 'sel' is the 'selected object'. 'tMat' is the material on the selected object (or target object). - The console logs at the bottom, report the names of all objects without any issues, but when the function itself is executed, it fails with the error:

B4W ERROR: inherit_material(): material "RecMat" not found on the object "RecCube".

I know from this, that the declarations are fine, because 'RecMat' is the correct name of the material. The console log also identifies 'RecMat' as the correct material… So why does B4W not identify the presence of the material as the variable 'tMat', when it's inside the inherit.material function?

I'm not 100% that this can be done, I have a terrible feeling that I've hit an API brick wall. Tell me I'm wrong. Please.

23 July 2017 23:05

#18062

Charlie

posts: 50

Hey Guys,

I'm trying to have a 'selected' object inherit material from a 'named' object.

In the API reference, inherit.material uses an example of two 'named' instances, like:

var m_mat = require("material");
var m_scenes = require("scenes");

var cube = m_scenes.get_object_by_name("Cube");
var cube_001 = m_scenes.get_object_by_name("Cube.001");
m_mat.inherit_material(cube, "MyMaterial_1", cube_001, "MyMaterial_2");

This is fine, and I totally get it, but what if the 'target' object was dynamic or selected and it wasn't possible to 'name it' programatically?

I've identified my selected object thus (it's also mapped to a HTML function):

function top_link_click() {    
    document.getElementById("action1").addEventListener("click", function(e) {
        if (_selected_obj)
            var obj = _selected_obj;
console.log(m_scenes.get_object_name(obj));
console.log(m_mat.get_materials_names(obj));
    });
 }

So if I wanted my 'picked' object to inherit a material from a pre-defined 'donor' object, I'm assuming the code would look something like this, but not EXACTLY like this, as it doesn't work…

function top_link_click() {    

    document.getElementById("action1").addEventListener("click", function(e) {
        if (_selected_obj)
            var obj = _selected_obj;

var donor = m_scenes.get_object_by_name("donorCube");
var targetObj = m_scenes.get_object_by_name(obj);
var targetMat = m_mat.get_materials_names(obj);        
        
m_mat.inherit_material(donor, "DonorMat", targetObj, targetMat);        
console.log(m_scenes.get_object_name(obj));
console.log(m_mat.get_materials_names(obj));
    });
 }

I'm so close with my overall solution it's painful. Any pointers, as ever, gratefully received.

Regards

Charlie

23 July 2017 21:46

#18060

Charlie

posts: 50

Gotcha. Thanks

20 July 2017 21:28

#18020

Charlie

posts: 50

Hi all, I'm trying to have this code do a couple of specific things… It's close but no cigar.

I want the JS callback to function on the cube (works fine)
I want the 'pick object' script to return the object name and material name (works fine)
Then I want my external menu to delete the 'selected object'.

I'm currently experiencing 2 issues. My 'pick object' script seems to be trying to select the background as well, i.e. NOT just the object.

Also, the 'unload function' is unloading the entire scene, not the 'selected object'… I'm having lots of problems even though I've spent hours trying, to figure out how a selected object is referenced by any code at all.

Here's my full doc (there are a few bits in there from the cartoon_scene which I'm experimenting with (just ignore).

"use strict"

// register the application module
b4w.register("my_CUBE_main", function(exports, require) {

// import modules used by the app
var m_app       = require("app");
var m_cfg       = require("config");
var m_data      = require("data");
var m_preloader = require("preloader");
var m_ver       = require("version");
var m_logn      = require("logic_nodes");
var m_obj       = require("objects");
var m_mat       = require("material");
var m_scenes    = require("scenes");
var m_trans     = require("transform");
var m_mouse     = require("mouse");    
var m_anim      = require("animation");
var m_cam       = require("camera");
var m_cont      = require("container");
var m_cons      = require("constraints");
var m_ctl       = require("controls");
var m_main      = require("main");
    
    

var _disable_interaction = false;
var _selected_obj = null;
    
    
    
    
// detect application mode
var DEBUG = (m_ver.type() == "DEBUG");

// automatically detect assets path
var APP_ASSETS_PATH = m_cfg.get_assets_path("my_CUBE");

/**
 * export the method to initialize the app (called at the bottom of this file)
 */
exports.init = function() {
    m_app.init({
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        show_fps: DEBUG,
        console_verbose: DEBUG,
        autoresize: true
    });
}

/**
 * callback executed when the app is initialized 
 */
function init_cb(canvas_elem, success) {

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

    
    
    
    
    m_preloader.create_preloader();
    
canvas_elem.addEventListener("mousedown", main_canvas_down);
    
    ////////
//canvas_elem.addEventListener("mouseup", main_canvas_up);
    ///////
    

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

    
    m_logn.append_custom_callback("action", action_cb);
    
    
    load();
}

/**
 * load the scene data
 */
function load() {
    m_data.load(APP_ASSETS_PATH + "my_CUBE.json", load_cb, preloader_cb);
}

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

/**
 * callback executed when the scene data is loaded
 */
function load_cb(data_id, success) {

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

m_app.enable_camera_controls();

///code goes here too///

    
 init_controls();
 
    
    
  }  

    


    
    
    
    
    
    
    
    
    
    

    function action_cb(in_params, out_params) {

console.log("The menu was swapped"); 

       document.getElementById("cssmenu").style.display='none';
       document.getElementById("cssmenu2").style.display='block';
  
    }
    
    
    

      
    
    
    
    
  function main_canvas_down(e) {
   

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

    var x = m_mouse.get_coords_x(e);
    var y = m_mouse.get_coords_y(e);

    var obj = m_scenes.pick_object(x, y);

    // handling outline effect
    if (_selected_obj != obj) {
        if (_selected_obj)
            m_scenes.clear_outline_anim(_selected_obj);
        if (obj)
            console.log(m_scenes.get_object_name(obj));
	console.log(m_mat.get_materials_names(obj));
            m_scenes.apply_outline_anim(obj, 1, 1, 0);

        _selected_obj = obj;
 
   }    
      
  } 
    
    
 
//function main_canvas_up(e) {
//    _drag_mode = false;
    // enable camera controls after releasing the object
 //   if (!_enable_camera_controls) {
 //       m_app.enable_camera_controls();
//        _enable_camera_controls = true;
 //   }
//}
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
function init_controls() {

    //init_buttons();
      
   document.getElementById("action1").addEventListener("click", function(e) {
       console.log("The menu is working");
        if (_selected_obj) {
            var id = m_scenes.get_object_data_id(_selected_obj);
            m_data.unload(id);
            _selected_obj = null;
        }
    });           
              
   
    
    
    
    
    
    
    
    
    
    
              
              
}  
 
    

});

// import the app module and start the app by calling the init method
b4w.require("my_CUBE_main").init();

Any pointers would be gratefully appreciated.

Kind regards

Charlie

19 July 2017 23:04

#17992

Charlie

posts: 50

Hey all, hope you're all well.

I'm using a pick object function, like this:

  function main_canvas_down(e) {

   var x = m_mouse.get_coords_x(e);
   var y = m_mouse.get_coords_y(e);

   var obj = m_scenes.pick_object(x, y);
    
    
   if (obj)
        console.log(m_scenes.get_object_name(obj));
		console.log(m_mat.get_materials_names(obj));
     }

Which works. Only thing is, I'm getting a console error, when I click anywhere OTHER than the object, that reads: 'TypeError: null is not an object (evaluating 'obj.type')'

There's probably a simple way of avoiding this, but I'm not sure what it is. Anyone?

C

Forum

User posts Charlie