多无人机飞行、航路预警特效

src/components/mapJK.vue

@@ -77,8 +77,8 @@ export default {
     let addThreeNetEvent = null;
     let limitHeightAnalysisEvent = null;
     let reRenderingEvent = null;
-    let pathPipeEvent = null;
-    let flyGLTFEvent = null;
+    let pathPipeInstance = {};
+    let flyGLTFInstances = {};
     let addDrawEvent = null;
     let draw_GeometryMeshPrismEffectEvent = null;
     let symbolPathPipeEvent = null;
@@ -1006,34 +1006,41 @@ export default {
       }
 
       function pathPipe(params){
+        let id = params.id;
         let status = params.status;
-        if(pathPipeEvent){
-          pathPipeEvent.clear();
-          pathPipeEvent = null;
+        if(pathPipeInstance[id]){
+          pathPipeInstance[id].clear();
+          pathPipeInstance[id] = null;
         }
         if(status == "hide"){
           return
         }
-        debugger
-        params.paths = Path.paths
-        pathPipeEvent = new PathPipeEvent({
+        //优化数据
+        //params.paths = Path.paths
+        let pathPipeEvent = new PathPipeEvent({
           view:m_view,
           paths:params.paths,
           color:params.color,
-          pipeRadius:params.pipeRadius
+          pipeRadius:params.pipeRadius,
+          intensity:params.intensity
         });
-        pathPipeEvent.start()
+        pathPipeEvent.start();
+        // 保存实例
+        pathPipeInstance[id] = pathPipeEvent;
       }
       function flyGLTF(params){
+        let id = params.id;
+        debugger
         let status = params.status;
-        if(flyGLTFEvent){
-          flyGLTFEvent.clear();
-          flyGLTFEvent = null;
+        if(flyGLTFInstances[id]){
+          flyGLTFInstances[id].clear();
+          delete flyGLTFInstances[id];
         }
         if(status == "hide"){
           return
         }
-        flyGLTFEvent = new FlyGLTFEvent({
+        debugger
+        let flyGLTFEvent = new FlyGLTFEvent({
           view:m_view,
           path:params.paths,
           speed:0.0001
@@ -1042,6 +1049,8 @@ export default {
         if(params.isFollow){
           flyGLTFEvent.followPath();
         }
+        // 保存实例
+        flyGLTFInstances[id] = flyGLTFEvent;
       }
 
       //需要添加初始路径（手动绘制和自动绘制）结果

src/config/basicTool.json

@@ -643,6 +643,7 @@
         "data": {
           "ActionName": "PathPipe",
           "Parameters": {
+            "id": "1",
             "status": "show",
             "paths": [
               [
@@ -759,6 +760,7 @@
               ]
             ],
             "color": "#438EDB",
+            "intensity": 1.2,
             "pipeRadius": 10
           }
         }
@@ -769,6 +771,7 @@
         "data": {
           "ActionName": "FlyGLTF",
           "Parameters": {
+            "id": "1",
             "status": "show",
             "paths": [
               [

src/units/map/FlyGLTFEvent.js

@@ -19,7 +19,15 @@ class FlyGLTFEvent{
             view: this.view,
             webgl,
             path: this.path,
-            speed: this.speed
+            speed: this.speed,
+            mixer : null,
+            airCraftMixer : null,
+            clock : null,
+            airCraftClock : null,
+            pathProgress : 0, //路径速度
+            pathCurve : null, //路径曲线
+            targetObject : null, //路径飞行的目标对象
+            _camera : null
         })
     }
     clear(){
@@ -31,6 +39,12 @@ class FlyGLTFEvent{
             clearInterval(this.followTimer);
             this.followTimer = null;
         }
+        // 重置所有相关属性
+        this.path = [];
+        this.pathProgress = 0;
+        this.pathCurve = null;
+        this.targetObject = null;
+        this.gridMeshes = [];
     }
     followPath(){
         debugger

src/units/map/PathPipeEvent.js

@@ -9,6 +9,7 @@ class PathPipeEvent{
         this.color = options.color;
         this.pipeRadius = options.pipeRadius;
         this.pathPipeEvent = null;
+        this.intensity = options.intensity;
     }
     start(){
         if(this.pathPipeEvent){
@@ -20,7 +21,8 @@ class PathPipeEvent{
             webgl,
             paths: this.paths,
             color: this.color,
-            pipeRadius: this.pipeRadius
+            pipeRadius: this.pipeRadius,
+            intensity:this.intensity
         })
     }
     clear(){

src/units/threejs/flyGLTF.js

@@ -4,18 +4,16 @@ export const FlyGLTFClass = {
     constructor(options){
         this.webgl = options.webgl;
         this.view = options.view;
-        this.mixer = null;
-        this.airCraftMixer = null;
-        this.clock = null;
-        this.airCraftClock = null;
+        this.mixer = options.mixer;
+        this.airCraftMixer = options.airCraftMixer;
+        this.clock = options.clock;
+        this.airCraftClock = options.airCraftClock;
         this.path = options.path;  //路径点
-        this.pathProgress = 0; //路径速度
+        this.pathProgress = options.pathProgress; //路径速度
         this.speed = options.speed; //飞行速度
-        this.pathCurve = null; //路径曲线
-        this.targetObject = null; //路径飞行的目标对象
-        this.gridMeshes = []; //用于存储路径周边的网格
-        this._camera = null;
-        this.gridSize = options.gridSize || 100;
+        this.pathCurve = options.pathCurve; //路径曲线
+        this.targetObject = options.targetObject; //路径飞行的目标对象
+        this._camera = options._camera;
     },
     initialize(){
         this.mixer = new THREE.AnimationMixer();
@@ -126,16 +124,22 @@ export const FlyGLTFClass = {
         }
 
         if (this.pathCurve && this.targetObject) {
+            debugger
             this.pathProgress += this.speed;
             if (this.pathProgress > 1) this.pathProgress = 0;
 
-            const position = this.pathCurve.getPointAt(this.pathProgress);
-            const tangent = this.pathCurve.getTangentAt(this.pathProgress);
+            try{
+                const position = this.pathCurve.getPointAt(this.pathProgress);
+                const tangent = this.pathCurve.getTangentAt(this.pathProgress);
+                this.targetObject.position.copy(position);
+                this.targetObject.quaternion.setFromUnitVectors(
+                    new THREE.Vector3(0, 0, 1), tangent
+                );
+            }catch(e){
+                console.log("this.pathProgress",this.pathProgress)
+            }
+
 
-            this.targetObject.position.copy(position);
-            this.targetObject.quaternion.setFromUnitVectors(
-                new THREE.Vector3(0, 0, 1), tangent
-            );
 
             this.targetObject.rotation.z = -Math.PI/2;
         }

src/units/threejs/pathPipe.js

@@ -7,6 +7,7 @@ export const PathPipeClass = {
         this.paths = options.paths;
         this.color = options.color;
         this.pipeRadius = options.pipeRadius;
+        this.intensity = options.intensity;
         this.uniforms = null;
         this._camera = null;
     },
@@ -75,7 +76,7 @@ export const PathPipeClass = {
             }
 
             // 使用 TubeGeometry 生成管道几何体
-            let pipeGeometry = new THREE.TubeGeometry(curvePath, 200, 5, 25, false); // 增加段数以平滑曲线
+            let pipeGeometry = new THREE.TubeGeometry(curvePath, 200, this.pipeRadius, 25, false); // 增加段数以平滑曲线
 
             // 创建管道网格
             let pipeMesh = new THREE.Mesh(pipeGeometry, this.material);
@@ -103,7 +104,7 @@ export const PathPipeClass = {
     getMaterial() {
         this.uniforms = {
             scale: { type: "f", value: -1.0 },
-            bias: { type: "f", value: 1.2 },
+            bias: { type: "f", value: this.intensity },
             power: { type: "f", value: 2.3 },
             glowColor: { type: "c", value: new THREE.Color(this.color) },
             textureMap: {