Using Threejs with dropdown menus: Showcasing the chosen model exclusively

Question

Using Threejs with dropdown menus: Showcasing the chosen model exclusively

I am looking to only show the selected value (in this case, the 3D model) from a dropdown menu. The chosen option should be the only one visible in the camera view. I am encountering some difficulty with the following code segment:

                    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);
                        scene.add(object);
                        render();

                    }, undefined, function (error) {
                        console.error(error);
                    })

            }

The 'prefabcontainer' is simply a basic JavaScript script:

let prefabcontainer = [
'shotgun.gltf',
'pistol.gltf'];

export{prefabcontainer};

Here is the HTML snippet involved:

<div><select id="selectPrefab">

Your assistance on this matter is greatly appreciated, thank you!

javascript three.js dropdown gltf 3d-model

Answer 1

Answer №1

Create an array outside the loop to store loaded objects and a DocumentFragment to hold the <options> while generating them. This way, only one DOM change is made after all <option>s are generated. Also, move the declaration of select to this scope.

...
+   const select = document.getElementById("selectPrefab");
+   const prefabObjects = [];
+   const fragment = document.createDocumentFragment();
    for (let i = 0; i < prefabcontainer.length; i++) {
         ...
-        var select = document.getElementById("selectPrefab");
...

Modify the line that sets the value of <option> to use the index and set the defaultSelected property on the first <option>. Use the Option(text, value, defaultSelected) constructor^[MDN].

...
-   var prefabElement = document.createElement("option");
-   prefabElement.textContent = prefabResource;
-   prefabElement.value = prefabResource;
-   select.appendChild(prefabElement);
+   const prefabElement = new Option(prefabResource, i, i === 0);
+   fragment.appendChild(prefabElement);
...

Create a function to change the visible property on a Three.js Object3D and its children.

function traverseSetVisible(startObject, visible) {
    startObject.traverse(function(obj) {
        if(obj.isObject3D) {
            obj.visible = visible;
        }
    });
}

Add the loaded object to the previously declared array. Set the visible property to false on the second and subsequent objects. Conditionally call render() when dealing with the first object.

...
    fragment.appendChild(prefabElement);
+   prefabObjects.push(object);
+   if (i !== 0) {
+       traverseSetVisible(object, false);
+   }
    scene.add(object);
-   render();
+   if (i === 0) {
+       render();
+   }
...

Outside the loop, add the generated <option>s fragment to the <select>. Include an event listener to handle selections in the drop-down by toggling the visible state of the prefabs.

     } // end of for loop
+    select.appendChild(fragment);
+    select.addEventListener('change', function() {
+         const selectedValue = parseInt(select.Value);
+         for (let i = 0; i < prefabObjects.length; i++) {
+              const visible = i === selectedValue;
+              traverseSetVisible(prefabObjects[i], visible);
+         }
+         render();
+    }

Answer 2

Create an array outside the loop to store loaded objects and a DocumentFragment to hold the <options> while generating them. This way, only one DOM change is made after all <option>s are generated. Also, move the declaration of select to this scope.

...
+   const select = document.getElementById("selectPrefab");
+   const prefabObjects = [];
+   const fragment = document.createDocumentFragment();
    for (let i = 0; i < prefabcontainer.length; i++) {
         ...
-        var select = document.getElementById("selectPrefab");
...

Modify the line that sets the value of <option> to use the index and set the defaultSelected property on the first <option>. Use the Option(text, value, defaultSelected) constructor^[MDN].

...
-   var prefabElement = document.createElement("option");
-   prefabElement.textContent = prefabResource;
-   prefabElement.value = prefabResource;
-   select.appendChild(prefabElement);
+   const prefabElement = new Option(prefabResource, i, i === 0);
+   fragment.appendChild(prefabElement);
...

Create a function to change the visible property on a Three.js Object3D and its children.

function traverseSetVisible(startObject, visible) {
    startObject.traverse(function(obj) {
        if(obj.isObject3D) {
            obj.visible = visible;
        }
    });
}

Add the loaded object to the previously declared array. Set the visible property to false on the second and subsequent objects. Conditionally call render() when dealing with the first object.

...
    fragment.appendChild(prefabElement);
+   prefabObjects.push(object);
+   if (i !== 0) {
+       traverseSetVisible(object, false);
+   }
    scene.add(object);
-   render();
+   if (i === 0) {
+       render();
+   }
...

Outside the loop, add the generated <option>s fragment to the <select>. Include an event listener to handle selections in the drop-down by toggling the visible state of the prefabs.

     } // end of for loop
+    select.appendChild(fragment);
+    select.addEventListener('change', function() {
+         const selectedValue = parseInt(select.Value);
+         for (let i = 0; i < prefabObjects.length; i++) {
+              const visible = i === selectedValue;
+              traverseSetVisible(prefabObjects[i], visible);
+         }
+         render();
+    }

Using Threejs with dropdown menus: Showcasing the chosen model exclusively

Answer №1

Similar questions

"Encountering errors when attempting to load partials on the server-side

Non-reactive arrays in Vue.js

Error Alert: Unresponsive JQuery Script

You must use the 'new' keyword to invoke the class constructor NextResponse | Implementing middleware in Next.js | Implementing role-based protection for routes in Next.js |

javascript/node Struggle with JSON parsing

Having more than one bootstrap modal on a single page is not supported

What is the process for generating a tree structure from an HTML element?

Exclude objects with similar ids using a method other than JavaScript's filter()

Stop the ongoing ajax request, initiate a new one, and then resume the initial ajax call

"Failure to update variables within the catch block of the .map() function leads to inconsistencies

Unconventional login processes showcased in Redux-Saga's documentation

What is the best way to position an image on top of a circular object?

Encountered a SyntaxError stating 'Unable to use import statement outside a module' while attempting to utilize three.js

The iFrame that is generated dynamically becomes null when accessed from a page that has been loaded using JQuery

Problem encountered when using ".replace()" function

I am having trouble with my React tutorial for tic tac toe as the handleClick function is not receiving the

Margins are added to cards on the right side

Utilizing Node and Express to promptly respond to the user before resuming the program's

Make sure that the TextBox OnTextChanged event in ASP.NET triggers a "setTimeout" function before the OnClick event is fired

What is the process for inserting specific characters between JavaScript date values?