gas-injection/src/views/vent/comment/threejs/FlyLine.ts

import * as THREE from 'three';
import gsap from 'gsap';

export const flyLine = (lineArray, imgUrl, lineWidth = 0.2) => {
  // 创建纹理加载器
  const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load(imgUrl);
  // 调整纹理为单面的宽度
  texture.repeat = new THREE.Vector2(1, 2);

  // console.log(texture);

  texture.wrapS = THREE.RepeatWrapping;
  // 设置纹理为镜像重复
  // texture.wrapT = THREE.RepeatWrapping;
  texture.wrapT = THREE.MirroredRepeatWrapping;

  // 创建管道几何体
  // 1-创建曲线几何体
  const lineCurve = new THREE.CatmullRomCurve3(lineArray);

  // 2-根据曲线获取曲线上的点
  // const linePoints = lineCurve.getPoints(100);

  // 3-根据点生成几何体
  const geometry = new THREE.TubeBufferGeometry(lineCurve, 100, lineWidth, 2, false);

  // 飞线材质设置
  const material = new THREE.MeshBasicMaterial({
    // color: 0xfff000,
    map: texture,
    transparent: true,
    side: THREE.DoubleSide,
    depthWrite: false,
    blending: THREE.AdditiveBlending,
  });

  const mesh = new THREE.Mesh(geometry, material);

  gsap.to(texture.offset, {
    x: -0.8,
    duration: 1,
    repeat: -1,
    ease: 'none',
  });
  
  return mesh;
};