增加三维课程事故特效管理模块

src/jlmap3d/lesson3dedit/accident/fire.js

@@ -4,9 +4,9 @@ export function Fire() {
   var last_time_activate = Date.now();
 
 
-  this.init = function(scene){
+  this.createNew = function(scene,pos){
-    scope.points = new Points();
+    scope.points = new Points(pos);
-    scope.points.init();
+    scope.points.init(pos);
     scene.add(scope.points.obj);
   }
 
@@ -77,9 +77,10 @@ export function Fire() {
   };
 
 
-  var Points = function() {
+  var Points = function(pos) {
     this.movers_num = 3000;
     this.movers = [];
+    this.pos = pos;
     this.geometry = null;
     this.material = null;
     this.obj = null;
@@ -88,7 +89,7 @@ export function Fire() {
 };
 
 Points.prototype = {
-    init: function() {
+    init: function(pos) {
         this.createTexture();
         this.geometry = new THREE.Geometry();
         this.material = new THREE.PointsMaterial({
@@ -105,7 +106,7 @@ Points.prototype = {
         for (var i = 0; i < this.movers_num; i++) {
             var mover = new Mover();
 
-            mover.init(new THREE.Vector3((10*Math.random()-49), 1.6, (10*Math.random()+11)));
+            mover.init(new THREE.Vector3((10*Math.random()+pos.x),pos.y, (10*Math.random()+pos.z)));
             this.movers.push(mover);
             this.geometry.vertices.push(mover.position);
         }
@@ -121,7 +122,7 @@ Points.prototype = {
                 mover.applyForce(this.antigravity);
                 mover.updateVelocity();
                 mover.updatePosition();
-                if (mover.position.y > 8) {
+                if (mover.position.y > (this.pos.y+5)) {
                     mover.inactivate();
                 }
             }
@@ -132,6 +133,7 @@ Points.prototype = {
     },
     activateMover: function() {
         var count = 0;
+        let pos = this.pos;
         for (var i = 0; i < this.movers.length; i++) {
             var mover = this.movers[i];
 
@@ -140,7 +142,7 @@ Points.prototype = {
             var rad2 = getRadian(getRandomInt(0, 360));
             var force = getSpherical(rad1, rad2, 1);
             mover.activate();
-            mover.init(new THREE.Vector3((10*Math.random()-49), 5, (10*Math.random()+11)));
+            mover.init(new THREE.Vector3((10*Math.random()+pos.x), pos.y+5, (10*Math.random()+pos.z)));
             mover.applyForce(force);
 
             count++;

src/jlmap3d/lesson3dedit/lesson3deditor.js

@@ -76,8 +76,10 @@ export function Lesson3dEditor(dom,lessonData) {
 	} );
 	//
 	scene.add(transcontrol);
+
 	let accidentManager = new AccidentManager(scene);
-	accidentManager.init();
+	accidentManager.initAccident();
+
   let assetModelManager = new AssetModelManager(scope,scene);
 
 	if(lessonData){
@@ -87,6 +89,11 @@ export function Lesson3dEditor(dom,lessonData) {
 		}else{
 			assetModelManager.lessonAssetsLoader();
 		}
+
+		if(lessonData.accidentList){
+			accidentManager.loadAccidentList(lessonData.accidentList)
+		}
+
 	}else{
 		assetModelManager.lessonAssetsLoader();
 	}
@@ -100,6 +107,7 @@ export function Lesson3dEditor(dom,lessonData) {
     render();
 		scope.controls.update();
 		// delta = clock.getDelta();
+		accidentManager.update();
 		requestAnimationFrame(animate);
 
 	}
@@ -114,8 +122,11 @@ export function Lesson3dEditor(dom,lessonData) {
 
 	this.changeIndex = function(nowIndex){
 		lessonIndex = nowIndex;
+		console.log(lessonData.lessonProgress[lessonIndex]);
 		scope.nowSceneType = lessonData.lessonProgress[lessonIndex].progressScene;
 		assetModelManager.changeSceneGroup(scope.nowSceneType);
+
+		accidentManager.changeSceneGroup(scope.nowSceneType);
 		// if(lessonData.lessonProgress[lessonIndex].roleName == nowRole){
 		// 	controlManager.initControlMode(lessonIndex);
 		// 	controlManager.initRoleMode(true,nowRole);
@@ -133,6 +144,7 @@ export function Lesson3dEditor(dom,lessonData) {
 		console.log(value2);
 		if(type == "changeScene"){
 			assetModelManager.changeSceneGroup(value1);
+			accidentManager.changeSceneGroup(value1);
 			scope.nowSceneType = value1;
 		}
 	}
@@ -157,10 +169,32 @@ export function Lesson3dEditor(dom,lessonData) {
 
 	}
 
+	this.createAccident = function(accidentData,mousePos){
+		var mouse = new THREE.Vector2();
+
+		var raycaster = new THREE.Raycaster();
+
+		mouse.x = ( mousePos.x / window.innerWidth ) * 2 - 1;
+
+		mouse.y = - ( mousePos.y / dom.offsetHeight ) * 2 + 1;
+
+		raycaster.setFromCamera(mouse,scope.camerass) // 也可以给构造函数传参的形式写
+
+		var intersects = raycaster.intersectObjects( scene.children,true );
+
+		if(intersects.length>0){
+			accidentManager.createNewAccident(accidentData,intersects[0].point,scope.nowSceneType);
+		}
+	}
+
 	this.saveAssetModel = function(){
 		return assetModelManager.saveModelList();
 	}
 
+	this.saveAccidentModel = function(){
+		return accidentManager.saveDataList();
+	}
+
 	this.attachModel = function(selectModel){
 		transcontrol.attach(selectModel);
 	}
@@ -169,4 +203,8 @@ export function Lesson3dEditor(dom,lessonData) {
 		transcontrol.detach();
 		assetModelManager.deleteAsset(selectModel,scope.nowSceneType);
 	}
+	this.deleteAccident = function(selectAccident){
+		accidentManager.deleteAccident(selectAccident,scope.nowSceneType);
+	}
+
 }

src/jlmap3d/lesson3dedit/manager/accidentmanager.js

@@ -5,27 +5,132 @@ export function AccidentManager(scene) {
   let scope = this;
 
   this.accidentList = [];
+
   this.accidentGroup = new THREE.Group();
+
+  //场景中可触发事件模型
+  this.accidentList = [];
+
+  scope.accidentList["standstation"] = [];
+  scope.accidentList["stopstation"] = [];
+
+  scope.accidentList["occ"] = [];
+
+  scope.accidentList["device"] = [];
+  scope.accidentList["xl"] = [];
+  scope.accidentList["dc"] = [];
+
+  let groupList = [];
+  groupList["standstation"] = new THREE.Group();
+  groupList["stopstation"] = new THREE.Group();
+  groupList["occ"] = new THREE.Group();
+  groupList["device"] = new THREE.Group();
+  groupList["xl"] = new THREE.Group();
+  groupList["dc"] = new THREE.Group();
+
+  let updateSceneType = "standstation";
+
   scene.add(scope.accidentGroup);
 
-  this.init = function(){
+  this.initAccident = function(nowSceneType){
-    let fire = new Fire();
+    let accidentData = [
-    fire.init(scene);
+      {
+        id:'1',
+        name:"火灾",
+        type:"fire"
+      }
+    ];
+    jl3dUpdateAccidentData(accidentData);
   }
 
-  this.createNewAccident = function(type,pos){
+  this.saveDataList = function(){
+    let saveList = [];
+    for(let g in scope.accidentList){
+      for(let i=0;i<scope.accidentList[g].length;i++){
+        if(scope.accidentList[g][i].showType != "default"){
+          saveList.push({
+            id:scope.accidentList[g][i].id,
+            name:scope.accidentList[g][i].name,
+            label:scope.accidentList[g][i].label,
+            type:scope.accidentList[g][i].type,
+            pos:{
+              x:scope.accidentList[g][i].pos.x,
+              y:scope.accidentList[g][i].pos.y,
+              z:scope.accidentList[g][i].pos.z
+            },
+            showType:scope.accidentList[g][i].showType,
+            sceneType:scope.accidentList[g][i].sceneType,
+          });
+        }
+      }
+    }
+    return saveList;
+  }
 
-  let fire = new Fire();
+  this.changeSceneGroup = function(nowSceneType){
-  fire.init(scene);
+    if(scope.accidentGroup.children.length>0){
+      scope.accidentGroup.remove(scope.accidentGroup.children[0]);
+    }
+    scope.accidentGroup.add(groupList[nowSceneType]);
+    jl3dUpdateAccidentlist(scope.accidentList[nowSceneType]);
+    updateSceneType = nowSceneType;
+  }
+
+  this.createNewAccident = function(type,pos,nowSceneType){
+
+    var rand = Math.floor(Math.random () * 900) + 100;
 
     let newAccident = {
-      id:"xx",
+      id:rand,
-      type:type
+      name:type,
+      label:type+rand,
+      type:type,
+      object:{},
+      pos:pos,
+      sceneType:nowSceneType,
+      showType:"loadModel",
     };
+    if(type == "fire"){
+      newAccident.object = new Fire();
+      newAccident.object.createNew(groupList[nowSceneType],pos);
+    }
+    scope.accidentList[nowSceneType].push(newAccident);
+    jl3dUpdateAccidentlist(scope.accidentList[nowSceneType]);
   }
 
-  this.loadAccidentList = function(){
+  this.deleteAccident = function(selectAccident,nowSceneType){
+    groupList[nowSceneType].remove(selectAccident.object.points.obj);
+    console.log(selectAccident);
+    for(let i=0;i<scope.accidentList[nowSceneType].length;i++){
+      if(scope.accidentList[nowSceneType][i].id == selectAccident.id){
+        scope.accidentList[nowSceneType].splice(i,1);
+        jl3dUpdateAccidentlist(scope.accidentList[nowSceneType]);
+        break;
+      }
+    }
+  }
 
+
+  this.loadAccidentList = function(accidentList){
+    console.log(accidentList);
+    for(let i=0;i<accidentList.length;i++){
+      let newAccident = {
+        id:accidentList[i].id,
+        name:accidentList[i].name,
+        label:accidentList[i].label,
+        type:accidentList[i].type,
+        object:{},
+        pos:accidentList[i].pos,
+        sceneType:accidentList[i].sceneType,
+        showType:"loadModel",
+      };
+      if(accidentList[i].type == "fire"){
+        newAccident.object = new Fire();
+        newAccident.object.createNew(groupList[accidentList[i].sceneType],accidentList[i].pos);
+      }
+      scope.accidentList[accidentList[i].sceneType].push(newAccident);
+      jl3dUpdateAccidentlist(scope.accidentList[accidentList[i].sceneType]);
+    }
   }
 
   this.changeAccidentStatus = function(){
@@ -33,7 +138,9 @@ export function AccidentManager(scene) {
   }
 
   this.update = function(){
-
+    for(let i=0;i<scope.accidentList[updateSceneType].length;i++){
+      scope.accidentList[updateSceneType][i].object.update();
+    }
   }
 
 }

src/jlmap3d/lesson3dedit/manager/assetmodelmanager.js

@@ -10,6 +10,18 @@ export function AssetModelManager(editor,scene) {
 
   this.otherModel = new THREE.Group();
 
+  //场景中可触发事件模型
+  this.lessonTriggerList = [];
+
+  scope.lessonTriggerList["standstation"] = [];
+  scope.lessonTriggerList["stopstation"] = [];
+
+  scope.lessonTriggerList["occ"] = [];
+
+  scope.lessonTriggerList["device"] = [];
+  scope.lessonTriggerList["xl"] = [];
+  scope.lessonTriggerList["dc"] = [];
+
   let groupList = [];
   groupList["standstation"] = new THREE.Group();
   groupList["stopstation"] = new THREE.Group();
@@ -111,17 +123,6 @@ export function AssetModelManager(editor,scene) {
   };
 
 
-  //场景中可触发事件模型
-  this.lessonTriggerList = [];
-
-  scope.lessonTriggerList["standstation"] = [];
-  scope.lessonTriggerList["stopstation"] = [];
-
-  scope.lessonTriggerList["occ"] = [];
-
-  scope.lessonTriggerList["device"] = [];
-  scope.lessonTriggerList["xl"] = [];
-  scope.lessonTriggerList["dc"] = [];
 
   this.changeSceneGroup = function(groupType){
     // console.log(groupType);
@@ -258,7 +259,6 @@ export function AssetModelManager(editor,scene) {
       }
     }
   }
-
   // <el-option label="车站" value="standstation"></el-option>
   // <el-option label="停车场" value="stopstation"></el-option>
   // <el-option label="单体设备" value="device"></el-option>

src/jlmap3d/lesson3dedit/model/lessondata.js

@@ -9,6 +9,7 @@ export function LessonData() {
 	this.lessonData = {
 		//资源列表
     assetList:[],
+    accidentList:[],
     setup:{
       examMode:"",
       checkedRole:"",
@@ -32,7 +33,7 @@ export function LessonData() {
       roleName:"",
       roleUse:true,
       score:0,
-      progressScene:"",
+      progressScene:"standstation",
       nextCode:"",
       nextNode:"",
       triggerType:"",

src/utils/baseUrl.js

@@ -2,8 +2,8 @@ export function getBaseUrl() {
     let BASE_API;
     if (process.env.NODE_ENV === 'development') {
         // BASE_API = 'https://joylink.club/jlcloud';
-        // BASE_API = 'https://test.joylink.club/jlcloud';
+        BASE_API = 'https://test.joylink.club/jlcloud';
-        BASE_API = 'http://192.168.8.152:9000'; // 袁琪
+        // BASE_API = 'http://192.168.8.152:9000'; // 袁琪
         // BASE_API = 'http://192.168.8.167:9000'; // 旭强
         // BASE_API = 'http://192.168.2.183:9000'; // 张赛
         // BASE_API = 'http://192.168.8.140:9000'; // 杜康

src/views/jlmap3d/lesson3dedit/component/lessonprogress.vue

@@ -28,6 +28,18 @@
         </div>
       </el-tab-pane>
 
+      <el-tab-pane label="场景特效管理" name="accidentlist" >
+        <div class="progressdiv"
+          v-for="(elementaccident,indexaccident) in accidentlist"  :key="elementaccident.label">
+
+          <div class="progressdivtext" >{{elementaccident.label}}</div>
+          <div class="progressassetimg"
+          :style="{'background-image': 'url('+localstatic+'/lesson3d/box.png)'}"/>
+          <div class="delprogressdiv" @click="deleteAccident(elementaccident)" >删除</div>
+
+        </div>
+      </el-tab-pane>
+
     </el-tabs>
 
   </div>
@@ -44,7 +56,7 @@
 
   export default {
     name: 'LessonProgress',
-    props:['lessonData','triggerList'],
+    props:['lessonData','triggerList','accidentlist'],
     components: {
       draggable
     },
@@ -97,6 +109,9 @@
       deleteModel(selectedModel){
         this.$emit('deleteModel',selectedModel);
       },
+      deleteAccident(selectAccident){
+        this.$emit('deleteAccident',selectAccident);
+      }
 
 
     },

src/views/jlmap3d/lesson3dedit/component/lessontoolsmanager.vue

@@ -28,16 +28,16 @@
         </draggable>
       </el-tab-pane>
 
+
       <el-tab-pane label="特效资源" name="spritTrigger">
-        <!-- <Assets-Model></Assets-Model> -->
+        <draggable v-model="accidentDataList" group="accidentDataList" @start="drag=true" @end="drag=false" >
-        <!-- <draggable v-model="lessonAssetList" group="lessonAssetList" @start="drag=true" @end="drag=false" >
+          <div class="progressdiv"  v-for="(item,index) in accidentDataList"@dragend="createAccident($event,item,index)">
-          <div class="progressdiv"  v-for="(item,index) in lessonAssetList"@dragend="createModel($event,item,index)">
             <div class="progressdivimg"
             :style="{'background-image': 'url('+localstatic+'/lesson3d/box.png)'}"/>
-            <div class="progressdivtext">{{item.packageName}}</div>
+            <div class="progressdivtext">{{item.name}}</div>
 
           </div>
-        </draggable> -->
+        </draggable>
       </el-tab-pane>
 
       <el-tab-pane label="图片资源列表" name="picasset">
@@ -95,6 +95,7 @@
         activeName: 'lessoncomponent',
         lessonAssetList:[],
         picAssetList:[],
+        accidentDataList:[],
         triggerList:[
           {},
           {},
@@ -111,6 +112,7 @@
 
     },
     mounted() {
+      window.jl3dUpdateAccidentData = this.jl3dUpdateAccidentData;
       this.localstatic = JL3D_LOCAL_STATIC;
       console.log(this.localstatic);
       getMap3dModelData("三维课程").then(netdata => {
@@ -160,7 +162,13 @@
         // console.log(event);
         this.$emit('createModel',item,{x:event.clientX,y:event.clientY});
       },
+      createAccident(event,item, index){
 
+        this.$emit('createAccident',item.type,{x:event.clientX,y:event.clientY});
+      },
+      jl3dUpdateAccidentData(accidentData){
+        this.accidentDataList = accidentData;
+      },
     },
 
   }

src/views/jlmap3d/lesson3dedit/lesson3dedit.vue

@@ -4,6 +4,7 @@
 
     <LessonTools-Manager
     @createModel='createModel'
+    @createAccident='createAccident'
     :lessonTools='lessonTools'
     ></LessonTools-Manager>
 
@@ -62,11 +63,13 @@
     <Lesson-Progress
       :lessonData='lessonData'
       :triggerList='triggerList'
+      :accidentlist='accidentlist'
       @addProgress="addProgress"
       @changeProgressView="changeProgressView"
       @removeProgress="removeProgress"
       @selectModel="selectModel"
       @deleteModel="deleteModel"
+      @deleteAccident="deleteAccident"
       >
     </Lesson-Progress>
 
@@ -163,6 +166,7 @@
           data:{},
         },
         triggerList:[],
+        accidentlist:[],
         lessonData:{
           lessonData:{
             lessonProgress:[
@@ -209,6 +213,7 @@
     },
     mounted() {
       window.updateTriggerList = this.updateTriggerList;
+      window.jl3dUpdateAccidentlist = this.jl3dUpdateAccidentlist;
       window.editAction = this.editAction;
 
       this.init(this.$route.query.lessonId);
@@ -257,6 +262,11 @@
         let assetModelData = this.jl3d.saveAssetModel();
         saveData.assetList = assetModelData.assetList;
         saveData.modelList = assetModelData.modelList;
+
+        let accidentData = this.jl3d.saveAccidentModel();
+        
+        saveData.accidentList = accidentData;
+
         saveData.setup.examMode = this.examMode;
         saveData.setup.checkedRole = this.checkedRole;
         this.netData.data = JSON.stringify(saveData);
@@ -291,6 +301,9 @@
       deleteModel(selectedModel){
         this.jl3d.deleteModel(selectedModel);
       },
+      deleteAccident(selectedAccident){
+        this.jl3d.deleteAccident(selectedAccident);
+      },
       setupclick(){
 
         this.showSetup = true;
@@ -298,11 +311,16 @@
       createModel(assetData,mousePos){
         this.jl3d.createModelTrigger(assetData,mousePos);
       },
-
+      createAccident(accidentData,mousePos){
+        this.jl3d.createAccident(accidentData,mousePos);
+      },
       updateTriggerList(newTriggerList){
         this.triggerList = newTriggerList;
         console.log(this.triggerList);
       },
+      jl3dUpdateAccidentlist(newAccidentlist){
+        this.accidentlist = newAccidentlist;
+      },
       editAction(type,value1,value2){
         this.jl3d.editActionManager(type,value1,value2);
       },