增加三维课程角色选择，增加三维课程信息提示跳转部分

src/jlmap3d/lesson3d/lesson3dplayer.js

@@ -30,8 +30,8 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
 	let scope = this;
   this.dom = dom;
 
-	//定义相机
+	//定义当前课程角色
-
+	let nowRole = "";
 
 	//定义场景(渲染容器)
 	scene = new THREE.Scene();
@@ -53,7 +53,6 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
 		animateManager.initAnimation(assetModelManager);
 		controlManager.init(animateManager.actions);
 
-		console.log(lessonData.lessonProgress[lessonIndex]);
 		if(lessonData.lessonProgress[lessonIndex].action.length>0){
 			controlManager.changeIndexEvent(lessonData.lessonProgress[lessonIndex].action,assetModelManager.lessonTriggerList);
 		}
@@ -75,12 +74,27 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
 	this.changeIndex = function(nowIndex){
 		lessonIndex = nowIndex;
 		controlManager.changeIndexEvent(lessonData.lessonProgress[lessonIndex].action);
+	
+		if(lessonData.lessonProgress[lessonIndex].roleName == nowRole){
+			controlManager.initRoleMode(true);
+		}else{
+			controlManager.initRoleMode(false);
+		}
+
 	}
 
 	this.changeCameraPos = function(pos){
 		controlManager.updatePos(pos);
 	}
 
