Load multi tickets and bind them to a dropdown list with vuejs

Grasshopper ShapeDiver
1

Hi guys,

I have binded my dropdown list component in vuejs to my shapedivers models array, I want to change the model by item (ticket) selection accordingly,

Each model object contains an id a name and a ticket,

However on ticket change the scene does not update
what is the correct method to update the scene (by ticket) or dispose it from the viewer in order to load another model ?

Looking forward and much thanks

2

If the number of models is not too big, I would recommend to load several tickets in the same scene and to show or hide the contents of each ticket depending on your value list. In order to do that you need to:

  • Load the viewer without a ticket, and register separate communication plugins for each model ticket.
  • Defer the geometry loading for each model when you load the tickets, so that they are not shown initially but only when you need to.
  • Hide and show the contents of each model based on your value list. There is no simple way to do it in the current viewer, so you need to just list all assets in the scene and toggle them using the toggleGeometry function.

I created a code example for you to review. For better performance, I actually only load the geometry the first time a specific model needs to be displayed (using refreshPluginAsync()). Let me know if you have further questions.

3

Hi Mathieu,

Thank you for the solution and the example code,
I am going adapt it shortly to my vuejs app,