在glsl和三个js中将粒子推离鼠标位置

Question

我的

THREE.Points

对象有以下设置：

        this.particleGeometry = new THREE.BufferGeometry()
        this.particleMaterial = new THREE.ShaderMaterial(
            {
                vertexShader: vshader,
                fragmentShader: fshader,
                blending: THREE.AdditiveBlending,
                depthWrite: false,
                uniforms: {
                    uTime: new THREE.Uniform(0),
                    uMousePosition: this.mousePosition
                }
            }
        )

然后是一些将点放置在球体上的

BufferGeometry

中的代码。效果很好。

我还设置了一个 Raycaster 来跟踪与隐藏平面相交的鼠标位置，然后相应地更新统一的

uMousePosition

。这也很好用，我将鼠标位置发送到我的顶点着色器。

现在我正在尝试使与鼠标有一定距离

d

的粒子远离它，当然，最接近的粒子被推得最远，并且还应用重力回到原来的位置，以在一段时间后恢复所有内容.

这就是我的顶点着色器中的内容：

void main() {
float lerp(float a, float b, float amount) {
    return a + (b - a) * amount;
}

void main() {
    vec3 p = position;

    float dist = min(distance(p, mousePosition), 1.);

    float lerpFactor = .2;

    p.x = lerp(p.x, position.x * dist, lerpFactor);
    p.y = lerp(p.y, position.y * dist, lerpFactor);
    p.z = lerp(p.z, position.z * dist, lerpFactor);//Mouse is always in z=0

    vec4 mvPosition = modelViewMatrix * vec4(p, 1.);
    gl_PointSize = 30. * (1. / -mvPosition.z );
    gl_Position = projectionMatrix * mvPosition;
}
}

这是当鼠标在球体之外时的样子（添加了一个随鼠标位置移动的小球体来指示鼠标位置）

当鼠标在里面时：

外面看起来已经有点正确了，但是鼠标放在里面只会将粒子移回原来的位置，而应该将它们推到更外面的位置。我想我必须以某种方式确定距离的方向。

还有，lerp方法不lerp，粒子直接跳到它们的位置。

所以我想知道如何获得与鼠标的正确距离以始终在某个区域移动粒子，以及如何为 lerp / 重力效果设置动画。

Answer 1

这就是您可以作为第一个近似值的方法：

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {OrbitControls} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import * as BufferGeometryUtils from "https://cdn.skypack.dev/[email protected]/examples/jsm/utils/BufferGeometryUtils.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let marker = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 8), new THREE.MeshBasicMaterial({color: "red", wireframe: true}));
scene.add(marker);

let g = new THREE.IcosahedronGeometry(4, 20);
g = BufferGeometryUtils.mergeVertices(g);
let uniforms = {
  mousePos: {value: new THREE.Vector3()}
}
let m = new THREE.PointsMaterial({
  size: 0.1,
  onBeforeCompile: shader => {
    shader.uniforms.mousePos = uniforms.mousePos;
    shader.vertexShader = `
      uniform vec3 mousePos;
      ${shader.vertexShader}
    `.replace(
      `#include <begin_vertex>`,
      `#include <begin_vertex>
        
        vec3 seg = position - mousePos;
        vec3 dir = normalize(seg);
        float dist = length(seg);
        if (dist < 2.){
          float force = clamp(1. / (dist * dist), 0., 1.);
          transformed += dir * force;
        }
      
      `
    );
    console.log(shader.vertexShader);
  }
});
let p = new THREE.Points(g, m);
scene.add(p);

let clock = new THREE.Clock();

renderer.setAnimationLoop( _ => {
  let t = clock.getElapsedTime();
  marker.position.x = Math.sin(t * 0.5) * 5;
  marker.position.y = Math.cos(t * 0.3) * 5;
  uniforms.mousePos.value.copy(marker.position);
  renderer.render(scene, camera);
})
</script>

Answer 2

感谢@prisoner849 的笔！

如果有人想知道如何处理局部坐标系与世界不再匹配的旋转物体碰撞：

https://codepen.io/benedictlang/pen/WNqEKxo

body{
  position: relative;
  overflow: hidden;
  margin: 0;
  height: 100%;
  width: 100%;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/[email protected]";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import * as BufferGeometryUtils from "https://cdn.skypack.dev/[email protected]/examples/jsm/utils/BufferGeometryUtils.js";

// Create scene, camera, and renderer
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

// Create a marker cylinder
let marker = new THREE.Mesh(
  new THREE.CylinderGeometry(0.5, 0.5, 2, 16),
  new THREE.MeshBasicMaterial({ color: "red", wireframe: true })
);
scene.add(marker);

// Create IcosahedronGeometry and merge vertices
let g = new THREE.IcosahedronGeometry(4, 20);
g = BufferGeometryUtils.mergeVertices(g);

// Define uniforms
let uniforms = {
  mousePos: { value: new THREE.Vector3() }
};

// Define vertex and fragment shaders
let vertexShader = `
  uniform vec3 mousePos;
  varying float vDist;

  void main() {
    vec3 seg = position - mousePos;
    float dist = length(seg);
    float force = clamp(1.0 / (dist * dist), 0.0, 1.0);
    vec3 newPosition = position + normalize(seg) * force;
    vDist = dist;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
    gl_PointSize = 1.0;
  }
`;

let fragmentShader = `
  varying float vDist;

  void main() {
    vec3 color;
    float alpha;
    
    if (vDist < 2.0) {
      color = vec3(1.0, 0.0, 1.0); // Magenta color for particles influenced by the marker
      alpha = 1.0;
    } else {
      color = vec3(0.0, 1.0, 1.0); // Cyan color for particles not influenced by the marker
      alpha = 1.0;
    }
    
    gl_FragColor = vec4(color, alpha);
  }
`;

// Create ShaderMaterial
let material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  transparent: true,
  depthTest: false // Disable depth testing for particles
});

// Create Points object
let p = new THREE.Points(g, material);
scene.add(p);


let clock = new THREE.Clock();

renderer.setAnimationLoop(() => {
  let t = clock.getElapsedTime();
  
  // Rotate the IcosahedronGeometry continuously
  p.rotation.x += 0.01;
  p.rotation.y += 0.01;
  
  // Compute the inverse of the object's world matrix
  p.updateMatrixWorld(); // Ensure the matrix world is up-to-date
  
  // Create a new matrix and copy the world matrix of the geometry
  let inverseMatrix = new THREE.Matrix4().copy(p.matrixWorld).invert();
  
  // Calculate the marker position in local coordinates
  let markerLocalPosition = marker.position.clone().applyMatrix4(inverseMatrix);
  
  // Update the mouse position uniform with the local position
  uniforms.mousePos.value.copy(markerLocalPosition);
  
  // Move the marker
  marker.position.x = Math.sin(t * 0.5) * 5;
  marker.position.y = Math.cos(t * 0.3) * 5;
  
  // Render the scene
  renderer.render(scene, camera);
});

</script>