I've been attempting to create a mousemove event that scales the mesh when the mouse hovers over it, and returns it to its original size when the mouse is no longer hovering. I've looked at examples that use tween.js instead of gsap, but my syntax might be incorrect.
Here's the function I'm using:
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;
}
}
When implementing this function, I encounter an error: Cannot read property 'object' of undefined at onMouseMove
The code does work with a for loop that involves undefined object, but I need it to scale down again once the mouse moves away.
Here's the for loop I used:
for(var i = 0; i < intersects.length; i++) {
gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});
};
EDIT:
I have created a fiddle utilizing the for loop while commenting out the if statement:
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e89c809aababedcadb88e58a87">[email protected]</a>/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e14d41304d0e90434221155415">[email protected]</a>/dist/gsap.js"></script>