В трех. js не работает выбор материала через пролёт - PullRequest
Новая
       5

В трех. js не работает выбор материала через пролёт

0 голосов
/ 08 мая 2020

Сначала у меня работал 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);
        }

Ответы [ 2 ]

0 голосов
/ 09 мая 2020

У Алекса ошибка: в function updateMaterials()

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

вместо

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

0 голосов
/ 08 мая 2020

Когда я запускал проект, у меня были ошибки в консоли. Я внес несколько изменений, чтобы исправить это:

  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();
Я добавил проверки на неопределенность для karkasMat и proflMat в функции updateMaterials. Также я удалил вызов 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()
  }

Результат

...