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

Question

我的THREE.Points Object 有以下设置：

        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 来跟踪鼠标 position 与隐藏平面相交，然后相应地更新统一的uMousePosition 。 这也很好用，我将鼠标 position 发送到我的顶点着色器。

现在，我正在尝试使与鼠标保持一定距离d的粒子远离它，当然最接近的粒子会被推开，并且还将重力施加回其原始 position 以在一段时间后恢复一切。

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

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

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

当鼠标在里面时：

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

还有，lerp方法不lerp，粒子直接跳转到他们的position。

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

Answer 1

这就是您如何将其作为第一个近似值：

 body{ overflow: hidden; margin: 0; }

 <script type="module"> import * as THREE from "https://threejs.org/build/three.module.js"; import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js"; import {BufferGeometryUtils} from "https://threejs.org/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>