如何为粒子（PointsMaterial）创建鼠标交互，以便鼠标移动扭曲对象的形状

Question

我有点卡住了。我正在尝试使用 Three.js 创建一种效果，将鼠标移动到某些粒子上时，移动会扭曲粒子创建的对象的形状，几乎类似于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);
}

有什么想法可以引导我走上正确的道路吗？谢谢。

Answer 1

以下是您想要执行的操作的示例： https://trijs.org/examples/?q=points#webgl_interactive_points