How to create mouse interaction for particles (PointsMaterial) so that the mouse movement distorts shape of object

Questions
, ,
1

Hi. I’m a bit stuck. I am trying to create an effect where on moving the mouse over some particles, the movement distorts the shape of the object the particles are creating something like a combination of this and this . What I currently have is this:

 import * as THREE from "three";
      import { SimplexNoise } from "three/addons/math/SimplexNoise.js";

      // general setup, boring, skip to the next comment

      console.clear();

      var scene = new THREE.Scene();
      scene.background = new THREE.Color("dimgray");

      // var camera = new THREE.PerspectiveCamera(30, innerWidth / innerHeight);
      // camera.position.set(4, 2, 8);
      // camera.lookAt(scene.position);

      const camera = new THREE.PerspectiveCamera(
        30,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      camera.position.z = 8;
      camera.lookAt(scene.position);

      var renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(innerWidth, innerHeight);
      renderer.setAnimationLoop(animationLoop);
      document.body.appendChild(renderer.domElement);

      window.addEventListener("resize", (event) => {
        camera.aspect = innerWidth / innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(innerWidth, innerHeight);
      });

      // next comment

      // some waves with simplex noise

      var geometry = new THREE.PlaneGeometry(6, 4, 150, 100),
        pos = geometry.getAttribute("position"),
        simplex = new SimplexNoise();

      var waves = new THREE.Points(
        geometry,
        new THREE.PointsMaterial({ size: 0.02 })
      );
      waves.rotation.x = -Math.PI / 2;
      scene.add(waves);

      // that's all folks

      function animationLoop(t) {
        for (var i = 0; i < pos.count; i++) {
          var x = pos.getX(i),
            y = pos.getY(i),
            z = 0.5 * simplex.noise3d(x / 2, y / 2, t / 2000);

          pos.setZ(i, z);
        }
        pos.needsUpdate = true;

        renderer.render(scene, camera);
      }

Please may someone help me out. Thank you.

2

actually this:
https://codepen.io/boytchev/pen/OJYGqMP

It would be nice to see what you have tried (apart from changing the camera type). Generally, you need to:

  • capture mouse event to get the position of the mouse cursor
  • move points away from the cursor, when they are too close to it
  • move them back when the cursor goes away
1 Like
3

Yep. Sorry, I should have given the appropriate credit. I got the code from this post. I will most definitely customise the designs as soon as I get mouse interactivity working

I see you mentioned in the post:

You need to add cursor interactivity and that’s all.

This is my first Three.js project so I am not too sure how to accomplish that. Anyways, I might have stumbled on some articles that will help me out so I’ll keep working on it and see how far I go.

4

It is OK, I do not mind having my posted-at-CodePen code reused (actually I’m glad when it is used). My reaction was that it was not clear what you have tried so far. It sounds like “I want to go to Paris, but I’m stuck. Here is a picture of Paris, and here is a picture of my car.”

Here is another demo, which might help you get started with capturing mouse motion (you may reuse and modify any part of it):

https://codepen.io/boytchev/pen/YzdrPPN

Good luck with your project.

3 Likes
5

Awesome, thanks. Yah I don’t quite have the vocabulary to describe what I’m trying to implement but I think it may be a repulsion effect. Will give that a try and see how it goes.