three.js - Threejs圆圈失真

Question

我有一个圆圈（3 个圆圈）连接到鼠标移动：鼠标

为了在鼠标移动时获得这种效果，我有 3 个圆圈：鼠标移动

代码是：

import { useFrame } from "@react-three/fiber";
import { useMemo, useRef } from "react";
import * as THREE from "three";

export function Cursor() {
  const cursorRef = useRef<any>();
  const prevPosition = useMemo(() => new THREE.Vector3(), []);
  const position = useMemo(() => new THREE.Vector3(0, 0, 0), []);

  useFrame(({ mouse, viewport }) => {
    let x = (mouse.x * viewport.width) / 2;
    let y = (mouse.y * viewport.height) / 2;
    position.set(x, y, 2);
    cursorRef.current.children[0].position.lerp(position, 0.08);
    cursorRef.current.children[1].position.lerp(position, 0.075);
    cursorRef.current.children[2].position.lerp(position, 0.07);

    prevPosition.set(x, y, 2);
  });

  return (
    <group ref={cursorRef}>
      <mesh scale={[20, 20, 1]}>
        <circleGeometry args={[1, 20, 20]} />
        <meshBasicMaterial color="black" />
      </mesh>
      <mesh scale={[20, 20, 1]}>
        <circleGeometry args={[1, 20, 20]} />
        <meshBasicMaterial color="black" />
      </mesh>
      <mesh scale={[20, 20, 1]}>
        <circleGeometry args={[1, 20, 20]} />
        <meshBasicMaterial color="black" />
      </mesh>
    </group>
  );
}

我想要重现的效果是“相同的”，但只有边框：

静态鼠标

鼠标移动

我想我最后的提议是错误的，因为我有 3 个圆圈来实现这种效果，我不知道是否有某种方法可以扭曲这样的对象。

你能帮助我吗？