Trigger Transparency through annotations

(Kobar) #1

Hello there,

I am not a big coder and I want to ask if you can give me a specific line whcih I should enter when I want to trigger the opacity / transparency.
I’ve seen some vague threads with “setmaterial” but I am a bit confused.
Can someone please give me a real code line? That would be awesome :slight_smile:

Let’s say I’ve got material names like “bread”, “butter”, “honey”.

Annotation 1 shall make “bread” transparent and the other two materials opaque.

Do I type into the Comment Section of the Annotations something like that?

api.setmaterial (bread, opacity (0));
api.setmaterial (butter, opacity (1));
api.setmaterial (honey, opacity (1));

And when I have the right code, do I really type it into the Comment Section or shall I add this somehow to the homepage when I embed it there … ?

Thanks for your answers in advance. I am a bit desparate.

(Shaderbytes) #2

you cant use the viewer api on the sketchfab domain, i dont know where you got the idea of typing javascript into the annotation comment but obviously you found out that wont work., or even where you got that syntax from? The api function signatures are documented here and can be viewed with ease.

So on an external embed you need to set up the api , listen for annotation changes and set material channel factors and update the materials.

I have a utility which makes using the api a lot easier , but still some coding skill is required , this is not achieved by one line of code. Based on your example above I cant see you coming right on your own very quickly.

Anyway here is the link to my utility :

it has working codepen examples for most things.

here is the link to the actual viewer api :

good luck

(Kobar) #3

Thank you for your answer! As a first try I wanted to load my model with a 50% opacity but sadly it doesn’t work right away :frowning:

I used the code which you wrote on your homepage and exchanged the embedded model to mine. So my cubetest is loading well but it doesn’t apply the opacity change.
Is there a chance that you take a quick look what I missed? So maybe the next step is even easier for me to figure out.

As you can see I copied your js-file into an own js-folder and my material is called “Scene_Material”.

Thank you a lot!

(Shaderbytes) #4

Because you dont have the opacity channel enabled on the model. You can do it in the editor , or you can do it with code in my utility as well , here it is working:

I added a logging function to fist log the state of the material object , as can be seen “enable : false” on the channel is your problem.

I then set the property to true ( this does not actually update the material on its own , it just updates the local copy of the material)

I then log the material object again , this time you can see “enable:true”

I then finally use the line of code you had , this sets the factor and then also updates the material in the api.

you can obviously remove the logging stuff , it was just for learning purposes , you also can simply enable the channel in the editor then you dont have to enable it with code


(Kobar) #5

Ah, thank you! I am nearly there.

I added the code:

sketchfabAPIUtilityInstance.addEventListener(sketchfabAPIUtilityInstance.EVENT_ANNOTATION_CHANGED, someAnnotationListeningFuction)

function someAnnotationListeningFuction(annotationObject){  

under the “setopacity:0” line and when I press any annotation the opacity changes.
So the last thing I need to know is how I can address a certain annotation and I am ready to go.
Is there a way?

For example when I change the line
function someAnnotationListeningFuction(annotationObject)
function someAnnotationListeningFuction(popo)
// the annotation name in my cubetest…
then nothing changes…

I’ve discovered some missing letters in your documentation. Maybe that’s important…
For now I worked with “fuction” instead of “function”

(Shaderbytes) #6

thanks for the typo notification , they have been fixed , I was rushing the last part of the documentation and even though I did try proof read everything it seems some things slipped past me , thanks.

Of coarse you can validate values of properties of the annotation object , changing the argument name for the function wont do anything , this is just a variable ( a pointer to the data )

so you can create conditions that check the name of a annotation, eg :

if ( === "popo"){
  //do whatever here
}else if( === "someotherpopo"){
  // do whatever here

you can also ignore object passed into the function and check the index of the annotation object stored in the utility… eg

function someAnnotationListeningFuction(annotationObject){  
   if(sketchfabAPIUtilityInstance.currentAnnotationIndex === 0){
      // do something here
   }else if(sketchfabAPIUtilityInstance.currentAnnotationIndex === 1){
     // do something here


(Kobar) #7

Ha, I wrapped hours and hours my head around this. I even tried to take a look into the “real” API and tried to configure this:

Haha, but now I realized that also in your last answer is a missing “n” in “Function” and in my code there was also a missing letter at another place.

Finally it works.

Thank you a lot sir. I appreciate your help very much!

(Shaderbytes) #8

well done , good on your for persevering and getting it done , sorry for the typos :wink: