Change object depending on selected option

Questions
,
1

Hello,

I want to switch objects depending on the selection of a select option box. The select option box should be within the canvas.

I´ve made an on change function which gets the text value of the selected option field and stores it as the variable objname. After that I´ve included this variable inside the mtlLoader and objLoader to adjust their links.

Problems:

  • How do I implement that the object gets reseted every time you change the selection. Only the actual selected object should be visible.

  • How do I implenent that always the first object of the select box gets loaded as default within the pageload?

I´ve made a JSFiddle.

Thanks for help.

2

Have you considered to use the same approach like in this example: three.js webgl - loaders - VRML loader

It uses VRMLLoader but it should be no problem to exchange the loader with OBJLoader. The example also shows how to properly remove an asset from the scene, free its resource and then load the next asset.

Is using dat.gui an option for your?

3

Thank you. The example helped me a lot. Now the objects are removing like expected.

I just need to find a way to get the text values inside the const assets.

Previously the select box options were generated via php/ mysql query.

What would be the best way to get these php/ mysql results inside the const assets?

4

Fortunately, there is another example that shows how you can use key/value pairs in dat.gui dropdowns. Check out how UI is managed in: three.js webgl - Depth Texture