Пу sh прочь, а затем восстановите мне sh положение при перемещении мыши - PullRequest
Новая
       7

Пу sh прочь, а затем восстановите мне sh положение при перемещении мыши

0 голосов
/ 27 мая 2020

Я создал три простых приложения. js, я хочу переместить меня sh при наведении курсора мыши и восстановить их в предыдущее положение, когда мышь покинет. что-то вроде этой скрипки https://jsfiddle.net/kotman12/5p9tko50/. Я новичок в трех. js и не знаю, как реализовать в моем коде. любая ссылка будет очень полезна. 

var camera, scene, renderer, stats;

            var particles;

			var mouseX = 0, mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			document.addEventListener( 'mousemove', onDocumentMouseMove, false );

			init();
			animate();


			function init() {

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.set( 0, 300, 500 );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xffffff );

				var geometry = new THREE.SphereBufferGeometry( 100, 20, 20 );
				// geometry.rotateX( Math.PI / 2 );
                
				var material = new THREE.MeshNormalMaterial();

				for ( var i = 0; i < 200; i ++ ) {

					particles = new THREE.Mesh( new THREE.SphereBufferGeometry( 100, 20, 20 ), new THREE.MeshNormalMaterial() );
					particles.position.x = Math.random() * 4000 - 2000;
					particles.position.y = Math.random() * 4000 - 2000;
					particles.position.z = Math.random() * 4000 - 2000;
					particles.scale.x = particles.scale.y = particles.scale.z = Math.random() * 1;
					
					scene.add( particles );

				}

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function onDocumentMouseMove( event ) {

				mouseX = ( event.clientX - windowHalfX ) * 10;
				mouseY = ( event.clientY - windowHalfY ) * 10;
			}


			function animate() {
				requestAnimationFrame( animate );
				render();
			}

			function render() {
				var time = Date.now() * 0.0005;

				scene.position.x = Math.sin( time * 0.7 ) * 2000;
				scene.position.y = Math.cos( time * 0.5 ) * 2000;
				scene.position.z = Math.random() * 1;

                
				for ( var i = 1, l = scene.children.length; i < l; i ++ ) {
					scene.children[ i ].lookAt( scene.position );
				}

				camera.position.x += ( mouseX - camera.position.x );
				camera.position.y += ( mouseY - camera.position.y );

				camera.lookAt( scene.position );

				renderer.render( scene, camera );
			}
...