Searching for a good example of viewer api use: hide/show objects

Has anybody already made use of the hide and show possibilities of nodes? I would like to use the api to let users add or hide layers within my models.

We built the Apple Watch configurator internally:

I also have some simple proof of concept demos I’m happy to share if you run into problems. Here’s one I did for the Kathmandu story (it’s a little buggy due to super-sampling):

And I know @klaasnienhuis had some cool stuff in the pipes.


Here’s an example of navigating the node map + hide/show.
monkey-head.html (8.6 KB)


Thanks James!
I am diving into it and see if I run into trouble!

@miekeroth, I’ve run into some trouble showing and hiding objects. In my case my scene consists of a few objects which have been linked together uploaded as an fbx.

If you want to have some buttons to hide all objects and show only the ones you need you should watch out what you’re hiding. If you hide all objects, you’re also hiding links in the hierarchy which mess things up. You should only hide mesh-objects. Unfortunately you can’t test for that. I check for a combination of properties:

isMesh = (node.type === 'MatrixTransform') && (".fbx") === -1) && ( !== "RootNode");

This only applies to my scenario of course where I hide all and then show a specific object. If you know the exact name of what you’re hiding you don’t need to bother with this check.

1 Like

thanks @klaasnienhuis! I haven’t been able to dive into it further, but this helps a lot.

Hello, I experimented with James’ monkey example above: adjusted it somewhat to see if I can get it to work with my own model. I found it worked fine with viewer version 1.0.0, but not with version 1.1.0. See links below. The console tells me the Iframe element is blocked (security issues??). What should I change to the script to have it work with 1.1.0?

Thanks already for your time!

edit: for future readers, in case you wondered why both models I’m linking to are working fine, the issue was solved below

Hey @4DResearchLab,

it seems that a behavior changed a few versions ago.
When using the API v1.1.0, the scene graph is optimized to improve performance. This also mean that the graph can be different that with older versions.

To disable this behavior, you can add the undocumented option graph_optimizer: 0 when calling client.init. You will then have the same nodes than with version v1.0.0.

We’ll probably improve that in future versions, so that you have more control over these kinds of optimizations.

1 Like

@mauricesvay Ah, I see. The scene graph is totally different indeed, and it replaced the names I gave to my objects (blue_monkey, red_monkey, white_monkey), which isnt so helpful. I was able to find my objects however, replace the object references in the script and make it work without using graph_optimizer: 0. Nevertheless, the chrome console still gives me the message:

> Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "" from accessing a cross-origin frame.

But it does it now at the end, so it seems…

Could you please send me a working example? Your links are dead and when uploading the original monkey-head.html to my server the buttons don’t work.

btw: It is working when starting the html directly from my harddrive.

I’m not exactly sure how I fixed it, but somehow it’s working now:

otherwise now documentation has interactive editable samples, you can fork on jsfillde or codepen
“Parts show/hide” => Viewer API - Examples - Sketchfab