joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

修改三维课程编辑器

Browse Source
This commit is contained in:
sunzhenyu 2021-07-15 10:56:04 +08:00
parent 5bf37dfa0c
commit 663e874e06
11 changed files with 504 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/jlmap3d/edit/jlmap3dedit.js
View File

@ -188,7 +188,7 @@ export function JLmap3dEdit(dom, data, mapid) {
// let exportmodels = scope.mapdata.stationstandlist.group;
let exportSectionModel = scope.mapdata.sectionlist.sectiongroup;
objDownload("section",exporter.parse( exportSectionModel ));
if(scope.mapdata.stationstandlist){
let exportStationModel = scope.mapdata.stationstandlist.group;
objDownload("station",exporter.parse( exportStationModel ));
@ -323,6 +323,9 @@ export function JLmap3dEdit(dom, data, mapid) {
let stationStopGroup = new THREE.Group();
scope.scene.add(stationStopGroup);
this.testrail = function(){
scope.scene.remove(stationStopGroup);
stationStopGroup = new THREE.Group();
scope.scene.add(stationStopGroup);
if(stationStopGroup.children.length == 0){
for(let k in scope.mapdata.sectionlist.sections.datalist){
if(scope.mapdata.sectionlist.sections.datalist[k].standTrack == true){
@ -338,27 +341,28 @@ export function JLmap3dEdit(dom, data, mapid) {
plane2.rotation.y = Math.PI/2;
let leftpos = scope.mapdata.sectionlist.sections.datalist[k].leftStopPercent*(scope.mapdata.sectionlist.sections.datalist[k].railpoint[2].x -scope.mapdata.sectionlist.sections.datalist[k].railpoint[0].x)+scope.mapdata.sectionlist.sections.datalist[k].railpoint[0].x;
let rightpos = scope.mapdata.sectionlist.sections.datalist[k].rightStopPercent*(scope.mapdata.sectionlist.sections.datalist[k].railpoint[2].x -scope.mapdata.sectionlist.sections.datalist[k].railpoint[0].x)+scope.mapdata.sectionlist.sections.datalist[k].railpoint[0].x;
console.log("==========");
console.log(scope.mapdata.sectionlist.sections.datalist[k].leftStopPercent);
console.log(scope.mapdata.sectionlist.sections.datalist[k].rightStopPercent);
// console.log("==========");
// console.log(scope.mapdata.sectionlist.sections.datalist[k].leftStopPercent);
// console.log(scope.mapdata.sectionlist.sections.datalist[k].rightStopPercent);
plane1.position.set(leftpos,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].y,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].z);
plane2.position.set(rightpos,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].y,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].z);
stationStopGroup.add(plane1);
stationStopGroup.add(plane2);
}
}
}else{
for(let i=0,leni = stationStopGroup.children.length;i<leni;i++){
let k = stationStopGroup.children[i].code;
if(stationStopGroup.children[i].stopType == "left"){
stationStopGroup.children[i].position.set(scope.mapdata.sectionlist.sections.datalist[k].railpoint[0].x+scope.mapdata.sectionlist.sections.datalist[k].mesh.leftStopPointOffset,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].y,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].z);
}else{
stationStopGroup.children[i].position.set(scope.mapdata.sectionlist.sections.datalist[k].railpoint[0].x+scope.mapdata.sectionlist.sections.datalist[k].mesh.rightStopPointOffset,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].y,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].z);
}
}
}
// else{
// for(let i=0,leni = stationStopGroup.children.length;i<leni;i++){
// let k = stationStopGroup.children[i].code;
//
// if(stationStopGroup.children[i].stopType == "left"){
// stationStopGroup.children[i].position.set(scope.mapdata.sectionlist.sections.datalist[k].railpoint[0].x+scope.mapdata.sectionlist.sections.datalist[k].mesh.leftStopPointOffset,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].y,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].z);
// }else{
// stationStopGroup.children[i].position.set(scope.mapdata.sectionlist.sections.datalist[k].railpoint[0].x+scope.mapdata.sectionlist.sections.datalist[k].mesh.rightStopPointOffset,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].y,scope.mapdata.sectionlist.sections.datalist[k].railpoint[1].z);
// }
//
// }
// }
};
//自动匹配轨道信号灯道岔

20
src/jlmap3d/lesson3d/lesson3dplayer.js
View File

