I’m looking to hide a nested model completely from from the body-end.html file.
I am able to do this through changing the material on the object but I was wondering if there is a possibility to hide an object on the highest level (the AssimpFBX$_Translation)?
Because this way a few elements could be grouped and hidden together.
This part of the API isn’t yet official, but you achieve this with:
for (const node of viewer.findNodesOfType('<OBJECT TYPE NAME>')) {
node.hide(); // node.show();
}
The nodes intended to be dynamically hidden/shown must be marked as editable using the Viewer.setNodeTypeEditable('<OBJECT TYPE NAME>') function before the scene is loaded.
Hi,
I’m trying to test the script. But I get an error “viewer.findNodesOfType is not a function”
Do you have any idea?
Could you share a link to your scene, so we could take a look? If the scene isn’t public you can send the link through forum’s PM or support@shapespark.com
Multitaskr_Capital, you need to write it like the following:
var viewer = WALK.getViewer();
viewer.setNodeTypeEditable(‘YourObject’);
for (const node of viewer.findNodesOfType(‘YourObject’)) {
node.hide();
viewer.requestFrame();
}
Hello there! We were able to make the function work! But we are running into an issue now.
Every time we use the hide/ show function it also hides/ shows all the materials that are inside of that node. So because other objects in the scene use the same materials, It hides/ shows things that we did not mean to.
Is there a way to limit the function to only objects and not materials?
I uploaded the scene here, https://multitaskr.shapespark.com/adu_studio_300sqft_test/
The object names we want to hide/ show are “300 PREMIUM STYLE”, “300 MEDIUM STYLE” and “300 STANDARD STYLE”.
Thanks a lot for your help.
I cannot find any hide/show calls in this scene. Do you have a version with your current hide/show code?
Do you call:
var viewer = WALK.getViewer();
viewer.setNodeTypeEditable('300 PREMIUM STYLE');
viewer.setNodeTypeEditable('300 MEDIUM STYLE');
viewer.setNodeTypeEditable('300 STANDARD STYLE');
at the beginning of your script? Marking these objects as editable is important to prevent nodes sharing the same material from being merged as a part of performance optimization.
Hello, sorry for the late reply, you were right. Making the objects as editable fixed the issue.
We only have the scene available locally but I will post it for reference once we load it in our Server.
Thank you so much for your help.
Hello there @wojtek here is one of our scenes with custom hiding code. We can show certain objects depending on the URL name!
https://multitaskr.shapespark.com/adu_studio_300sqft/?layer=LAYER_STANDARD
https://multitaskr.shapespark.com/adu_studio_300sqft/?layer=LAYER_MEDIUM
https://multitaskr.shapespark.com/adu_studio_300sqft/?layer=LAYER_PREMIUM
I would like to ask you if there is a way to change the loading cover picture (maybe thumbnail as well) depending on the URL. We already put the files in the extra-assets folder. But we have not been able to access them.
Thank you!
For the thumbnail it won’t work - the OpenGraph metadata are static - they cannot be modified via JavaScript.
In your custom script you can access the files from extra-assets folder with GitHub - shapespark/shapespark-viewer-api: JavaScript API for interacting with the Shapespark 3D scene.
Hello Wojtek, we have added this part of the code to the body-end.html trying to change the cover image for each URL but it gives us an error. WALK.getExtraAssetUrl is not a function
Then it fails to load any of our custom code. We have successfully run this code locally but somehow it does not load when using Shapespark Cloud.
The extra assets path, so also the WALK.getExtraAssetUrl function is available only after the window has been loaded. Delay this part of the code by executing it from a load event handler: addEventListener('load', ...)
This fixed the issue thank you so much.
