Highlight parts of the objects


(Kanoute13) #1

Hi to everyone,

i am working on a 3d configurator.

My first goal is to highlight every different part of the object in the viewport every time that the mouse is over it.

Afterworks i want to load PBR material on the side and be able to drag n drop them in any different part of an object separately.

I tried a lot and i search arround the internet but i didnt find something.

Do someone have any idea for tutorials that i can check or another configurators created by the same way.

Thank you in advance!

best Regards,
Dimitris


(Paul Sketch) #2

I don’t know any tutorial with this exact effects, but can point to API doing that

mouseover => detect which material the mouse is over (https://sketchfab.com/developers/viewer/functions#api-nodeMouseEnter and nodeMouseLeave)

setMaterial => change a material color/transparency https://sketchfab.com/developers/viewer/functions#api-setMaterial


(Kanoute13) #3

Hi,

I did it like this, but my way is very slow

I tried to change the color use only the “index” from the mouse over function, but is not possible.

After all i have to put a for loop into the " api.getMaterialList " in order to match the index with the material right object. This thing make it very slow. I post the code at the bottom.

api.addEventListener(
‘nodeMouseEnter’,
function(index) {
api.getMaterialList(function(err,materials){
console.log(index)
console.log(materials)
var arrayLength= materials.length
for (var i=0; i<arrayLength; i++){
if(index.material.id==materials[i].id){
var y=materials[i];
y.channels.SpecularF0.factor = 0 ; // i change the specular just to make it black
api.setMaterial(y,function(){
console.log(‘material Changed’);
});

                        }
                    }      
                });
            }

(Paul Sketch) #4

here’s how to make it faster :

api.addEventListener(
  'nodeMouseEnter',
  function(info) {        
    var y = info.material;
    y.channels.EmitColor.factor = 1; 
    y.channels.EmitColor.enable = true; 
    y.channels.EmitColor.color = [0.5,0.5,0.0];         
    api.setMaterial(y, function() {
      console.log('highlighted ' + y.name);
    });
  }, {
    pick: 'fast'
  }
);

api.addEventListener(
  'nodeMouseLeave',
  function(info) {
       
    var y = info.material;
    y.channels.EmitColor.factor = 1; 
    y.channels.EmitColor.enable = false; 
    y.channels.EmitColor.color = [0.5,0.5,0.0];         
    
    api.setMaterial(y, function() {
      console.log('highlighted ' + y.name);
    });
    console.log('nodeMouseLeave', info);
  }, {
    pick: 'fast'
  }
);

It does select/unselect, and doesn’t need the material list and uses emitColor for the highlighting.
Note that even in your code you could have requested the material list once, at model load and then reused it across calls


Drag and Drop texture
(Kanoute13) #5

Hi,

it worked!

first of all thank you very much for your front response.

I tried to do it like this, i mean without call the getMaterialList, but it didnt work, wihout have a reference error or something the same time.

In any case you were very helpful!