Want to add multiple behaviors to one action. How?

Hi all,

I’ve been trying this on and off for a couple of years now (…) but I still haven’t found a solution.
Here is the small application I have https://miekeroth.eu/apps/buccal_mass.html
the tabs you see give additional information about the objects in the model. When clicked they follow annotations I have added to show the view I want. But I want more functionality: I want the objects to hide with a specific tab and objects colored accordingly. I know how to find the instances, I know how to find the materials, but I can’t (and really I tried) incorporate them into one action. I would love to have the same functionality as I made in this pdf (works only on a desktop or laptop in acrobat and is offline, hence the need) https://miekeroth.nl/wp-content/uploads/2020/01/Eledone-cirrhosa-beak.pdf

All the instructions and examples didn’t show me a solution and I would like to know if I am asking something impossible (what I can’t imagine) or that I have been looking in the wrong direction. I have a suspicion the solution is actually rather simple, but I’m not a programmer.

P.S. If you look at the code in the application you will see a lot of obsolete code. the way I work is test something by just adding it and make sure the initial code still works :wink:

At each click interaction you can do multiple viewer api calls so that they will all take effect ?

 document.getElementById('a0').addEventListener('click', function () {
      api.gotoAnnotation(0, { preventCameraAnimation: false, preventCameraMove: false });

Yes. For example, with the app I am working on right now in mind: if I click “posterior mandibular muscle” I want that to go to a specific view, the specific muscle (posterior mandibular muscle) to get light blue, all the other muscle disappear and the beak (upper and lower) stay the same. Same with the other clicks for a specific view

And I really think I am making it too complex (not regarding functionality but for the code) and I think there is or should be a simple solution. I have been thinking of putting all the calls of a specific click into a separate file to get a bit of cleaner workflow.

The code you show is of course what I need, but I really don’t know how to add numerous and specific instances to it and still have a working code.

O, and where does this code

get the id of that specific object from? I looked in the model inspector and I see totally different numbers in the graph.

this sample logs them too Viewer API - Examples - Sketchfab

Did you try to fork in on codepen, and then replace the uid with your model uid ?
Then check browser devtools console log, you should get a complete list of node with their name/id, etc

(as said in other thread, model inspector id are outdated)

1 Like

Hi Paul,

I am going to work on that now. Thanks!


Cool! I now have the instanceIDs! Thanks Paul!

hm… I was enthusiastically adding code but nothing happened. So I checked with the code I forked from the examples. Only the last call works. I am doing something wrong but what?

Here’s the code:

var success = function(api) {
api.start(function() {
api.addEventListener(‘viewerready’, function() {
api.getSceneGraph(function(err, result) {
if (err) {
console.log(‘Error getting nodes’);
// get the id from that log
var Instanceid = 23;
document.getElementById(‘hide’).addEventListener(‘click’, function() {
document.getElementById(‘show’).addEventListener(‘click’, function() {

		var Instanceid = 5;
        document.getElementById('show').addEventListener('click', function() {
		document.getElementById('hide').addEventListener('click', function() {


funny: I am doing something wrong for sure: even the forum recognizes it :wink:

finally! I got it! And it was as simple as I thought! Again thanks!

Here it is, now I’m diving in to color!