Mousemove событие с тремя. js и gsap - PullRequest
Новая
       34

Mousemove событие с тремя. js и gsap

0 голосов
/ 14 марта 2020

Я пытаюсь выполнить событие mousemove, при котором me sh масштабируется, когда мышь наводит на него курсор, а затем возвращается к исходному размеру, когда мышь больше не находится над ним. Так что я смотрел на другие примеры, и они не используют gsap. Самый близкий, который я видел, - это анимация. 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

Но когда я ранее делал для l oop с неопределенным object, код работает, но Мне просто нужно, чтобы уменьшить масштаб снова

Вот мой для l oop: 

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

РЕДАКТИРОВАТЬ:

создал скрипку, используя для l oop но закомментировал оператор 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>

1 Ответ

1 голос
/ 14 марта 2020

Попробуйте с этим обновленным кодом: 

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>
...