Tengo un modelo 3D de un coche. Me gustaría agregar una función para cambiar el color del vehículo al hacer clic en una de las opciones de color, pero actualmente recibo un error que dice "parent.traverse is not a function" en "at setMaterial" y "HTMLDivElement.selectSwatch ". ¿Alguien puede darse cuenta de lo que estoy haciendo mal?

HTML

 <div class="palette" id="js-palette"> <div class="pallete__slide" id="js-palette-slide"></div> </div>

JavaScript

 let theModel = './cars/scene.gltf' let activeOption = 'Object_59' const colors = [ { color: "000000", }, { color: "545252", }, ]; function buildColors(colors) { for (let [i, color] of colors.entries()) { let colorpalette = document.createElement('div'); colorpalette.classList.add('pallete__colors'); colorpalette.style.background = '#' + color.color; colorpalette.setAttribute('data-key', i); palette.append(colorpalette) } } buildColors(colors) // Swatches const swatches = document.querySelectorAll(".pallete__colors"); for (const colorpalette of swatches) { colorpalette.addEventListener('click', selectSwatch); } function selectSwatch(e) { let color = colors[parseInt(e.target.dataset.key)]; let new_mtl; let new_color = parseInt('0x' + color.color) if (color.texture) { let txt = new THREE.TextureLoader().load(color.texture); txt.repeat.set(color.size[0], color.size[1], color.size[2]); txt.wrapS = THREE.RepeatWrapping; txt.wrapT = THREE.RepeatWrapping; new_mtl = new THREE.MeshPhongMaterial({map: txt, shininess: color.shininess ? color.shininess : 10}); } else { new_mtl = new THREE.MeshPhongMaterial({ color: parseInt('0x' + color.color), shininess: color.shininess ? color.shininess : 10 }); } setMaterial(theModel, activeOption, new_mtl, new_color); } function setMaterial(parent, type, mtl, new_color) { parent.traverse(o => { if (o.isMesh && o.nameID != null) { if (o.nameID == type) { o.material.color.set(new_color); } } }); }