增加三维课程事故特效管理模块
This commit is contained in:
sunzhenyu
parent
297e417113
commit
813d694ccc
@ -4,9 +4,9 @@ export function Fire() {
|
||||
var last_time_activate = Date.now();
|
||||
|
||||
|
||||
this.init = function(scene){
|
||||
scope.points = new Points();
|
||||
scope.points.init();
|
||||
this.createNew = function(scene,pos){
|
||||
scope.points = new Points(pos);
|
||||
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++;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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(){
|
||||
let fire = new Fire();
|
||||
fire.init(scene);
|
||||
this.initAccident = function(nowSceneType){
|
||||
let accidentData = [
|
||||
{
|
||||
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();
|
||||
fire.init(scene);
|
||||
this.changeSceneGroup = function(nowSceneType){
|
||||
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",
|
||||
type:type
|
||||
id:rand,
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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:"",
|
||||
|
||||
@ -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 = 'http://192.168.8.152:9000'; // 袁琪
|
||||
BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
// 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'; // 杜康
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
@ -28,16 +28,16 @@
|
||||
</draggable>
|
||||
</el-tab-pane>
|
||||
|
||||
|
||||
<el-tab-pane label="特效资源" name="spritTrigger">
|
||||
<!-- <Assets-Model></Assets-Model> -->
|
||||
<!-- <draggable v-model="lessonAssetList" group="lessonAssetList" @start="drag=true" @end="drag=false" >
|
||||
<div class="progressdiv" v-for="(item,index) in lessonAssetList"@dragend="createModel($event,item,index)">
|
||||
<draggable v-model="accidentDataList" group="accidentDataList" @start="drag=true" @end="drag=false" >
|
||||
<div class="progressdiv" v-for="(item,index) in accidentDataList"@dragend="createAccident($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;
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
@ -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);
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user