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;

                }
            }

有了这个我得到一个错误： 无法读取未定义的属性 'object' 在 onMouseMove

但是当我之前使用未定义的 for 循环 object 时，代码有效，但我只需要它再次缩小

这是我的 for 循环：

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

编辑：

创建了一个 fiddle，使用 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/three@0.114/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.2.4/dist/gsap.js"></script>

Answer 1

使用更新后的代码试试：

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>

three.js 和 gsap 的 Mousemove 事件

Mousemove event with three.js and gsap

javascript

animation

three.js

mouseevent

gsap