How to display only selected gltf model via dropdown?

Questions
,
1

Hi. I have multiple gltf models and I’d like to display only selected one to the camera. I’m able to display all the model names in dropdown list but now i’m stuck. Here is the main part of the code:

					const loader = new GLTFLoader().setPath('models/gltf/modeldatabase/');
					for (let i = 0; i < prefabcontainer.length; i++) {

						let prefabResource = prefabcontainer[i];

						loader.load(prefabResource, function (gltf) {

							object = gltf.scene;
							object.scale.set(5, 5, 5);
							
							var select = document.getElementById("selectPrefab");
							prefabResource = prefabResource.replace(/\..+$/, '');
							var prefabElement = document.createElement("option");
							prefabElement.textContent = prefabResource;
							prefabElement.value = prefabResource;
							select.appendChild(prefabElement);

								window.UpdateDropdown = function () {

									document.getElementById("header").innerHTML = select.options[select.selectedIndex].value; //testing purposes

								}

							scene.add(object);
							render();
							
						}, undefined, function (error) {
							console.error(error);
						})

Here is the html part:

<div id="header"></div>
<div><select id="selectPrefab" onchange="UpdateDropdown()">
</select></div>

I would really appreciate the help.
Thank you.

2

disregard if this isn’t what you want, but i would change the approach. for such a small task the code above already seems complex and checks a couple of anti patterns: it queries the view, mutates it, no clean up. the UI is essentially the result of semi-random operations and race conditions (for instance when you change the selection while something else is loading).

Screenshot 2022-07-04 at 22.54.13
Screenshot 2022-07-04 at 22.54.132112×1256 70.1 KB

3

Thank you very much! This helped me a lot. One question though: how do I make proper reference to the models? Here is that line:

const MODELS = {
  Beech: 'https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-beech/model.gltf',
  Lime: 'https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-lime/model.gltf',
  Spruce: 'https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-spruce/model.gltf'
}

I kinda understand everything else and I can edit the scene but it gives me lot of errors if I replace tree models with my own. I stored my models locally with textures in public/models/ folder. Which is the proper way to store models?

4

these come from https://market.pmnd.rs

if you host your own typically you drop them into the /public folder at the root, the url then becomes /foo.glb if that files resides in /public. generally web dev needs a bundler to function, not sure which one you use, i prefer vite, but they all have something like public.

5

I think I’m good for now. Thanks for help!