在three.js中不通过span进行材质选择

Question

一开始 span 对我有用，然后我从文档和示例中设置了 materialsLib 和 initMaterialSelectionMenus，但现在或者 span 不起作用，然后模型没有出现。 请帮忙！

UPD 问题出在功能上。显然它们被循环或类似的东西。

一些代码 main.html：

<canvas id="c" width="100" height="100" allowtransparency frameborder="no" scrolling="yes"</canvas>
<div id="menu">
  <div></div>
        <span>Kar color: <select id="kar-mat"></select></span><br/><br/>
        <span>Prof color: <select id="pro-mat"></select></span>
</div>
    <style>
        #c {width: 100px; height: 100px; display: block;}
        #menu {position: absolute; left: 1em; top: 1em; padding: 1em; background: rgba(0, 0, 0, 0.8); color: white; font-family: monospace;}
    </style>
    <script type="module" src="./main.js"></script>

main.js：

var karMatSelect = document.getElementById( 'kar-mat' );
var proMatSelect = document.getElementById( 'pro-mat' );
var objParts = {
                karkass: [],
                proff: [],
            };

...

function loadModel() {
    var LOADER = new GLTFLoader();
    LOADER.crossOrigin = true;
    LOADER.load('1.glb',
    (gltf) => {
        console.log('loading complete')
        const objbox = gltf.scene;
        SCENE.add(objbox);
        console.log(objbox);
        objParts.karkass.push(objbox.getObjectByName('karkasidver')); //all objects are [Mesh]es
        objParts.proff.push(objbox.getObjectByName( 'profl' ),);

...

function initMaterials() {
            materialsLib = {
                karkaslib: [
                    new THREE.MeshStandardMaterial( {
                        color: 0x154889, metalness: 1, roughness: 0.2, name: '5005'
                    } ),
                   .....
                proflib: [
                    ......
                    } ),
                ],
            };
        }
        function initMaterialSelectionMenus() {
            function addOption(name, menu) {
                var option = document.createElement( 'option' );
                option.text = name;
                option.value = name;
                menu.add(option);
            }
            materialsLib.karkaslib.forEach( function ( material ) {
                addOption(material.name, karMatSelect);
            } );
            materialsLib.proflib.forEach( function ( material ) {
                addOption(material.name, proMatSelect);
            } );

            karMatSelect.selectedIndex = 2;
            proMatSelect.selectedIndex = 5;
            karMatSelect.addEventListener( 'change', updateMaterials );
            proMatSelect.addEventListener( 'change', updateMaterials );
        }
        function updateMaterials() {
            initMaterials()
            var karkasMat = materialsLib.karkaslib[karMatSelect.selectedIndex];
            var proflMat = materialsLib.karkaslib[proMatSelect.selectedIndex];
            objParts.karkass.forEach(part => part.material = karkasMat);
            objParts.proff.forEach(part => part.material = proflMat);
        }

Answer 1

当我开始项目时，我在控制台中遇到了错误。我做了一些修改来修复它：

1. 在loadModel 我添加了带有initMaterials(); 和initMaterialSelectionMenus(); 的行

    objParts.karkass.push(objbox.getObjectByName('karkasidver'));
    objParts.proff.push(objbox.getObjectByName('profl'));
    console.log(dumpObject(objbox).join('\n')); //-список объектов в сцене
    /* Add function call for initialization*/
    initMaterials();

    updateMaterials();

    /* Add function call for UI initialization*/
    initMaterialSelectionMenus();

1. 我在函数updateMaterials 中添加了对karkasMat 和proflMat 的未定义检查。我还删除了电话initMaterials()。

function updateMaterials() {
    /*  Remove call for initMaterials() */
    var karkasMat = materialsLib.karkaslib[karMatSelect.selectedIndex];
    var proflMat = materialsLib.karkaslib[proMatSelect.selectedIndex];

    /*  added check for empty element */
    if (karkasMat) {
        objParts.karkass.forEach(part => part.material = karkasMat);
    }
    /*  added check for empty element */
    if (proflMat) {
        objParts.proff.forEach(part => part.material = proflMat);
    }
}

3.

function updateCamera() {
   CAMERA.updateProjectionMatrix();

   /* Remove next rows, because animation function already started, and will update controls and render scene*/
   // CONTROLS.update();
   // RENDERER.render(SCENE, CAMERA);
   // animate()
  }

结果

Answer 2

亚历克斯有一个错误： 在function updateMaterials()

var proflMat = materialsLib.karkaslib[proMatSelect.selectedIndex];

而不是

var proflMat = materialsLib.proflib[proMatSelect.selectedIndex];