Customizing colors to model objects

Questions
1

hi friends,
i wanted to do some dynamic models during onclick method i wanted to apply colors on different parts of model i have created it but in my raycast onclick function my onclick is not working i am getting an error:-(Uncaught TypeError: Cannot read properties of undefined (reading ‘test’)
at Qc (three.min.js:2:550448)
at Zc.intersectObjects (three.min.js:2:552086)
at HTMLCanvasElement.onClick (onclick.html:176:36)).

so can anyone help me out with this its a humble request. below is my code:-

2 
<script>

        var objects=[];

        var mouse, raycaster;

        var intersects = [];

        var legsMaterial, cushionsMaterial, backMaterial, supportsMaterial, baseMaterial;

        var legs , cushions ,  back, supports, base;  

        var theModel;

        var cameraFar = 5;

        const BACKGROUND_COLOR = 0xf1f1f1;

        const scene = new THREE.Scene();

        scene.background = new THREE.Color(BACKGROUND_COLOR );

        scene.fog = new THREE.Fog(BACKGROUND_COLOR, 20, 100);

       

        camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000);

        camera.position.z = cameraFar;

        camera.position.x = 0;

        //render

        renderer = new THREE.WebGLRenderer({ antialias: true, });

        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.shadowMap.enabled = true;

        renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        renderer.setPixelRatio(window.devicePixelRatio);

        document.body.appendChild(renderer.domElement);

        //controls

        var canvas = renderer.domElement;

        document.body.appendChild(canvas);

        const controls = new THREE.OrbitControls(camera, canvas);

        controls.minDistance = 3;

        controls.maxDistance = 5;

        //window.addEventListener('resize', onWindowResize);

       

        // Add lights

        var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.61 );

            hemiLight.position.set( 0, 50, 0 );

        // Add hemisphere light to scene  

            scene.add( hemiLight );

        var dirLight = new THREE.DirectionalLight( 0xffffff, 0.54 );

            dirLight.position.set( -8, 12, 8 );

            dirLight.castShadow = true;

            dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);

        // Add directional Light to scene    

            scene.add( dirLight );

       

            // Floor

        var floorGeometry = new THREE.PlaneGeometry(5000, 5000, 1, 1);

        var floorMaterial = new THREE.MeshPhongMaterial({color: 0xeeeeee, shininess: 0});

        var floor = new THREE.Mesh(floorGeometry, floorMaterial);

        floor.rotation.x = -0.5 * Math.PI;

        floor.receiveShadow = true;

        floor.position.y = -1;

        scene.add(floor);

   

function init1(){

        var loader = new THREE.GLTFLoader();

       

        loader.load('assets/chair.glb', function(gltf) {

            theModel=gltf.scene;

            theModel.scale.set(1,1,1);

            theModel.rotation.y = Math.PI/4;

            theModel.position.y = -1;

            scene.add( theModel );

            //console.log(theModel);

            var t = theModel.children[0];

            theModel.traverse(function (child) {

            if (child instanceof THREE.Mesh) {

            //console.log(child);

            intersects.push(child)

            legsMaterial = new THREE.MeshPhysicalMaterial( {color: 0xff0000} );

       

            cushionsMaterial = new THREE.MeshStandardMaterial({color: 0xffffff} );

            backMaterial = new THREE.MeshPhysicalMaterial( { color: 0xffffff} );

            supportsMaterial = new THREE.MeshPhysicalMaterial( {color: 0xffffff} );

            baseMaterial = new THREE.MeshPhysicalMaterial( {color: 0xffffff} );

            objects=[

            theModel.getObjectByName( "legs", true ).material=legsMaterial,

            theModel.getObjectByName( "cushions", true ).material=cushionsMaterial,

            theModel.getObjectByName( "back", true ).material=backMaterial,

            theModel.getObjectByName( "supports", true ).material=supportsMaterial,

            theModel.getObjectByName( "base", true ).material=baseMaterial,]

            }

        });

        //scene.add(theModel);

    });

       

            var selected = legs;

            var guiControls = new function() {

             this.color = "#ffae23";

            };

            var gui = new dat.GUI();

            gui.addColor(guiControls, "color")

            .listen()

              function onChange(e) {

                selected.material.color.setStyle(e);

            }

            var raycaster, mouse = { x : 0, y : 0 };

            var raycaster = new THREE.Raycaster();

            var mouse = new THREE.Vector2();

           

            renderer.domElement.addEventListener("click", onClick,false);

            function onClick(event) {

            mouse.x = event.clientX / window.innerWidth * 2 - 1;

            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

                   

            raycaster.setFromCamera(mouse, camera);

            intersects = raycaster.intersectObjects(objects);

            console.log(intersects);

            if (intersects.length > 0) {

            selected = intersects[0].object;

            guiControls.color = selected.material.color.getStyle();

            }

                   

        }

    }
function animate() {

                renderer.render(scene, camera);

                requestAnimationFrame(animate);

               

                if (resizeRendererToDisplaySize(renderer)) {

                    const canvas = renderer.domElement;

                    camera.aspect = canvas.clientWidth / canvas.clientHeight;

                    camera.updateProjectionMatrix();

                }

                }

            animate();

                // Function - New resizing method

                function resizeRendererToDisplaySize(renderer) {

                    const canvas = renderer.domElement;

                    var width = window.innerWidth;

                    var height = window.innerHeight;

                    var canvasPixelWidth = canvas.width / window.devicePixelRatio;

                    var canvasPixelHeight = canvas.height / window.devicePixelRatio;

                    const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height;

                    if (needResize) {

                       

                        renderer.setSize(width, height, false);

                    }

                    return needResize;

                    }

                   

           init1();