How to change meshlambermaterial to shadermaterial when raycasting without making errors

Questions
,
1

Just image something when I hover the image that is raycasting then I will have a new material which will become shader…Here is how it codes

            raycaster.setFromCamera( mouse, camera );

            // calculate objects intersecting the picking ray
            const intersects = raycaster.intersectObjects( scene.children );

            if ( intersects.length > 0 ) {

                if ( INTERSECTED != intersects[ 0 ].object ) {

                    if ( INTERSECTED ) {
                        // console.log(INTERSECTED.material.map.isTexture == true)
                        if (INTERSECTED.material.type == "ShaderMaterial") {
                            INTERSECTED.material = new THREE.MeshLambertMaterial( { map : INTERSECTED.material.uniforms.uTexture , side:THREE.DoubleSide } )
                        } else {
                            INTERSECTED.material = new THREE.MeshLambertMaterial( { map : INTERSECTED.material.map , side:THREE.DoubleSide } )
                        }
                        INTERSECTED.material.color.set( 0xffffff );
                    }
                    // console.log(intersects.length)
                    INTERSECTED = intersects[ 0 ].object;
                    INTERSECTED.material.color.set( 0xff0000 );

                    // THIS IS COMMENT OUT THE SHADER (BECAUSE THERE IS AN ERROR)
                    INTERSECTED.material = new THREE.ShaderMaterial({
                        vertexShader:`
                        `,
                        fragmentShader:`
                        `,
                        uniforms: {
                          uTime: { value: 0.0 },
                          uTexture: { value: new THREE.TextureLoader().load(INTERSECTED.material.map) }
                        },
                        // wireframe: true,
                        side: THREE.DoubleSide
                    })

                    console.log(
                        INTERSECTED.material.map
                    )

                    INTERSECTED.material.dispose();

                }

            } else {

                if ( INTERSECTED ) {

                    if (INTERSECTED.material.type == "ShaderMaterial") {
                        INTERSECTED.material = new THREE.MeshLambertMaterial( { map : INTERSECTED.material.uniforms.uTexture , side:THREE.DoubleSide } )
                    } else {
                        INTERSECTED.material = new THREE.MeshLambertMaterial( { map : INTERSECTED.material.map , side:THREE.DoubleSide } )
                    }
                    INTERSECTED.material.color.set( 0xffffff );

                }

                INTERSECTED = null;

            }

Note that the material.map is come from initial state of LambertMaterial
which is something like this

            var texture = new THREE.TextureLoader().load( elem );
            let geometry = new THREE.PlaneGeometry(0.8, 1.2, 32, 32);

            var material = new THREE.MeshLambertMaterial( { map : texture, side:THREE.DoubleSide } );
            let mesh = new THREE.Mesh( geometry, material );

Now as you see I comment out my shadermaterial because when I’m trying change it to shadermaterial it will counter the INTERSECTED.material.map because it is a shader.

I really don’t get it and this is just how I explain it???

Should this be not the idea or what?

2

You really should not create materials over and over again in your raycasting logic. Instead create your materials once and reuse them. The following line is also not correct:

new THREE.TextureLoader().load(INTERSECTED.material.map)

You probably just want to use INTERSECTED.material.map.