+	this.initNowRole = function(role){
+		nowRole = role;
+		if(lessonData.lessonProgress[lessonIndex].roleName == nowRole){
+			controlManager.initRoleMode(true);
+		}else{
+			controlManager.initRoleMode(false);
+		}
+	};
 	//循环渲染函数
 	function animate() {
 

src/jlmap3d/lesson3d/manager/animatemanager.js

@@ -13,12 +13,10 @@ export function AnimateManager() {
 
     for(let k in assetModelManager.staticAsset){
       if(assetModelManager.staticAsset[k].mesh.animations.length > 0){
-        console.log(assetModelManager.staticAsset[k].mesh.name);
         let animations = assetModelManager.staticAsset[k].mesh.animations;
     		let mixer = new THREE.AnimationMixer( assetModelManager.staticAsset[k].mesh );
         let actionName = assetModelManager.staticAsset[k].mesh.name;
 
-        console.log(actionName);
         scope.actions[actionName] = {
           status:"01",
           action:mixer.clipAction( assetModelManager.staticAsset[k].mesh.animations[ 0 ])
@@ -38,7 +36,6 @@ export function AnimateManager() {
 
     for(let i=mixers.length-1;i>=0;i--){
       if(mixers[i]._actions[0].isRunning()){
-        // console.log(scope.mixers[i]._actions[0].isRunning());
         mixers[i].update( mixerUpdateDelta );
       }
     }

src/jlmap3d/lesson3d/manager/assetmodelmanager.js

@@ -198,7 +198,6 @@ export function AssetModelManager(scene) {
   function fbxpromise(asset){
     return new Promise(function(resolve, reject){
       var loader = new THREE.FBXLoader();
-      console.log(asset);
       if(asset.assetType == "static"){
         loader.load( asset.url, function ( object ) {
           object.name = asset.modelId;
@@ -210,7 +209,6 @@ export function AssetModelManager(scene) {
         loader.load( BASE_ASSET_API+asset.url, function ( object ) {
           asset.mesh = object;
           if(asset.assetType == "default"){
-            console.log(object);
             // scene.add(object);
           }else if(asset.assetType == 'loadModel'){
 

src/jlmap3d/lesson3d/manager/controlmanager.js

@@ -14,6 +14,7 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
   this.nowCamera = null;
   this.eventHitMode = false;
 
+  let roleMode = false;
   let eventBoxs = [];
   let raycasterBoxs = [];
   let actionList = [];
@@ -110,6 +111,9 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
 
     }
   );
+  this.initRoleMode = function(rMode){
+    roleMode = rMode;
+  };
 
   const worldOctree = new Octree();
 
@@ -138,6 +142,7 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
 	const keyStates = {};
   let clock = new THREE.Clock();
 
+
   this.updateOrbitControl = function(){
     oribitControl.update();
   };
@@ -151,7 +156,7 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
 
 		updateSpheres( deltaTime );
 
-    if(scope.eventHitMode == true){
+    if(scope.eventHitMode == true && roleMode){
       if(eventBoxs.length>0){
         attachBox.position.copy(fpsCamera.position);
         for(let i=0;i<eventBoxs.length;i++){
@@ -231,7 +236,7 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
     fpsMouseStatus = true;
 		// document.body.requestPointerLock();
 
-    if(raycasterBoxs.length>0){
+    if(raycasterBoxs.length>0 && roleMode){
       var mouse = new THREE.Vector2();
 
       var raycaster = new THREE.Raycaster();
@@ -479,7 +484,6 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
           if(actions[i].actionMode == "play"){
             for(let j=0;j<eventTrigger.length;j++){
               if(eventTrigger[j].label == actions[i].actionModel){
-                console.log(actionList);
 
                 if(actionList[eventTrigger[j].actionName].status == "01"){
                   actionList[eventTrigger[j].actionName].status = "02";
@@ -494,8 +498,6 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
 
           for(let j=0;j<eventTrigger.length;j++){
             if(eventTrigger[j].label == actions[i].actionModel){
-
-
               let eventTestBox = new THREE.Box3(new THREE.Vector3(), new THREE.Vector3());
 
               eventTestBox.setFromObject(eventTrigger[j]);

src/jlmap3d/lesson3dedit/model/lessondata.js

@@ -9,6 +9,10 @@ export function LessonData() {
 	this.lessonData = {
 		//资源列表
     assetList:[],
+    setup:{
+      examMode:"",
+      checkedRole:"",
+    },
     //场景交互物体列表
     modelList:[],
 		//课程组件启用状态
@@ -61,6 +65,8 @@ export function LessonData() {
         tittle:"标题",
         picurl:"url",
         text:"内容",
+        explainPaneType:"null",
+        nextNode:"",
       },
       action:[],
     };
@@ -141,6 +147,8 @@ export function LessonData() {
         tittle:"标题",
         picurl:"url",
         text:"内容",
+        explainPaneType:"null",
+        nextNode:"",
       },
       action:[
 

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

@@ -169,6 +169,17 @@
               <el-input v-model="selected.text" ></el-input>
           </el-form-item>
 
+          <el-form-item label="提示功能:"  v-if="selected.explainPaneType">
+            <el-select v-model="selected.explainPaneType" placeholder="请选择">
+              <el-option
+                v-for="explainType in explainPaneTypes"
+                :key="explainType.value"
+                :label="explainType.name"
+                :value="explainType.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
           <el-form-item label="说明画面:"  v-if="selected.picurl">
               <el-input v-model="selected.picurl" ></el-input>
           </el-form-item>
@@ -295,6 +306,16 @@
         ],
         jobDataList:[],
         value:'',
+        explainPaneTypes:[
+          {
+            name:"无",
+            value:"null",
+          },
+          {
+            name:"跳转",
+            value:"jump",
+          }
+        ],
       }
     },
     computed: {

src/views/jlmap3d/lesson3dedit/lesson3dedit.vue

@@ -7,6 +7,34 @@
     :lessonTools='lessonTools'
     ></LessonTools-Manager>
 
+    <div id="" class="lessonsetupdiv"  v-show="showSetup">
+      <div style="text-align:center;top:10%;font-size:30px">课程内容设置</div>
+      <el-form ref="form" label-width="80px">
+        <el-form-item label="考试模式">
+          <el-switch
+            v-model="examMode"
+            active-text="开启考试模式"
+            inactive-text="关闭考试模式">
+          </el-switch>
+        </el-form-item>
+
+        <el-form-item label="可用角色">
+          <el-checkbox-group v-model="checkedRole">
+            <el-checkbox v-for="role in jobPaneData.dataList" :label="role.name" :key="role.name">{{role.name}}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+
+        <!-- <el-form-item label="课程简介">
+          <el-input type="textarea" v-model="form.desc"></el-input>
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">修改完成</el-button>
+          <el-button @click="unSubmit" >关闭</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+
     <div class="lesson3dedit">
       <Step-Tips
         :lessonData='lessonData'
@@ -50,7 +78,6 @@
     </Lesson-Progress>
 
     <div class="lessonsetup" >
-
       <el-row>
         当前课程信息
       </el-row>
@@ -118,6 +145,9 @@
     data() {
       return {
         jl3d: null,
+        showSetup:false,
+        examMode:false,
+        checkedRole:[],
         netData:{
           name:'',
           type:'',
@@ -186,9 +216,10 @@
           if(data.data.data){
             loadData = JSON.parse(data.data.data);
 
-
+            console.log(loadData);
+            this.checkedRole = loadData.setup.checkedRole;
+            this.examMode = loadData.setup.examMode;
             this.jobPaneData.dataList = loadData.toolJobPane;
-            console.log(this.jobPaneData.dataList);
             this.$refs.jobpane.initJobList(this.jobPaneData.dataList);
 
             this.lessonTools = loadData.lessonTools;
@@ -197,8 +228,7 @@
             this.lessonData.initLessonProgress();
             this.$refs.jobpane.initJobList(this.jobPaneData.dataList);
           }
-          console.log("loaddata----------------");
+
-          console.log(loadData);
           this.jl3d = new Lesson3dEditor(dom,loadData);
         }).catch(() => {
         });
@@ -212,13 +242,15 @@
         let assetModelData = this.jl3d.saveAssetModel();
         saveData.assetList = assetModelData.assetList;
         saveData.modelList = assetModelData.modelList;
-
+        saveData.setup.examMode = this.examMode;
+        saveData.setup.checkedRole = this.checkedRole;
         this.netData.data = JSON.stringify(saveData);
         // console.log();
         updateLesson3dData(this.$route.query.lessonId,this.netData).then(data => {
-          console.log(data);
-        }).catch(() => {
 
+          this.$message('保存成功');
+        }).catch(() => {
+          this.$message('保存失败');
         });
       },
       addProgress(){
@@ -245,6 +277,7 @@
       },
       setupclick(){
 
+        this.showSetup = true;
       },
       createModel(assetData,mousePos){
         this.jl3d.createModelTrigger(assetData,mousePos);
@@ -258,6 +291,13 @@
         this.$router.push({ path: '/design/jlmap3d/lesson3dplayer', query: {lessonId: this.$route.query.lessonId} });
 
       },
+
+      onSubmit() {
+        this.showSetup = false;
+      },
+      unSubmit(){
+        this.showSetup = false;
+      },
     },
 
   }
@@ -318,4 +358,25 @@
   .el-tabs__content{
     position: absolute;
   }
+
+  .lessonsetupdiv {
+    position: absolute;
+    width: 30%;
+    height: 40%;
+    top:30%;
+    left:35%;
+    background-color: #fff;
+    border-radius: 18px;
+    border:solid 2px #000;
+    z-index: 5;
+  }
+
+  .nextbuttondiv{
+    width:30px;
+    height:30px;
+    background-size: 100%;
+    position: absolute;
+    right:0;
+    bottom:0;
+  }
 </style>

src/views/jlmap3d/lesson3dedit/tools/explainpane.vue

@@ -9,6 +9,11 @@
     <div class="explainpanetext" >
       {{lessonData.lessonData.lessonProgress[lessonEditIndex].explainPane.text}}
     </div>
+
+    <div class="nextbuttondiv"
+    :style="{'background-image': 'url('+staticImg+'/lesson3d/nextbutton.png)'}"
+    v-if="lessonData.lessonData.lessonProgress[lessonEditIndex].explainPane.explainPaneType=='jump'"></div>
+
   </div>
 </template>
 <script>
@@ -26,6 +31,7 @@
     data() {
       return {
         localStatic:BASE_ASSET_API,
+        staticImg:JL3D_LOCAL_STATIC,
       }
     },
     computed: {
@@ -61,6 +67,7 @@
     border-radius:10px;
     border:solid 2px #000;
     background-color: #fff;
+    color:#000;
     z-index:1;
   }
   .explainpanetittle{
@@ -70,15 +77,28 @@
   }
 
   .explainpanepic{
-    height:65%;
+    position:relative;
+    width:90%;
+    left:5%;
+    height:45%;
     border:solid 2px #000;
     background-size: 100%;
   }
 
   .explainpanetext{
+    position:relative;
+    left:5%;
+    width:90%;
     font-size: 14px;
     // height:20%;
   }
 
-
+  .nextbuttondiv{
+    width:30px;
+    height:30px;
+    background-size: 100%;
+    position: absolute;
+    right:0;
+    bottom:0;
+  }
 </style>

src/views/jlmap3d/lesson3dplayer/lesson3dplayer.vue

@@ -2,6 +2,21 @@
 
   <div id="lesson3ddiv" class="lesson3ddiv">
 
+    <div class="selectjobdiv"
+    :style="{'background-image': 'url('+staticImg+'/texture/bg.jpg)'}"
+    v-if="showSelectJob">
+      <div class="selectjobbuttondiv">
+        <div
+        class="selectjobimg"
+        v-for="(job,index) in selectJobList"
+        @click="selectJob(job)"
+        :style="{'background-image': 'url('+staticImg+'/lesson3d/mst.png)'}">
+          <!-- <div>{{job}}</div> -->
+          <div style="width:100%;position:absolute;bottom:0;font-size:30px;textAlign:center;">{{job}}</div>
+        </div>
+      </div>
+    </div>
+
     <div class="lesson3dplayer">
       <Step-Tips
         :lessonData='lessonData'
@@ -19,13 +34,16 @@
       <Explain-Pane
         :lessonData='lessonData'
         :lessonPlayIndex='lessonPlayIndex'
-        v-show="lessonTools[2].isShow && lessonData.lessonData.lessonProgress[lessonPlayIndex].progressScene == 'standstation'">
+        :nowRole ='nowRole'
+        v-show="lessonTools[2].isShow && lessonData.lessonData.lessonProgress[lessonPlayIndex].progressScene == 'standstation'"
+        @jumpEvent="jumpEvent">
       </Explain-Pane>
 
       <Job-Pane
         :jobPaneData='jobPaneData'
         :lessonData='lessonData'
         :lessonPlayIndex='lessonPlayIndex'
+        :nowRole='nowRole'
         ref="jobpane"
         v-show="lessonTools[3].isShow && lessonData.lessonData.lessonProgress[lessonPlayIndex].progressScene == 'standstation'">
       </Job-Pane>
@@ -62,6 +80,9 @@
   import { JobPaneData } from '@/jlmap3d/lesson3d/toolsmodel/jobpanedata.js';
 
   import { getLesson3dData,updateLesson3dData } from '@/api/jmap/lesson3d';
+
+	import { JL3D_LOCAL_STATIC,BASE_ASSET_API } from '@/api/jlmap3d/assets3d.js';
+
   export default {
     name: 'Lesson3dPlayer',
     components: {
@@ -76,6 +97,10 @@
     },
     data() {
       return {
+        staticImg:JL3D_LOCAL_STATIC,
+        showSelectJob:true,
+        selectJobList:[],
+        nowRole:"",
         jl3d: null,
         netData:{
           name:'',
@@ -146,7 +171,7 @@
           let loadData;
           if(data.data.data){
             loadData = JSON.parse(data.data.data);
-
+            this.selectJobList = loadData.setup.checkedRole;
             this.jobPaneData.dataList = loadData.toolJobPane;
             this.$refs.jobpane.initJobList(this.jobPaneData.dataList);
 
@@ -163,6 +188,17 @@
         }).catch(() => {
         });
       },
+      selectJob(job){
+        this.showSelectJob = false;
+        for(let i=0;i<this.jobPaneData.dataList.length;i++){
+          if(job == this.jobPaneData.dataList[i].name){
+            this.nowRole = this.jobPaneData.dataList[i].value;
+              console.log(this.nowRole);
+            this.jl3d.initNowRole(this.nowRole);
+          }
+        }
+
+      },
       startLesson(){
         this.$refs.processlog.startLog();
       },
@@ -190,6 +226,9 @@
         if(type == "tools"){
           this.lessonPlayIndex = action.nextNode;
         }
+        if(type == "jump"){
+          this.lessonPlayIndex = action.nextNode;
+        }
         console.log(type);
         console.log(action);
         this.jl3d.changeIndex(this.lessonPlayIndex);
@@ -219,6 +258,40 @@
     touch-action: none;
   }
 
+  .selectjobdiv{
+    width:100%;
+    height:100%;
+    position: absolute;
+    z-index: 5;
+    background-size: 100%;
+  }
+
+  .selectjobimg{
+    width:250px;
+    height:250px;
+    background-size: 100%;
+    // float:left;
+    display: inline-block;
+    position:relative;
+  }
+
+  .selectjobbuttondiv{
+    position:absolute;
+    width:80%;
+    height:30%;
+    left:10%;
+    top:35%;
+    overflow-x:scroll;
+    overflow-y:hidden;
+    text-align: center;
+  }
+
+  .selectjobbackdiv{
+
+  }
+
+
+
   .lesson3ddiv {
 
     width: 100%;
@@ -266,4 +339,5 @@
   .el-tabs__content{
     position: absolute;
   }
+
 </style>

src/views/jlmap3d/lesson3dplayer/tools/explainpane.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="explainpanediv"
     v-if="lessonData.lessonData.lessonProgress[lessonPlayIndex]"
-    @click="selectTool"
+
     :style="{'background-image': 'url('+lessonbg+')'}">
     <div class="explainpanetittle" >
       {{lessonData.lessonData.lessonProgress[lessonPlayIndex].explainPane.tittle}}
@@ -12,6 +12,10 @@
     <div class="explainpanetext" >
       {{lessonData.lessonData.lessonProgress[lessonPlayIndex].explainPane.text}}
     </div>
+    <div class="nextbuttondiv"
+    :style="{'background-image': 'url('+staticImg+'/lesson3d/nextbutton.png)'}"
+    v-if="lessonData.lessonData.lessonProgress[lessonPlayIndex].explainPane.explainPaneType=='jump' "
+    @click="explainJump"></div>
   </div>
 </template>
 <script>
@@ -22,13 +26,14 @@
 
   export default {
     name: 'ExplainPane',
-    props:['lessonData','lessonPlayIndex'],
+    props:['lessonData','lessonPlayIndex','nowRole'],
     components: {
 
     },
     data() {
       return {
         localStatic:BASE_ASSET_API,
+        staticImg:JL3D_LOCAL_STATIC,
         lessonbg:JL3D_LOCAL_STATIC+"/lesson3d/lessonbg.png",
       }
     },
@@ -45,8 +50,13 @@
 
     },
     methods: {
-      selectTool(){
+      // selectTool(){
-        lesson3dSelect('toolproperty','explainpane');
+      //   lesson3dSelect('toolproperty','explainpane');
+      // },
+      explainJump(){
+        if(this.lessonData.lessonData.lessonProgress[this.lessonPlayIndex].explainPane.explainPaneType == "jump"){
+          this.$emit('jumpEvent','jump',this.lessonData.lessonData.lessonProgress[this.lessonPlayIndex].explainPane);
+        }
       },
     },
 
@@ -77,7 +87,7 @@
     position:relative;
     width:90%;
     left:5%;
-    height:65%;
+    height:45%;
     border:solid 2px #000;
     background-size: 100%;
   }
@@ -90,5 +100,13 @@
     // height:20%;
   }
 
+  .nextbuttondiv{
+    width:30px;
+    height:30px;
+    background-size: 100%;
+    position: absolute;
+    right:0;
+    bottom:0;
+  }
 
 </style>

src/views/jlmap3d/lesson3dplayer/tools/jobpane.vue

@@ -48,7 +48,7 @@
   //岗位
   export default {
     name: 'JobPane',
-    props:['jobPaneData','lessonData','lessonPlayIndex'],
+    props:['jobPaneData','lessonData','lessonPlayIndex','nowRole'],
 
     components: {
 
@@ -98,7 +98,8 @@
         console.log(selectTool);
         let nowProgress = this.lessonData.lessonData.lessonProgress[this.lessonPlayIndex];
         console.log(nowProgress.id);
-        if(selectTool.sceneId == nowProgress.id){
+        console.log(this.lessonData.lessonData.lessonProgress[this.lessonPlayIndex]);
+        if(selectTool.sceneId == nowProgress.id && this.lessonData.lessonData.lessonProgress[this.lessonPlayIndex].roleName == this.nowRole){
           jumpEvent("tools",selectTool);
         }
         // console.log(this.lessonData.lessonProgress[this.lessonPlayIndex]);