Hiding part of a model before the scene is visible

Im using the api for a configurator, so that means my model have a lot of parts visible by default.

I do hide them as soon as possible but they are always visible for a split second when the model is loaded.

Is there a way or workaround to prevent seeing these part for a fraction of a seconds when the viewer is ready?

There is no current API to do this.
Meanwhile put a quad in front or a cube around the model and then hide it when ready?

For now, we’re missing a viewer api function that would wait for an API call to be allowed to exit “load mode”

api.viewerPreventFirstRender()
api.addEventListener(‘viewerready’, function() {
//… do things…
/// then (an maybe inside callback of getApiNodes or api.hide) call
api.viewerFirstRender()
}

1 Like

I’ve placed models in a sphere before and I’ve tried to do all my material and model setup in promises. But I never seem to be able to hide the model setup from the user consistently. Such a function to start/stop rendering the scene would be very handy in these situations.

@klaasnienhuis are you also looking for a solution “first load” or during a “configurator switch” ? (unload/load a whole configuration all in one go ). In the latter case did you try to set the root of your scene to hide, and then show it ?

Just to be sure why would hide the 3D viewer behind an HTML image/div is not sufficient ?

Did you try having the whole scene at opacity blend set to max in 3d settings (making all parts invisible), load the model, do the changes and then reset blending to good values in viewer-api ?

Hi @paul_sketch, I’m looking for a “first load” solution.

I’m currently hiding the 3d viewer behind a “loading” div. Though, it’s hard to find the exact moment all the initial edits are ready and the loading stage is over. One of my intial edits is moving the camera to the startup location. I’m listening to the camerastop event which should indicate this final edit is done. However, I always seem to catch a few material edits which are still visible to the user.

In another case I put all my edits in promises (changing materials, uploading textures, setting the environment, show/hide parts) and listen to when they’re done. Even in that case, I had to add a timeout of about 1.5s before removing my loading div. A dirty solution, and on slow internet speeds not sufficient.

I’ll try to make a codepen to illustrate this issue.