测试版本三维沙盘增加镜头控制模型大小,信号机朝向,修改单线路

This commit is contained in:
sunzhenyu 2021-01-15 09:35:49 +08:00
parent d3c833a35f
commit b6ab1b3c6a
5 changed files with 52 additions and 65 deletions

View File

@ -54,6 +54,17 @@ export function Jl3dSandBoxTest(dom,textUi,skinCode,routegroup,token) {
renderer.render( scene, camera );
controls.update();
const dist = camera.position.y;
const vFOV = THREE.Math.degToRad(camera.fov);
const size = 1 * Math.tan(vFOV / 2) * dist;
const scaleFactor = 130;
const scale = size / scaleFactor;
for(let i=0;i<manager.station.children.length;i++){
manager.station.children[i].scale.set(scale,scale,scale);
}
for(let i=0;i<manager.train.trainGroup.children.length;i++){
manager.train.trainGroup.children[i].scale.set(scale,scale,scale);
}
requestAnimationFrame(animate);
}

View File

@ -21,9 +21,9 @@ export function dataManager(scene,textUi,camera,routegroup) {
let section = new sectionModel(scene);
let signal = new signalModel(scene);
let station = new THREE.Group();
scene.add( station );
let train = new trainModel(scene);
this.station = new THREE.Group();
scene.add( scope.station );
this.train = new trainModel(scene);
this.topCurve = "";
this.downCurve = "";
console.log(routegroup);
@ -54,10 +54,10 @@ export function dataManager(scene,textUi,camera,routegroup) {
console.log(data);
return loadMapData(skinCode);
}).then(function(data){
scope.nowConnect = new sandBoxConnect(scope,routegroup,section,signal,station,train);
scope.nowConnect = new sandBoxConnect(scope,routegroup,section,signal,scope.station,scope.train);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
raycasterList.push(station);
raycasterList.push(train.trainGroup);
raycasterList.push(scope.station);
raycasterList.push(scope.train.trainGroup);
});
@ -119,7 +119,7 @@ export function dataManager(scene,textUi,camera,routegroup) {
console.log(netdata);
section.init(netdata.data.sectionList,netdata.data.switchList,stationData);
signal.init(netdata.data.signalList,section.topData,section.downData,scope.topCurve,scope.downCurve,modelmanager.signal);
train.init(netdata.data.trainList);
scope.train.init(netdata.data.trainList);
resolve("loadMap");
});
});
@ -175,35 +175,10 @@ export function dataManager(scene,textUi,camera,routegroup) {
curveTop.closed = false;
scope.topCurve = curveTop;
let pointsArray = [];
let greenMaterial =new THREE.MeshBasicMaterial({color: 0xffff00,opacity: 0.75});
for(var i = 0.00; i <= 1.00; i += 0.005){
var point = curveTop.getPointAt(i);
var tangent = curveTop.getTangent(i);
var extension1 = new THREE.Vector3(tangent.x*2,0,tangent.z*2);
var extension2 = new THREE.Vector3(extension1.x*2,0,extension1.y*2);
var tangentGeometry = new THREE.Geometry();
tangentGeometry.vertices.push(tangent, extension1, extension2);
var tangentLine = new THREE.Line(tangentGeometry,greenMaterial);
tangentLine.position.set(point.x, point.y, point.z);
tangentLine.updateMatrixWorld(); // VERY IMPORTANT
var normal = tangentLine.clone();
normal.rotateZ(Math.PI/2);
var normalLastVertex = normal.geometry.vertices[2].clone();
normalLastVertex.applyMatrix4(normal.matrixWorld); //convert to world coords.
pointsDown.push(normalLastVertex); //for using them out of the loop
}
var curveDown = new THREE.CatmullRomCurve3(pointsDown );
var curveDown = new THREE.CatmullRomCurve3(pointsTop );
curveDown.curveType = "chordal";
curveDown.tension = 0.15;
curveDown.closed = false;
@ -217,33 +192,33 @@ export function dataManager(scene,textUi,camera,routegroup) {
extrudePath : curveTop,
};
var extrudeSettingsDown = {
steps : pointsDown.length*2,
curveSegments : 1,
bevelSegments : 1,
bevelEnabled : false,
extrudePath : curveDown,
};
// var extrudeSettingsDown = {
// steps : pointsDown.length*2,
// curveSegments : 1,
// bevelSegments : 1,
// bevelEnabled : false,
// extrudePath : curveDown,
// };
var shapeTop = new THREE.Shape();
shapeTop.moveTo( 0,-1 );
shapeTop.lineTo( 0,1 );
var shapeDown = new THREE.Shape();
shapeDown.moveTo( 0,-1 );
shapeDown.lineTo( 0,1 );
// var shapeDown = new THREE.Shape();
// shapeDown.moveTo( 0,-1 );
// shapeDown.lineTo( 0,1 );
let materialSection1 = new THREE.MeshPhongMaterial( { color : 0x3366ff } );
let materialSection2 = new THREE.MeshPhongMaterial( { color : 0x336600 } );
// let materialSection2 = new THREE.MeshPhongMaterial( { color : 0x336600 } );
var geometryTop = new THREE.ExtrudeBufferGeometry( shapeTop, extrudeSettingsTop );
var curveTopMesh = new THREE.Mesh( geometryTop,materialSection1) ;
scene.add(curveTopMesh);
var geometryDown = new THREE.ExtrudeBufferGeometry( shapeDown, extrudeSettingsDown );
var curveDownMesh = new THREE.Mesh( geometryDown,materialSection2) ;
scene.add(curveDownMesh);
// var geometryDown = new THREE.ExtrudeBufferGeometry( shapeDown, extrudeSettingsDown );
// var curveDownMesh = new THREE.Mesh( geometryDown,materialSection2) ;
// scene.add(curveDownMesh);
for(let j=0;j<stationListData.stations.length;j++){
@ -253,10 +228,10 @@ export function dataManager(scene,textUi,camera,routegroup) {
let pos = stationListData.stations[j].xy_coords.split(";");
cube.name = stationListData.stations[j].name;
cube.position.set((pos[0] -originX+0.0005)*double,0.2,-(pos[1]-originY+0.0005)*double);
cube.position.set((pos[0] -originX)*double,0.2,-(pos[1]-originY)*double);
cube.rotation.x = Math.PI/2;
// console.log(cube.position);
station.add(cube);
scope.station.add(cube);
}
resolve("loadJson");

View File

@ -2,15 +2,20 @@ export function signalModel(scene) {
let scope = this;
this.init = function(signalData,topData,downData,topCurve,downCurve,originMesh){
console.log(originMesh);
for(let i=0;i<signalData.length;i++){
if(signalData[i].right == true){
for(let j=0;j<topData.length;j++){
if(signalData[i].sectionCode == topData[j].code){
let newsignal = originMesh.mesh.clone(true);
newsignal.up = new THREE.Vector3(0,0,-1);
let tangent = topCurve.getTangent(topData[j].rightProgress);
let rotenum = newsignal.up.angleTo(tangent);
newsignal.rotation.z = rotenum;
newsignal.position.copy(topCurve.getPoint(topData[j].rightProgress));
newsignal.position.x +=-2;
newsignal.position.z +=-2;
scene.add( newsignal );
j = topData.length;
}
@ -20,18 +25,14 @@ export function signalModel(scene) {
for(let j=0;j<downData.length;j++){
if(signalData[i].sectionCode == downData[j].code){
let newsignal = originMesh.mesh.clone(true);
newsignal.up = new THREE.Vector3(0,0,1);
let tangent = downCurve.getTangent(topData[j].leftProgress);
let rotenum = newsignal.up.angleTo(tangent);
newsignal.rotation.z = rotenum;
newsignal.position.copy(downCurve.getPoint(downData[j].leftProgress));
newsignal.up = new THREE.Vector3(1,0,0);
newsignal.axis = new THREE.Vector3();
let tangent = downCurve.getTangentAt(downData[j].leftProgress).normalize();
newsignal.axis.crossVectors(newsignal.up, tangent).normalize();
let radians = Math.acos(newsignal.up.dot(tangent));
newsignal.quaternion.setFromAxisAngle(newsignal.axis, radians);
newsignal.position.x +=2;
newsignal.position.z +=2;
scene.add( newsignal );
j = downData.length;
}

View File

@ -6,7 +6,7 @@ export function trainModel(scene) {
this.init = function(trainData){
for(let i=0;i<trainData.length;i++){
var geometry = new THREE.BoxGeometry( 30, 10, 10 );
var geometry = new THREE.BoxGeometry( 15, 5, 5 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var trainBox = new THREE.Mesh( geometry, material );
trainBox.code = trainData[i].code;
@ -15,7 +15,7 @@ export function trainModel(scene) {
trainBox.dispose = false;
trainBox.up = new THREE.Vector3(1, 0, 0);
trainBox.axis = new THREE.Vector3();
trainBox.position.y = 5;
trainBox.position.y = 2.5;
scope.trainlist[trainData[i].groupNumber] = trainBox;
}
}

View File

@ -141,7 +141,7 @@ import axios from 'axios';
methods: {
changeTrainSelect(mode){
if(mode == "isTraining"){
// this.isTraining = false;
this.isTraining = false;
}
},
currentsel(selVal){