@ -16,6 +16,8 @@ import { ControlManager } from '@/jlmap3d/lesson3d/manager/controlmanager.js';
import { AnimateManager } from '@/jlmap3d/lesson3d/manager/animatemanager.js';
import { Fire } from '@/jlmap3d/lesson3d/utils/fire.js';
// import { AnimationManager } from '@/jlmap3d/lesson3d/manager/assetmodelmanager.js';
@ -29,6 +31,7 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
let scope = this;
this.dom = dom;
this.nowSceneType = "";
//定义当前课程角色
let nowRole = "";
@ -44,12 +47,16 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
light.position.set( 0, 4000, 0 );
scene.add( light );
let fire = new Fire();
fire.init(scene);
let animateManager = new AnimateManager();
let controlManager = new ControlManager( dom,scene,lessonData,lessonIndex);
let assetModelManager = new AssetModelManager(scene,controlManager);
assetModelManager.lessonAssetsLoader(lessonData.assetList,lessonData.modelList).then((result) => {
let assetModelManager = new AssetModelManager(scope,scene,controlManager);
assetModelManager.lessonAssetsLoader(lessonData).then((result) => {
scope.nowSceneType = lessonData.lessonProgress[0].progressScene;
animateManager.initAnimation(assetModelManager);
controlManager.init(animateManager.actions,assetModelManager);
@ -82,7 +89,7 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
this.changeIndex = function(nowIndex){
lessonIndex = nowIndex;
scope.nowSceneType = lessonData.lessonProgress[nowIndex].progressScene;
if(lessonData.lessonProgress[lessonIndex].roleName == nowRole){
controlManager.initControlMode(lessonIndex);
@ -108,10 +115,12 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
}
controlManager.initRoleMode(roleMode);
if(lessonData.lessonProgress[lessonIndex].action.length>0){
console.log(assetModelManager);
// if(lessonData.lessonProgress[lessonIndex].action.length>0){
controlManager.changeIndexEvent(lessonData.lessonProgress[lessonIndex].action,roleMode,assetModelManager.lessonTriggerList);
}
// }
};
//循环渲染函数
function animate() {
@ -124,6 +133,7 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
if(controlManager.controlMode == "non"){
controlManager.updateOrbitControl();
}
fire.update();
animateManager.updateAnimation();
requestAnimationFrame(animate);

89
src/jlmap3d/lesson3d/manager/assetmodelmanager.js
View File

@ -1,7 +1,7 @@
import { BASE_ASSET_API } from '@/api/jlmap3d/assets3d.js';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
export function AssetModelManager(scene) {
export function AssetModelManager(editor,scene) {
let scope = this;
@ -9,7 +9,18 @@ export function AssetModelManager(scene) {
this.otherModel = new THREE.Group();
scene.add(this.otherModel);
let groupList = [];
groupList["standstation"] = new THREE.Group();
groupList["stopstation"] = new THREE.Group();
groupList["device"] = new THREE.Group();
groupList["xl"] = new THREE.Group();
groupList["dc"] = new THREE.Group();
let geometryDevice = new THREE.PlaneGeometry( 100, 100, 32 );
let materialDevice = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
let planeDevice = new THREE.Mesh( geometryDevice, materialDevice );
planeDevice.rotation.x = -Math.PI/2;
groupList["device"].add(planeDevice);
this.loadAsset = [];
@ -22,6 +33,7 @@ export function AssetModelManager(scene) {
assetType:'static',
isUse:true,
resourceType:"三维课程",
sceneType:"standstation",
};
scope.staticAsset['FTDH'] = {
@ -32,6 +44,7 @@ export function AssetModelManager(scene) {
assetType:'static',
isUse:true,
resourceType:"三维课程",
sceneType:"standstation",
};
scope.staticAsset['IN'] = {
@ -42,6 +55,7 @@ export function AssetModelManager(scene) {
assetType:'static',
isUse:true,
resourceType:"三维课程",
sceneType:"standstation",
};
scope.staticAsset['OUT'] = {
@ -52,6 +66,7 @@ export function AssetModelManager(scene) {
assetType:'static',
isUse:true,
resourceType:"三维课程",
sceneType:"standstation",
};
scope.staticAsset['PBMDH'] = {
@ -62,16 +77,26 @@ export function AssetModelManager(scene) {
assetType:'static',
isUse:true,
resourceType:"三维课程",
sceneType:"standstation",
};
//场景中可触发事件模型
this.lessonTriggerList = [];
scope.lessonTriggerList["standstation"] = [];
scope.lessonTriggerList["stopstation"] = [];
scope.lessonTriggerList["device"] = [];
scope.lessonTriggerList["xl"] = [];
scope.lessonTriggerList["dc"] = [];
//加载课程资源
this.lessonAssetsLoader = function(assetList,modelList){
this.lessonAssetsLoader = function(lessonData){
let initlist = [];
this.otherModel = groupList[lessonData.lessonProgress[0].progressScene];
scene.add(this.otherModel);
let assetList = lessonData.assetList;
if(assetList){
for(let i = 0;i<assetList.length;i++){
assetList[i].mesh = "";
@ -95,8 +120,9 @@ export function AssetModelManager(scene) {
Promise.all(initlist).then((result) => {
initTriggerList();
let modelList = lessonData.modelList;
for(let i=0;i<modelList.length;i++){
console.log(modelList[i]);
// console.log(modelList[i]);
let newModelTrigger = scope.loadAsset[modelList[i].modelId].mesh.clone(true);
newModelTrigger.showType = "loadModel";
newModelTrigger.label = modelList[i].label;
@ -108,13 +134,18 @@ export function AssetModelManager(scene) {
newModelTrigger.rotation.x = modelList[i].rot.x;
newModelTrigger.rotation.y = modelList[i].rot.y;
newModelTrigger.rotation.z = modelList[i].rot.z;
if(modelList[i].visible == true){
scope.otherModel.add(newModelTrigger);
}
scope.lessonTriggerList.push(newModelTrigger);
}
updateTriggerList(scope.lessonTriggerList);
newModelTrigger.sceneType = modelList[i].sceneType;
if(modelList[i].visible == true){
groupList[modelList[i].sceneType].add(newModelTrigger);
}
scope.lessonTriggerList[modelList[i].sceneType].push(newModelTrigger);
}
editor.changeIndex(0);
updateTriggerList(scope.lessonTriggerList[editor.nowSceneType]);
resolve("loaderassets"); //['成功了', 'success']
}).catch((error) => {
//console.log(error);
@ -126,8 +157,8 @@ export function AssetModelManager(scene) {
}
this.addActionModel = function(actionModel){
scope.otherModel.add(actionModel);
this.addActionModel = function(actionModel,nowSceneType){
groupList[nowSceneType].add(actionModel);
}
// <el-option label="车站" value="standstation"></el-option>
@ -144,18 +175,18 @@ export function AssetModelManager(scene) {
scope.staticAsset['station'].mesh.getObjectByName("FTAN").showType = "default";
scope.staticAsset['station'].mesh.getObjectByName("FTAN").label = "扶梯急停按钮";
scope.staticAsset['station'].mesh.getObjectByName("FTAN").actionName = "FTDH";
scope.lessonTriggerList.push(scope.staticAsset['station'].mesh.getObjectByName("FTAN"));
scope.lessonTriggerList["standstation"].push(scope.staticAsset['station'].mesh.getObjectByName("FTAN"));
scope.staticAsset['station'].mesh.getObjectByName("FTKG").showType = "default";
scope.staticAsset['station'].mesh.getObjectByName("FTKG").label = "扶梯钥匙孔";
scope.staticAsset['station'].mesh.getObjectByName("FTKG").actionName = "FTDH";
scope.lessonTriggerList.push(scope.staticAsset['station'].mesh.getObjectByName("FTKG"));
scope.lessonTriggerList["standstation"].push(scope.staticAsset['station'].mesh.getObjectByName("FTKG"));
scope.staticAsset['station'].mesh.getObjectByName("spbmkg").showType = "default";
scope.staticAsset['station'].mesh.getObjectByName("spbmkg").label = "屏蔽门开关";
scope.staticAsset['station'].mesh.getObjectByName("spbmkg").actionName = "PBMDH";
scope.lessonTriggerList.push(scope.staticAsset['station'].mesh.getObjectByName("spbmkg"));
scope.lessonTriggerList["standstation"].push(scope.staticAsset['station'].mesh.getObjectByName("spbmkg"));
// console.log(scope.loadAsset['default1'].mesh.getObjectByName("FTKG"));
}
@ -170,9 +201,12 @@ export function AssetModelManager(scene) {
newModelTrigger.showType = "loadModel";
newModelTrigger.label = assetData.packageName;
newModelTrigger.position.copy(pos);
scope.otherModel.add(newModelTrigger);
scope.lessonTriggerList.push(newModelTrigger);
updateTriggerList(scope.lessonTriggerList);
newModelTrigger.sceneType = nowSceneType;
scope.lessonTriggerList[nowSceneType].push(newModelTrigger);
groupList[nowSceneType].add(newModelTrigger);
updateTriggerList(scope.lessonTriggerList[nowSceneType]);
}else{
scope.loadAsset[assetData.id] = {
modelId:assetData.id,
@ -182,6 +216,7 @@ export function AssetModelManager(scene) {
assetType:'loadModel',
isUse:true,
resourceType:"三维课程",
sceneType:nowSceneType,
};
fbxpromise(scope.loadAsset[assetData.id]).then(function(object){
@ -191,10 +226,12 @@ export function AssetModelManager(scene) {
newModelTrigger.modelId = assetData.id;
newModelTrigger.label = assetData.packageName;
newModelTrigger.position.copy(pos);
scope.otherModel.add(newModelTrigger);
scope.lessonTriggerList.push(newModelTrigger);
newModelTrigger.sceneType = nowSceneType;
updateTriggerList(scope.lessonTriggerList);
scope.lessonTriggerList[nowSceneType].push(newModelTrigger);
groupList[nowSceneType].add(newModelTrigger);
updateTriggerList(scope.lessonTriggerList[nowSceneType]);
// resolve("loadednew");
});
}
@ -207,14 +244,22 @@ export function AssetModelManager(scene) {
var loader = new THREE.FBXLoader();
if(asset.assetType == "static"){
loader.load( asset.url, function ( object ) {
if(asset.sceneType){
object.sceneType = asset.sceneType;
}
object.name = asset.modelId;
asset.mesh = object;
scene.add(object);
groupList[asset.sceneType].add(object);
// scene.add(object);
resolve();
} );
}else{
loader.load( BASE_ASSET_API+asset.url, function ( object ) {
if(asset.sceneType){
object.sceneType = asset.sceneType;
}
asset.mesh = object;
if(asset.assetType == "default"){
// scene.add(object);
}else if(asset.assetType == 'loadModel'){

16
src/jlmap3d/lesson3d/manager/controlmanager.js
View File

@ -105,7 +105,7 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
this.initRoleMode = function(rMode,role){
roleMode = rMode;
nowRole = role;
console.log(roleMode);
// console.log(roleMode);
};
const worldOctree = new Octree();
@ -158,8 +158,8 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
eventBoxs[i].setFromObject(eventBoxs[i].mesh);
// console.log(eventBoxs[i]);
if(hitBox.intersectsBox(eventBoxs[i])){
console.log("相交");
console.log(eventBoxs[i].action);
// console.log("相交");
// console.log(eventBoxs[i].action);
if(eventBoxs[i].action.actionMode == "remove"){
actionEvent("remove",eventBoxs[i].action,eventBoxs[i].mesh);
@ -170,7 +170,7 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
actionEvent("remove",eventBoxs[i].action,eventBoxs[i].mesh);
}
console.log("slice");
// console.log("slice");
eventBoxs.splice(i,1);
i--;
}
@ -229,9 +229,9 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
document.addEventListener( 'mousedown', (event) => {
fpsMouseStatus = true;
// document.body.requestPointerLock();
console.log("mousedown-----------------------");
console.log(raycasterBoxs);
console.log(roleMode);
// console.log("mousedown-----------------------");
// console.log(raycasterBoxs);
// console.log(roleMode);
if(raycasterBoxs.length>0 && roleMode){
var mouse = new THREE.Vector2();
@ -504,6 +504,8 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
eventTrigger = lessonTriggerList;
scope.eventHitMode = true;
}
console.log(actions);
console.log(rMode);
nowActions = actions;
// let newEventBoxs = [];
// eventBoxs = newEventBoxs;

236
src/jlmap3d/lesson3d/utils/fire.js Normal file
View File

@ -0,0 +1,236 @@
export function Fire() {
let scope = this;
this.points = {};
var last_time_activate = Date.now();
this.init = function(scene){
scope.points = new Points();
scope.points.init();
scene.add(scope.points.obj);
}
this.update = function(){
var now = Date.now();
scope.points.update();
if (now - last_time_activate > 10) {
scope.points.activateMover();
last_time_activate = Date.now();
}
}
var Mover = function() {
this.position = new THREE.Vector3();
this.velocity = new THREE.Vector3();
this.acceleration = new THREE.Vector3();
this.anchor = new THREE.Vector3();
this.mass = 1;
this.r = 0;
this.g = 0;
this.b = 0;
this.a = 1;
this.time = 0;
this.is_active = false;
};
Mover.prototype = {
init: function(vector) {
this.position = vector.clone();
this.velocity = vector.clone();
this.anchor = vector.clone();
this.acceleration.set(0, 0, 0);
this.a = 1;
this.time = 0;
},
updatePosition: function() {
this.position.copy(this.velocity);
},
updateVelocity: function() {
this.acceleration.divideScalar(this.mass);
this.velocity.add(this.acceleration);
// if (this.velocity.distanceTo(this.position) >= 1) {
// this.direct(this.velocity);
// }
},
applyForce: function(vector) {
this.acceleration.add(vector);
},
applyFriction: function() {
var friction = friction(this.acceleration, 0.1);
this.applyForce(friction);
},
applyDragForce: function(value) {
var drag = drag(this.acceleration, value);
this.applyForce(drag);
},
hook: function(rest_length, k) {
var force = hook(this.velocity, this.anchor, rest_length, k);
this.applyForce(force);
},
activate: function() {
this.is_active = true;
},
inactivate: function() {
this.is_active = false;
}
};
var Points = function() {
this.movers_num = 3000;
this.movers = [];
this.geometry = null;
this.material = null;
this.obj = null;
this.texture = null;
this.antigravity = new THREE.Vector3(0, 0.1, 0);
};
Points.prototype = {
init: function() {
this.createTexture();
this.geometry = new THREE.Geometry();
this.material = new THREE.PointsMaterial({
color: 0xff6633,
size: 3,
transparent: true,
opacity: 0.5,
map: this.texture,
// depthTest: false,
depthWrite:false,
alphaTest: 0.1,
blending: THREE.AdditiveBlending,
});
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)));
this.movers.push(mover);
this.geometry.vertices.push(mover.position);
}
this.obj = new THREE.Points(this.geometry, this.material);
this.obj.renderOrder = 1;
},
update: function() {
var points_vertices = [];
for (var i = 0; i < this.movers.length; i++) {
var mover = this.movers[i];
if (mover.is_active) {
mover.applyForce(this.antigravity);
mover.updateVelocity();
mover.updatePosition();
if (mover.position.y > 8) {
mover.inactivate();
}
}
points_vertices.push(mover.position);
}
this.obj.geometry.vertices = points_vertices;
this.obj.geometry.verticesNeedUpdate = true;
},
activateMover: function() {
var count = 0;
for (var i = 0; i < this.movers.length; i++) {
var mover = this.movers[i];
if (mover.is_active) continue;
var rad1 = getRadian(Math.log(getRandomInt(200, 256)) / Math.log(256) * 270);
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.applyForce(force);
count++;
if (count >= 10) break;
}
},
createTexture: function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var grad = null;
canvas.width = 200;
canvas.height = 200;
grad = ctx.createRadialGradient(100, 100, 20, 100, 100, 100);
grad.addColorStop(0.2, 'rgba(255, 255, 255, 1)');
grad.addColorStop(0.5, 'rgba(255, 255, 255, 0.3)');
grad.addColorStop(1.0, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = grad;
ctx.arc(100, 100, 100, 0, Math.PI / 180, true);
ctx.fill();
this.texture = new THREE.Texture(canvas);
this.texture.minFilter = THREE.NearestFilter;
this.texture.needsUpdate = true;
}
};
var HemiLight = function() {
this.rad1 = getRadian(60);
this.rad2 = getRadian(30);
this.range = 1000;
this.hex1 = 0xffffff;
this.hex2 = 0x333333;
this.intensity = 1;
this.obj;
};
HemiLight.prototype = {
init: function(hex1, hex2) {
if (hex1) this.hex1 = hex1;
if (hex2) this.hex2 = hex2;
this.obj = new THREE.HemisphereLight(this.hex1, this.hex2, this.intensity);
this.setPosition();
},
setPosition: function() {
var points = getSpherical(this.rad1, this.rad2, this.range);
this.obj.position.copy(points);
}
};
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
function getDegree(radian) {
return radian / Math.PI * 180;
}
function getRadian(degrees) {
return degrees * Math.PI / 180;
}
function getSpherical(rad1, rad2, r) {
var x = Math.cos(rad1) * Math.cos(rad2) * r;
var z = Math.cos(rad1) * Math.sin(rad2) * r;
var y = Math.sin(rad1) * r;
return new THREE.Vector3(x, y, z);
}
function friction(acceleration, mu, normal, mass) {
var force = acceleration.clone();
if (!normal) normal = 1;
if (!mass) mass = 1;
force.multiplyScalar(-1);
force.normalize();
force.multiplyScalar(mu);
return force;
}
function drag(acceleration, value) {
var force = acceleration.clone();
force.multiplyScalar(-1);
force.normalize();
force.multiplyScalar(acceleration.length() * value);
return force;
}
function hook(velocity, anchor, rest_length, k) {
var force = velocity.clone().sub(anchor);
var distance = force.length() - rest_length;
force.normalize();
force.multiplyScalar(-1 * k * distance);
return force;
}
}

154
src/jlmap3d/lesson3dedit/assetmodelmanager/assetmodelmanager.js
View File

@ -2,7 +2,7 @@ import { BASE_ASSET_API } from '@/api/jlmap3d/assets3d.js';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
export function AssetModelManager(scene) {
export function AssetModelManager(editor,scene) {
let scope = this;
@ -10,7 +10,18 @@ export function AssetModelManager(scene) {
this.otherModel = new THREE.Group();
scene.add(this.otherModel);
let groupList = [];
groupList["standstation"] = new THREE.Group();
groupList["stopstation"] = new THREE.Group();
groupList["device"] = new THREE.Group();
groupList["xl"] = new THREE.Group();
groupList["dc"] = new THREE.Group();
let geometryDevice = new THREE.PlaneGeometry( 100, 100, 32 );
let materialDevice = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
let planeDevice = new THREE.Mesh( geometryDevice, materialDevice );
planeDevice.rotation.x = -Math.PI/2;
groupList["device"].add(planeDevice);
this.loadAsset = [];
@ -23,6 +34,7 @@ export function AssetModelManager(scene) {
assetType:'static',
isUse:true,
resourceType:"三维课程",
sceneType:"standstation",
};
scope.staticAsset['FTDH'] = {
@ -33,6 +45,7 @@ export function AssetModelManager(scene) {
assetType:'static',
isUse:true,
resourceType:"三维课程",
sceneType:"standstation",
};
scope.staticAsset['IN'] = {
@ -43,6 +56,7 @@ export function AssetModelManager(scene) {
assetType:'static',
isUse:true,
resourceType:"三维课程",
sceneType:"standstation",
};
scope.staticAsset['OUT'] = {
@ -53,6 +67,7 @@ export function AssetModelManager(scene) {
assetType:'static',
isUse:true,
resourceType:"三维课程",
sceneType:"standstation",
};
scope.staticAsset['PBMDH'] = {
@ -63,12 +78,30 @@ export function AssetModelManager(scene) {
assetType:'static',
isUse:true,
resourceType:"三维课程",
sceneType:"standstation",
};
//场景中可触发事件模型
this.lessonTriggerList = [];
scope.lessonTriggerList["standstation"] = [];
scope.lessonTriggerList["stopstation"] = [];
scope.lessonTriggerList["device"] = [];
scope.lessonTriggerList["xl"] = [];
scope.lessonTriggerList["dc"] = [];
this.changeSceneGroup = function(groupType){
console.log(groupType);
console.log(editor.nowSceneType);
console.log(scope.lessonTriggerList[editor.nowSceneType]);
editor.nowSceneType = groupType;
scene.remove(this.otherModel);
this.otherModel = groupList[groupType];
scene.add(this.otherModel);
updateTriggerList(scope.lessonTriggerList[editor.nowSceneType]);
}
this.saveModelList = function(){
let modelList = {
assetList:[],
@ -83,51 +116,63 @@ export function AssetModelManager(scene) {
assetType:scope.loadAsset[k].assetType,
isUse:scope.loadAsset[k].isUse,
resourceType:scope.loadAsset[k].resourceType,
sceneType:scope.loadAsset[k].sceneType,
});
}
for(let i=0;i<scope.lessonTriggerList.length;i++){
if(scope.lessonTriggerList[i].showType != "default"){
modelList.modelList.push({
name:scope.lessonTriggerList[i].name,
modelId:scope.lessonTriggerList[i].modelId,
label:scope.lessonTriggerList[i].label,
pos:{
x:scope.lessonTriggerList[i].position.x,
y:scope.lessonTriggerList[i].position.y,
z:scope.lessonTriggerList[i].position.z
},
rot:{
x:scope.lessonTriggerList[i].rotation.x,
y:scope.lessonTriggerList[i].rotation.y,
z:scope.lessonTriggerList[i].rotation.z
},
showType:scope.lessonTriggerList[i].showType,
visible:scope.lessonTriggerList[i].visible,
});
for(let g in scope.lessonTriggerList){
for(let i=0;i<scope.lessonTriggerList[g].length;i++){
if(scope.lessonTriggerList[g][i].showType != "default"){
modelList.modelList.push({
name:scope.lessonTriggerList[g][i].name,
modelId:scope.lessonTriggerList[g][i].modelId,
label:scope.lessonTriggerList[g][i].label,
pos:{
x:scope.lessonTriggerList[g][i].position.x,
y:scope.lessonTriggerList[g][i].position.y,
z:scope.lessonTriggerList[g][i].position.z
},
rot:{
x:scope.lessonTriggerList[g][i].rotation.x,
y:scope.lessonTriggerList[g][i].rotation.y,
z:scope.lessonTriggerList[g][i].rotation.z
},
showType:scope.lessonTriggerList[g][i].showType,
visible:scope.lessonTriggerList[g][i].visible,
sceneType:scope.lessonTriggerList[g][i].sceneType,
});
}
}
}
// console.log(modelList);
return modelList;
}
//加载课程资源
this.lessonAssetsLoader = function(assetList,modelList){
this.lessonAssetsLoader = function(lessonData){
let initlist = [];
if(assetList){
if(lessonData){
// scene.remove(this.otherModel);
this.otherModel = groupList[lessonData.lessonProgress[0].progressScene];
scene.add(this.otherModel);
let assetList = lessonData.assetList;
for(let i = 0;i<assetList.length;i++){
assetList[i].mesh = "";
// assetList[i].sceneType = "standstation";
if(assetList[i].modelId == "default1"){
}else{
scope.loadAsset[assetList[i].modelId] = assetList[i];
}
}
}else{
this.otherModel = groupList["standstation"];
scene.add(this.otherModel);
}
for(let k in scope.staticAsset){
initlist.push(fbxpromise(scope.staticAsset[k]));
}
@ -139,9 +184,11 @@ export function AssetModelManager(scene) {
Promise.all(initlist).then((result) => {
initTriggerList();
if(modelList){
if(lessonData){
let modelList = lessonData.modelList;
for(let i=0;i<modelList.length;i++){
let newModelTrigger = scope.loadAsset[modelList[i].modelId].mesh.clone(true);
// modelList[i].sceneType = "standstation";
newModelTrigger.showType = "loadModel";
newModelTrigger.label = modelList[i].label;
newModelTrigger.modelId = modelList[i].modelId;
@ -152,12 +199,14 @@ export function AssetModelManager(scene) {
newModelTrigger.rotation.x = modelList[i].rot.x;
newModelTrigger.rotation.y = modelList[i].rot.y;
newModelTrigger.rotation.z = modelList[i].rot.z;
scope.otherModel.add(newModelTrigger);
scope.lessonTriggerList.push(newModelTrigger);
newModelTrigger.sceneType = modelList[i].sceneType;
scope.lessonTriggerList[modelList[i].sceneType].push(newModelTrigger);
groupList[modelList[i].sceneType].add(newModelTrigger);
}
}
updateTriggerList(scope.lessonTriggerList);
editor.changeIndex(0);
updateTriggerList(scope.lessonTriggerList[editor.nowSceneType]);
resolve("loaderassets"); //['成功了', 'success']
}).catch((error) => {
@ -167,12 +216,12 @@ export function AssetModelManager(scene) {
});
}
this.deleteAsset = function(selectModel){
this.deleteAsset = function(selectModel,nowSceneType){
scope.otherModel.remove(selectModel);
for(let i=0;i<scope.lessonTriggerList.length;i++){
if(scope.lessonTriggerList[i].uuid == selectModel.uuid){
if(scope.lessonTriggerList[nowSceneType][i].uuid == selectModel.uuid){
scope.lessonTriggerList.splice(i,1);
updateTriggerList(scope.lessonTriggerList);
updateTriggerList(scope.lessonTriggerList[nowSceneType]);
break;
}
}
@ -191,15 +240,15 @@ export function AssetModelManager(scene) {
function initTriggerList(){
scope.staticAsset['station'].mesh.getObjectByName("FTAN").showType = "default";
scope.staticAsset['station'].mesh.getObjectByName("FTAN").label = "扶梯急停按钮";
scope.lessonTriggerList.push(scope.staticAsset['station'].mesh.getObjectByName("FTAN"));
scope.lessonTriggerList["standstation"].push(scope.staticAsset['station'].mesh.getObjectByName("FTAN"));
scope.staticAsset['station'].mesh.getObjectByName("FTKG").showType = "default";
scope.staticAsset['station'].mesh.getObjectByName("FTKG").label = "扶梯钥匙孔";
scope.lessonTriggerList.push(scope.staticAsset['station'].mesh.getObjectByName("FTKG"));
scope.lessonTriggerList["standstation"].push(scope.staticAsset['station'].mesh.getObjectByName("FTKG"));
scope.staticAsset['station'].mesh.getObjectByName("spbmkg").showType = "default";
scope.staticAsset['station'].mesh.getObjectByName("spbmkg").label = "屏蔽门开关";
scope.lessonTriggerList.push(scope.staticAsset['station'].mesh.getObjectByName("spbmkg"));
scope.lessonTriggerList["standstation"].push(scope.staticAsset['station'].mesh.getObjectByName("spbmkg"));
@ -207,7 +256,7 @@ export function AssetModelManager(scene) {
}
//动态加载资源
this.lessonAssetsNewLoader = function(assetData,pos){
this.lessonAssetsNewLoader = function(assetData,pos,nowSceneType){
let isLoaded = false;
var rand = Math.floor(Math.random () * 900) + 100;
if(scope.loadAsset[assetData.id]){
@ -216,9 +265,12 @@ export function AssetModelManager(scene) {
newModelTrigger.showType = "loadModel";
newModelTrigger.label = assetData.packageName +rand;
newModelTrigger.position.copy(pos);
scope.otherModel.add(newModelTrigger);
scope.lessonTriggerList.push(newModelTrigger);
updateTriggerList(scope.lessonTriggerList);
newModelTrigger.sceneType = nowSceneType;
scope.lessonTriggerList[nowSceneType].push(newModelTrigger);
groupList[nowSceneType].add(newModelTrigger);
updateTriggerList(scope.lessonTriggerList[nowSceneType]);
}else{
scope.loadAsset[assetData.id] = {
modelId:assetData.id,
@ -228,6 +280,7 @@ export function AssetModelManager(scene) {
assetType:'loadModel',
isUse:true,
resourceType:"三维课程",
sceneType:nowSceneType,
};
console.log("new");
@ -236,15 +289,16 @@ export function AssetModelManager(scene) {
console.log(scope.loadAsset[assetData.id].mesh);
let newModelTrigger = scope.loadAsset[assetData.id].mesh.clone(true);
newModelTrigger.showType = "loadModel";
newModelTrigger.modelId = assetData.id;
newModelTrigger.label = assetData.packageName+rand;
newModelTrigger.position.copy(pos);
scope.otherModel.add(newModelTrigger);
scope.lessonTriggerList.push(newModelTrigger);
newModelTrigger.sceneType = nowSceneType;
updateTriggerList(scope.lessonTriggerList);
scope.lessonTriggerList[nowSceneType].push(newModelTrigger);
groupList[nowSceneType].add(newModelTrigger);
updateTriggerList(scope.lessonTriggerList[nowSceneType]);
// resolve("loadednew");
});
}
@ -255,14 +309,22 @@ 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 ) {
if(asset.sceneType){
object.sceneType = asset.sceneType;
}
asset.mesh = object;
scene.add(object);
groupList[asset.sceneType].add(object);
// scope.otherModel.add(object);
resolve();
} );
}else{
loader.load( BASE_ASSET_API+asset.url, function ( object ) {
if(asset.sceneType){
object.sceneType = asset.sceneType;
}
asset.mesh = object;
if(asset.assetType == "default"){

40
src/jlmap3d/lesson3dedit/lesson3deditor.js
View File

@ -26,7 +26,7 @@ export function Lesson3dEditor(dom,lessonData) {
let scope = this;
this.dom = dom;
this.nowSceneType = "";
//定义相机
this.camerass = new THREE.PerspectiveCamera(70, dom.offsetWidth / dom.offsetHeight, 0.01, 1000);
this.camerass.position.set(0, 80, 40);
@ -35,7 +35,9 @@ export function Lesson3dEditor(dom,lessonData) {
//定义场景(渲染容器)
scene = new THREE.Scene();
scene.background = new THREE.Color(0xa0a0a0);
let bgTexture = new THREE.TextureLoader().load(JL3D_LOCAL_STATIC+"/background/other.jpg");
scene.background = bgTexture;
// scene.background = new THREE.Color(0xa0a0a0);
this.renderer = new THREE.WebGLRenderer({ antialias: true });
@ -74,12 +76,12 @@ export function Lesson3dEditor(dom,lessonData) {
scene.add(transcontrol);
let assetModelManager = new AssetModelManager(scope,scene);
let assetModelManager = new AssetModelManager(scene);
console.log(lessonData);
if(lessonData){
scope.nowSceneType = lessonData.lessonProgress[0].progressScene;
if(lessonData.assetList.length>0 || lessonData.modelList.length>0){
assetModelManager.lessonAssetsLoader(lessonData.assetList,lessonData.modelList);
assetModelManager.lessonAssetsLoader(lessonData);
}else{
assetModelManager.lessonAssetsLoader();
}
@ -108,6 +110,30 @@ export function Lesson3dEditor(dom,lessonData) {
scope.renderer.setSize(dom.offsetWidth,dom.offsetHeight);
}
this.changeIndex = function(nowIndex){
lessonIndex = nowIndex;
scope.nowSceneType = lessonData.lessonProgress[lessonIndex].progressScene;
// if(lessonData.lessonProgress[lessonIndex].roleName == nowRole){
// controlManager.initControlMode(lessonIndex);
// controlManager.initRoleMode(true,nowRole);
// controlManager.changeIndexEvent(lessonData.lessonProgress[lessonIndex].action,true);
// }else{
// controlManager.initRoleMode(false,nowRole);
// controlManager.changeIndexEvent(lessonData.lessonProgress[lessonIndex].action,false);
// }
}
this.editActionManager = function(type,value1,value2){
console.log(type);
console.log(value1);
console.log(value2);
if(type == "changeScene"){
assetModelManager.changeSceneGroup(value1);
scope.nowSceneType = value1;
}
}
this.createModelTrigger = function(assetData,mousePos){
var mouse = new THREE.Vector2();
@ -123,7 +149,7 @@ export function Lesson3dEditor(dom,lessonData) {
var intersects = raycaster.intersectObjects( scene.children,true );
if(intersects.length>0){
assetModelManager.lessonAssetsNewLoader(assetData,intersects[0].point);
assetModelManager.lessonAssetsNewLoader(assetData,intersects[0].point,scope.nowSceneType);
}
}
@ -138,6 +164,6 @@ export function Lesson3dEditor(dom,lessonData) {
this.deleteModel = function(selectModel){
transcontrol.detach();
assetModelManager.deleteAsset(selectModel);
assetModelManager.deleteAsset(selectModel,scope.nowSceneType);
}
}

2
src/views/jlmap3d/lesson3dedit/component/lessonprogress.vue
View File

@ -15,7 +15,7 @@
icon="el-icon-folder-add" @click="addProgress"></div>
</el-tab-pane>
<el-tab-pane label="课程三维资源列表" name="assetlist" >
<el-tab-pane label="场景三维资源" name="assetlist" >
<div class="progressdiv" v-for="(elementtrigger,indextrigger) in triggerList" :key="elementtrigger.label">
<div class="changeprogressdiv" @click="selectModel(elementtrigger)">{{elementtrigger.label}}</div>
<div class="delprogressdiv" v-if="(elementtrigger.showType == 'loadModel')" @click="deleteModel(elementtrigger)" >X</div>

24
src/views/jlmap3d/lesson3dedit/component/lessonsetup.vue
View File

@ -8,26 +8,10 @@
</el-form-item>
<el-form-item label="课程类型">
<el-select v-model="form.type" placeholder="请选择活动区域">
<el-option label="ATC(CBTC)多媒体教学演练系统" value="1"></el-option>
<el-option label="ZDJ9转辙机检修作业指导虚拟仿真系统" value="2"></el-option>
<el-option label="城市轨道交通车站机电设备虚拟仿真系统" value="3"></el-option>
<el-option label="城市轨道交通电客车虚拟仿真教学系统" value="4"></el-option>
<el-option label="城市轨道交通服务礼仪一点通系统" value="5"></el-option>
<el-option label="城市轨道交通基础知识系统(视频无必要做)" value="6"></el-option>
<el-option label="城市轨道交通考试系统(开始系统另算)" value="7"></el-option>
<el-option label="城市轨道交通手信号系统" value="8"></el-option>
<el-option label="城市轨道交通行车组织系统" value="9"></el-option>
<el-option label="城市轨道交通作业多媒体系统" value="10"></el-option>
<el-option label="城市轨道线路系统" value="11"></el-option>
<el-option label="单车实验虚拟仿真实训系统操作视频" value="12"></el-option>
<el-option label="地铁应急仿真实训操作视频" value="13"></el-option>
<el-option label="地铁站务人员各岗一日作业虚拟仿真实训系统" value="14"></el-option>
<el-option label="电话闭塞" value="15"></el-option>
<el-option label="机电设备短视频" value="16"></el-option>
<el-option label="一次乘务" value="17"></el-option>
<el-option label="一日作业完整版" value="18"></el-option>
<el-option label="一日作业演示版" value="19"></el-option>
<el-select v-model="form.type" placeholder="请选择课程类型">
<el-option label="地铁车站" value="1"></el-option>
<el-option label="场景展示" value="2"></el-option>
<el-option label="单体设备展示" value="3"></el-option>
</el-select>
</el-form-item>

8
src/views/jlmap3d/lesson3dedit/component/property.vue
View File

@ -14,7 +14,10 @@
</el-form-item>
<el-form-item label="三维场景设置：">
<el-select v-model="lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene" placeholder="请选择场景">
<el-select
v-model="lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene"
placeholder="请选择场景"
@change="selectScene">
<el-option v-for="sceneItem in sceneDataList" :label="sceneItem.label" :value="sceneItem.value" :key="sceneItem.value"></el-option>
</el-select>
</el-form-item>
@ -383,6 +386,9 @@
}
},
selectScene(val){
editAction("changeScene",val);
},
updateData(){
// this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].stepTipsData;
},

5
src/views/jlmap3d/lesson3dedit/lesson3dedit.vue
View File

@ -200,6 +200,7 @@
},
mounted() {
window.updateTriggerList = this.updateTriggerList;
window.editAction = this.editAction;
this.init(this.$route.query.lessonId);
},
@ -268,6 +269,7 @@
changeProgressView(viewIndex){
this.lessonEditIndex = viewIndex;
this.$refs.lessonProPerty.reset();
this.jl3d.changeIndex(viewIndex);
},
removeProgress(removeIndex){
this.lessonData.removeLessonProgress(removeIndex);
@ -292,6 +294,9 @@
this.triggerList = newTriggerList;
console.log(this.triggerList);
},
editAction(type,value1,value2){
this.jl3d.editActionManager(type,value1,value2);
},
jumpPlayer(){
this.$router.push({ path: '/design/jlmap3d/lesson3dplayer', query: {lessonId: this.$route.query.lessonId} });