使用 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 读取未定义的属性“对象”

但是当我之前使用 undefined 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/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>