线流动修改

src/views/gdMap/map.js

@@ -158,8 +158,6 @@ export class World extends Mini3d {
     this.createInfoPoint()
     // 创建轮廓
     this.createStorke()
-    // 创建标签线
-    // this.createTagLine()
     // 创建圆滑曲线
     this.createSmoothLine([
       [110.9801, 39.8002],
@@ -1453,41 +1451,111 @@ export class World extends Mini3d {
   //   // })
   //   // this.scene.add(tagLineTweenGroup)
   // }
+// createSmoothLine(lngLatArr) {
+//   const z = this.depth + 0.5;
+//   const points = lngLatArr.map(([lng, lat]) => {
+//     const [x, y] = this.geoProjection([lng, lat]);
+//     return new THREE.Vector3(x, z, y);
+//   });
+//   const curve = new THREE.CatmullRomCurve3(points, false, 'catmullrom', 0.5);
+//   const curvePoints = curve.getPoints(100);
+
+//   // 计算每个点的累积距离
+//   let distances = [0];
+//   for (let i = 1; i < curvePoints.length; i++) {
+//     distances[i] = distances[i - 1] + curvePoints[i].distanceTo(curvePoints[i - 1]);
+//   }
+//   const totalLength = distances[distances.length - 1];
+
+//   // 添加距离属性
+//   const geometry = new THREE.BufferGeometry().setFromPoints(curvePoints);
+//   const distanceAttr = new Float32Array(distances);
+//   geometry.setAttribute('aDistance', new THREE.BufferAttribute(distanceAttr, 1));
+
+//   // ShaderMaterial
+//   const material = new THREE.ShaderMaterial({
+//     uniforms: {
+//       color: { value: new THREE.Color(0xff0000) },
+//       dashSize: { value: 0.2 },
+//       gapSize: { value: 0.1 },
+//       totalLength: { value: totalLength },
+//       dashOffset: { value: 0 },
+//     },
+//     vertexShader: `
+//       attribute float aDistance;
+//       varying float vDistance;
+//       void main() {
+//         vDistance = aDistance;
+//         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+//       }
+//     `,
+//     fragmentShader: `
+//       uniform vec3 color;
+//       uniform float dashSize;
+//       uniform float gapSize;
+//       uniform float totalLength;
+//       uniform float dashOffset;
+//       varying float vDistance;
+//       void main() {
+//         float unitLen = dashSize + gapSize;
+//         float dist = mod(vDistance + dashOffset * totalLength, unitLen);
+//         if(dist > dashSize) discard;
+//         gl_FragColor = vec4(color, 1.0);
+//       }
+//     `,
+//     transparent: true
+//   });
+
+//   const line = new THREE.Line(geometry, material);
+//   this.scene.add(line);
+
+//   // 动画
+//   this.time.on("tick", () => {
+//     material.uniforms.dashOffset.value += 0.001; // 控制流动速度
+//     if(material.uniforms.dashOffset.value > 1.0) material.uniforms.dashOffset.value -= 1.0;
+//   });
+
+//   return line;
+// }
 createSmoothLine(lngLatArr) {
   const z = this.depth + 0.5;
+  // 生成原始曲线
   const points = lngLatArr.map(([lng, lat]) => {
     const [x, y] = this.geoProjection([lng, lat]);
     return new THREE.Vector3(x, z, y);
   });
   const curve = new THREE.CatmullRomCurve3(points, false, 'catmullrom', 0.5);
+  // 创建管道几何体（控制宽度）
+  const radius = 0.05; // 控制线条宽度
+  const radialSegments = 8; // 控制管道圆滑度
+  const tubeGeometry = new THREE.TubeGeometry(
+    curve,
+    100,          // 分段数
+    radius,        // 管道半径（即线宽）
+    radialSegments // 径向分段数
+  );
+  // 计算总长度
   const curvePoints = curve.getPoints(100);
-
-  // 计算每个点的累积距离
-  let distances = [0];
+  let totalLength = 0;
   for (let i = 1; i < curvePoints.length; i++) {
-    distances[i] = distances[i - 1] + curvePoints[i].distanceTo(curvePoints[i - 1]);
+    totalLength += curvePoints[i].distanceTo(curvePoints[i - 1]);
   }
-  const totalLength = distances[distances.length - 1];
-
-  // 添加距离属性
-  const geometry = new THREE.BufferGeometry().setFromPoints(curvePoints);
-  const distanceAttr = new Float32Array(distances);
-  geometry.setAttribute('aDistance', new THREE.BufferAttribute(distanceAttr, 1));
-
-  // ShaderMaterial
+  // 修改后的ShaderMaterial
   const material = new THREE.ShaderMaterial({
     uniforms: {
       color: { value: new THREE.Color(0xff0000) },
       dashSize: { value: 0.2 },
       gapSize: { value: 0.1 },
       totalLength: { value: totalLength },
-      dashOffset: { value: 0 }
+      dashOffset: { value: 0 },
     },
     vertexShader: `
-      attribute float aDistance;
+      uniform float totalLength; 
+      varying vec2 vUv;
       varying float vDistance;
       void main() {
-        vDistance = aDistance;
+        vUv = uv;
+        vDistance = uv.x * totalLength; // 使用UV的x分量表示沿管道的距离
         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
       }
     `,
@@ -1498,29 +1566,31 @@ createSmoothLine(lngLatArr) {
       uniform float totalLength;
       uniform float dashOffset;
       varying float vDistance;
+
       void main() {
         float unitLen = dashSize + gapSize;
         float dist = mod(vDistance + dashOffset * totalLength, unitLen);
-        if(dist > dashSize) discard;
+        if(dist > dashSize) discard; // 丢弃间隙部分
+        
         gl_FragColor = vec4(color, 1.0);
       }
     `,
     transparent: true
   });
-
-  const line = new THREE.Line(geometry, material);
-  this.scene.add(line);
-
-  // 动画
+  // 创建网格对象
+  const mesh = new THREE.Mesh(tubeGeometry, material);
+  console.log("mesh", mesh);
+  this.scene.add(mesh);
+  // 保持原有动画逻辑
   this.time.on("tick", () => {
-    material.uniforms.dashOffset.value += 0.001; // 控制流动速度
-    if(material.uniforms.dashOffset.value > 1.0) material.uniforms.dashOffset.value -= 1.0;
+    material.uniforms.dashOffset.value += 0.001;
+    if(material.uniforms.dashOffset.value > 1.0) {
+      material.uniforms.dashOffset.value -= 1.0;
+    }
   });
-
-  return line;
+  return mesh;
 }
 
-
   // 跳转到指定group 
   zoomToFocusMapGroup(group) {
     // 创建一个 Box3 来计算 focusMapGroup 的边界盒