Push away and then restore mesh position on mouse move

I’ve created simple three.js application, I want to move mesh on mouse over and restore them to its previous position when mouse leaves.

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 );

        }

/cc

Sorry, but your intended result is not clear. When the mesh should follow the mouse cursor, how can the mouse ever leave the mesh?

1 Like

actually I am new to three.js, but I want achieve background particles effect like this website ‘https://frontierwithin.thorne.com/

If you can suggest some changes in above code will be helpful.