如何用Typescript和R3F基于QuadraticBezierCurve3实现Three.Line2

一、TypeScript 类型扩展（Line2 作为 JSX 元素） #

如果基于 React + @react-three/fiber 开发，默认类型未包含 Line2 系列组件，需手动补充类型声明：

• 新建类型声明文件（如 three-line2.d.ts），添加以下内容：

import * as THREE from 'three';
import { Line2, LineGeometry, LineMaterial } from 'three/examples/jsm/lines/Line2';

declare module '@react-three/fiber' {
  interface ThreeElements {
    line2: Object3DNode<Line2, typeof Line2>;
    lineGeometry: Object3DNode<LineGeometry, typeof LineGeometry>;
    lineMaterial: Object3DNode<LineMaterial, typeof LineMaterial>;
  }
}

• 在 tsconfig.json 的 include 数组中加入该声明文件路径，确保 TS 能识别这些组件的 JSX 类型，之后即可直接在代码中使用 <line2>、<lineGeometry>、<lineMaterial> 标签。

二、Vector3 转 LineGeometry 所需的 number[] 格式 #

LineGeometry 的 setPositions 方法需要扁平化的一维坐标数组，转换方式如下：

• 若需生成平滑弧线，先通过曲线生成点集再扁平化：

import { CatmullRomCurve3, Vector3 } from 'three';

// 假设已获取地球表面两点 pointA、pointB（Vector3 类型）
const curve = new CatmullRomCurve3([pointA, pointB], false, 'catmullrom', 0.5);
const curvePoints = curve.getPoints(50); // 50个点保证弧线平滑

// 将 Vector3 数组转为一维数字数组
const positions = curvePoints.flatMap(v => [v.x, v.y, v.z]);

// 赋值给 LineGeometry
const lineGeometry = new LineGeometry();
lineGeometry.setPositions(positions);

• 若仅需两点直连，直接拼接坐标即可：

const positions = [pointA.x, pointA.y, pointA.z, pointB.x, pointB.y, pointB.z];

三、虚线沿路径动画实现 #

利用 LineMaterial 的虚线属性结合帧更新实现动画：

1. 初始化带虚线配置的 LineMaterial：

const lineMaterial = new LineMaterial({
  color: 0x4287f5,
  linewidth: 6, // 像素级线宽，不受相机距离影响
  dashed: true,
  dashSize: 0.12, // 虚线线段长度
  gapSize: 0.06, // 虚线间隔长度
});

2. 在动画循环中更新虚线偏移量：

// 以 React Three Fiber 的 useFrame 钩子为例
useFrame(() => {
  if (lineMaterial.current) {
    lineMaterial.current.uniforms.dashOffset.value += 0.015;
  }
});

• 调整 dashSize、gapSize 和偏移量递增速度，可适配不同长度的弧线动画需求；若为闭合路径，需保证虚线参数与路径总长度匹配。

内容的提问来源于stack exchange，提问作者jack t