【发布时间】：2020-06-26 03:35:52
【问题描述】：
我正在尝试做一个 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/three@0.114/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.2.4/dist/gsap.js"></script>【问题讨论】：
-
你能用一个活生生的例子来证明这个问题吗？您可以使用此小提琴中的代码：jsfiddle.net/qz1afen9
-
嗨@Mugen87。这是我的小提琴 [链接] (jsfiddle.net/xLd8jwag) 我已经使用 for 循环来演示我的比例，但是当鼠标不再悬停在带有 gsap 的对象上方时，我希望它再次按比例缩小。我已经注释掉了我正在尝试使用的 if 语句
标签： javascript animation three.js mouseevent gsap