Mousemove event with three.js and gsap

Question

I am trying to do a mousemove event where the mesh would scale when the mouse hovers over it and then it goes back to its original size when the mouse no longer hovers above it. So I've been looking at other examples and they don,t use gsap. The closest one I've seen is tween.js so maybe my syntax is wrong but I don't know how to rectify it.

Here is my function

function onMouseMove(event) {
 //finding position of mouse
                event.preventDefault();
                mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
                raycaster.setFromCamera(mouse,camera);

      // meshes included in mousemove
                objects.push( mesh);
                objects.push( mesh2 );

//including objects into intersects

                var intersects = raycaster.intersectObjects(objects, true);

    //if statement for intersection
                if ( intersects.length > 0 ) {

                    if ( intersects[ 0 ].object != INTERSECTED ) 
                    {
                        if ( INTERSECTED ) 
//gsap animation
                            INTERSECTED.gsap.to(intersects[0].object.scale, {duration: .7, x: 1.2, y:1.2});
                            INTERSECTED = intersects[ 0 ].object;


                    }
                } else {// there are no intersections 
                        // restore previous intersection object to its original size
                        if ( INTERSECTED ) 
                        gsap.to(intersects[0].object.scale, {duration: .7, x: 1, y:1});

                            INTERSECTED = null;

                }
            }

With this I get an error: Cannot read property 'object' of undefined at onMouseMove

But when I previously did a for loop with undefined object, the code works, but I just need it to scale down again

Here is my for loop:

 for(var i = 0; i < intersects.length; i++) {
                    gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});
                };

EDIT:

created a fiddle, using the for loop but commented out the if statement:

let camera, scene, renderer, cube, cube1;
let raycaster;
let mouse = new THREE.Vector2(), INTERSECTED;
const objects = [];


init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
    camera.position.z = 20;

    scene = new THREE.Scene();

    const geometry = new THREE.BoxBufferGeometry(3,3,3);
    const material = new THREE. MeshBasicMaterial({ color: 0x00ff00 });
     cube = new THREE.Mesh(geometry, material);
     cube.position.y = 5;
    
    scene.add(cube);
    
    
    const geometry1 = new THREE.BoxBufferGeometry(3,3,3);
    const material1 = new THREE. MeshBasicMaterial({ color: 0x00ff00 });
     cube1 = new THREE.Mesh(geometry1, material1);
    
    scene.add(cube1);
    
    raycaster = new THREE.Raycaster();
     renderer = new THREE.WebGLRenderer( { antialias: true } );
		renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    window.addEventListener('mousemove',onMouseMove, false);
		
			
		}

    
		
		// animation
    
   function onMouseMove (event) {

   event.preventDefault();
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  raycaster.setFromCamera(mouse,camera);

  //included in mousemove
 
			objects.push( cube );
            objects.push( cube1 );

   
  var intersects = raycaster.intersectObjects(objects, true);
  
		//working for loop
   for(var i = 0; i < intersects.length; i++) {
        gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});
    }
    

    //not working if statement
    
    /*     
                if ( intersects.length > 0 ) {

                    if ( intersects[ 0 ].object != INTERSECTED ) 
                    {
                        if ( INTERSECTED ) 
                            INTERSECTED.gsap.to(intersects[0].object.scale, {duration: .7, x: 1.2, y:1.2});
                            INTERSECTED = intersects[ 0 ].object;
                            
                            
                    }
                } else {// there are no intersections 
                        // restore previous intersection object (if it exists) to its original size
                        if ( INTERSECTED ) 
                        gsap.to(intersects[0].object.scale, {duration: .7, x: 1.2, y:1.2});
                       
                            INTERSECTED = null;
    
                }
                */
               
   }

   
   
   
function animate() {
	



  
    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

body {
	  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.114/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.2.4/dist/gsap.js"></script>

Answer 1

Try it with this updated code:

let camera, scene, renderer, cube, cube1;
let raycaster;
let mouse = new THREE.Vector2(), INTERSECTED = null;
const objects = [];


init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
	camera.position.z = 20;

	scene = new THREE.Scene();

	const geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
	const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	cube = new THREE.Mesh( geometry, material );
	cube.position.y = 5;

	scene.add( cube );

	const geometry1 = new THREE.BoxBufferGeometry( 3, 3, 3 );
	const material1 = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	cube1 = new THREE.Mesh( geometry1, material1 );

	scene.add( cube1 );

	raycaster = new THREE.Raycaster();
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	window.addEventListener( 'mousemove', onMouseMove, false );

}

function onMouseMove( event ) {

	event.preventDefault();
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
	raycaster.setFromCamera( mouse, camera );

	//included in mousemove

	objects.push( cube );
	objects.push( cube1 );


	var intersects = raycaster.intersectObjects( objects, true );


	if ( intersects.length > 0 ) {

		var object = intersects[ 0 ].object;

		if ( object !== INTERSECTED ) 		{

			INTERSECTED = object;
			gsap.to( INTERSECTED.scale, { duration: .7, x: 1.2, y: 1.2 } );
			

		}

	} else {
	
		if ( INTERSECTED !== null ) {
			
			gsap.to( INTERSECTED.scale, { duration: .7, x: 1, y: 1 } );
			INTERSECTED = null;
	
		}
	
	}

}


function animate() {

	requestAnimationFrame( animate );
	renderer.render( scene, camera );

}

body {
	  margin: 0;
}
canvas {
    display: block;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.114/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.2.4/dist/gsap.js"></script>