1683594342609.png

項目中菌羽，線段數(shù)據(jù)后端傳過來上萬個谋右，如何我們一條一條線段往里面加确虱，導(dǎo)致頁面性能下降，這個時候曲初，我們可以將所有線段合并成一個
老代碼，也能實(shí)現(xiàn)功能

const lineGroup = new THREE.Group();
      this.bezierPathList.forEach((item) => {
        const [p1, p2, p3, p4] = item.coordinate;
        // 初始化數(shù)據(jù)杯聚，繪制曲線軌跡
        const curve = new THREE.CubicBezierCurve3(
          new THREE.Vector3(p1.x / 1000, 0.1, -p1.z / 1000), // z軸取反
          new THREE.Vector3(p2.x / 1000, 0.1, -p2.z / 1000),
          new THREE.Vector3(p3.x / 1000, 0.1, -p3.z / 1000),
          new THREE.Vector3(p4.x / 1000, 0.1, -p4.z / 1000)
        );
        const points = curve.getPoints(50);
        const geometry = new THREE.BufferGeometry().setFromPoints(points);
        const material = new THREE.LineBasicMaterial({ color: 0xffffff });
        const curveObject = new THREE.Line(geometry, material);
        lineGroup.add(curveObject);
      });
      scene.add(lineGroup);

1臼婆、使用new THREE.LineSegments，(LineSegments是不合并多條線段,具體介紹看官網(wǎng))
2幌绍、生成一個geometry颁褂，對geometry設(shè)置position點(diǎn)（賦值所有的線段點(diǎn)）
代碼如下
合并大量貝塞爾曲線

const geometry = new THREE.BufferGeometry();
      const points = [];
      this.bezierPathList.forEach((item) => {
        const [p1, p2, p3, p4] = item.coordinate;
        // 初始化數(shù)據(jù)故响，繪制曲線軌跡
        const curve = new THREE.CubicBezierCurve3(
          new THREE.Vector3(p1.x / 1000, 0.1, -p1.z / 1000), // z軸取反
          new THREE.Vector3(p2.x / 1000, 0.1, -p2.z / 1000),
          new THREE.Vector3(p3.x / 1000, 0.1, -p3.z / 1000),
          new THREE.Vector3(p4.x / 1000, 0.1, -p4.z / 1000)
        );
        const curves = curve.getPoints(49); // 將線段分割為49+1個點(diǎn)，需要是偶數(shù)颁独，不然會出現(xiàn)奇數(shù)點(diǎn)連接問題
        curves.forEach(v => {
          points.push(v.x, v.y, v.z)
        })
      });
      geometry.setAttribute(
        'position',
        new THREE.Float32BufferAttribute(points, 3)
      );
      const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
      const line = new THREE.LineSegments(geometry, lineMaterial);
      scene.add(line);

合并大量直線

const geometry = new THREE.BufferGeometry();
      const paths = [];
      this.linePathList.forEach((item) => {
        const [p1, p2] = item.coordinate;
        paths.push(
          new THREE.Vector3(p1.x / 1000, 0.1, -p1.z / 1000),
          new THREE.Vector3(p2.x / 1000, 0.1, -p2.z / 1000)
        ); // z軸取反
      });
      geometry.setFromPoints(paths);
      const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
      const line = new THREE.LineSegments(geometry, lineMaterial);
      scene.add(line);