title: Mousemove event with three.js and gsap
body: <p>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.</p>
  
  <p>Here is my function</p>
  
  <pre><code>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 &gt; 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;
  
                  }
              }
  </code></pre>
  
  <p>With this I get an error:
  <strong>Cannot read property 'object' of undefined
      at onMouseMove</strong></p>
  
  <p>But when I previously did a for loop with undefined <code>object</code>, the code works, but I just need it to scale down again</p>
  
  <p>Here is my for loop:</p>
  
  <pre><code> for(var i = 0; i &lt; intersects.length; i++) {
                      gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});
                  };
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>created a fiddle, using the for loop but commented out the if statement:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; intersects.length; i++) {
          gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});
      }
      
  
      //not working if statement
      
      /*     
                  if ( intersects.length &gt; 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 );
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
     margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/three@0.114/build/three.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/gsap@3.2.4/dist/gsap.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>