带有three.js和gsap的Mousemove事件

Question

我正在尝试进行mousemove事件，当鼠标悬停在其上时，网格将缩放，然后当鼠标不再悬停在其上方时，网格将恢复其原始大小。因此，我一直在研究其他示例，并且它们不使用gsap。我看到的最接近的是tween.js，所以也许我的语法错误，但是我不知道如何纠正它。

这是我的职能

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;

                }
            }

与此相关的错误：无法读取未定义的属性'对象'在onMouseMove

但是当我以前用未定义的object进行for循环时，代码可以工作，但是我只需要再次按比例缩小]]

这是我的for循环：

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

使用for循环创建了一个小提琴，但是注释了if语句：

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/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.js"></script>

我正在尝试进行mousemove事件，当鼠标悬停在其上时，网格将缩放，然后当鼠标不再悬停在其上方时，网格将恢复其原始大小。所以我一直在寻找...

Answer 1

尝试使用此更新的代码：