三j和下拉列表：如何仅显示选定的模型？

Question

我想仅显示下拉选项中的选定值（在这种情况下为3D模型）。相机应只能看到一个。这是我坚持的代码部分：

                    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);
                    })

            }

PrefabContainer只是一个简单的JS脚本：

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

export{prefabcontainer};

这是HTML部分：

<div><select id="selectPrefab">

感谢您的帮助，谢谢！

Answer 1

在循环的之外，声明一个数组以保持加载对象。还可以创建一个 document fragment 在生成＆gt; 时保持它们。这样，一旦生成了所有＆gt; s，就只会对DOM进行一个更改。还将的声明选择移至此范围。

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

更改设置＆lt; option＆gt; 的值的行，以便使用索引，并在第一个 defaultSelected 属性设置第一个＆lt; promelt /代码>。为此，使用 [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);
...

声明用于更改可见属性的函数。

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

将加载的对象添加到上面声明的数组中。在第二个和后续的对象上，将可见属性设置为false。在此处查找第一个对象的条件下，将调用呼叫 Render（）。

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

最后，在循环的之外，将生成的＆gt; 的片段添加到＆lt; select＆gt; 中。通过切换可见的预制状态，添加一个事件侦听器以在下拉栏中处理选择。

     } // 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();
+    }