From a9a62b924f5656d4d700fe42e3654e1fc31c314c Mon Sep 17 00:00:00 2001 From: sunzhenyu Date: Fri, 13 Dec 2019 09:14:28 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BB=A7=E7=94=B5=E5=99=A8?= =?UTF-8?q?=E7=95=8C=E9=9D=A2=E5=8A=A8=E7=94=BB=EF=BC=8C=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E7=BB=A7=E7=94=B5=E5=99=A8=E6=98=BE=E7=A4=BA=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../jl3ddevicetrain/component/jdqcontrol.js | 80 +++- .../jl3ddevicetrain/component/moveanimate.js | 211 +++++++++-- src/jlmap3d/jl3ddevicetrain/config.js | 39 +- .../jl3ddevicetrain/jl3ddevicetrain.js | 353 ++++++++++++++++-- src/jlmap3d/jl3ddevicetrain/loader.js | 101 ++++- src/jlmap3d/main/loaders/FBXLoader.js | 4 +- src/utils/baseUrl.js | 4 +- .../devicetrain/component/devicetrainmenu.vue | 151 ++++++++ .../jlmap3d/devicetrain/jl3ddevicetrain.vue | 110 +++++- static/model/jdq/jdq.FBX | Bin 5480816 -> 0 bytes static/model/jdq/jdq1000.FBX | Bin 0 -> 1624896 bytes static/model/jdq/jdq1000111.FBX | Bin 0 -> 1609184 bytes static/model/jdq/jdq1700.FBX | Bin 0 -> 1865248 bytes static/model/jdq/jdq480.FBX | Bin 0 -> 1771840 bytes static/model/jdq/jdqg.FBX | Bin 0 -> 1558720 bytes static/model/jdq/jdqh18.FBX | Bin 0 -> 1746528 bytes 16 files changed, 956 insertions(+), 97 deletions(-) create mode 100644 src/views/jlmap3d/devicetrain/component/devicetrainmenu.vue delete mode 100644 static/model/jdq/jdq.FBX create mode 100644 static/model/jdq/jdq1000.FBX create mode 100644 static/model/jdq/jdq1000111.FBX create mode 100644 static/model/jdq/jdq1700.FBX create mode 100644 static/model/jdq/jdq480.FBX create mode 100644 static/model/jdq/jdqg.FBX create mode 100644 static/model/jdq/jdqh18.FBX diff --git a/src/jlmap3d/jl3ddevicetrain/component/jdqcontrol.js b/src/jlmap3d/jl3ddevicetrain/component/jdqcontrol.js index 118180f7e..6cb4c4c61 100644 --- a/src/jlmap3d/jl3ddevicetrain/component/jdqcontrol.js +++ b/src/jlmap3d/jl3ddevicetrain/component/jdqcontrol.js @@ -2,13 +2,91 @@ export function Jdqcontrol(){ let scope = this; + this.devicelist = []; + this.jdqinit = function(){ } this.jdqraycast = function(){ - + } + this.jdqdevicelist = function(selectmodel){ + if(scope.devicelist.length>0){ + scope.devicelist = []; + } + for(let i=0,leni=selectmodel.children.length;i=0.99){ - scope.animatelist[i].enable = false; - scope.animatelist[i].status = "end"; - }else{ - let point = scope.animatelist[i].curve.getPointAt(scope.animatelist[i].progress); - scope.animatelist[i].connectmodel.position.x = point.x; - scope.animatelist[i].connectmodel.position.y = point.y; - scope.animatelist[i].connectmodel.position.z = point.z; - if(scope.animatelist[i].directchange){ - let tangent = scope.animatelist[i].curve.getPointAt(scope.animatelist[i].progress+0.001); - // scope.animatelist[i] + if(scope.enable){ + // console.log(scope.enable); + for(let k in scope.animatelist){ + if(scope.animatelist[k].enable){ + console.log(scope.animatelist[k].progress); + if(scope.animatelist[k].progress>=0.99){ + scope.animatelist[k].enable = false; + scope.animatelist[k].status = "end"; + scope.animatelist[k].progress = 0; + }else{ + let point = scope.animatelist[k].curve.getPointAt(scope.animatelist[k].progress); + console.log(scope.animatelist[k].progress); + scope.animatelist[k].connectmodel.position.x = point.x; + scope.animatelist[k].connectmodel.position.y = point.y; + scope.animatelist[k].connectmodel.position.z = point.z; + if(scope.animatelist[k].directchange){ + let tangent = scope.animatelist[k].curve.getPointAt(scope.animatelist[k].progress+0.001); + // scope.animatelist[k] tangent = null; } - scope.animatelist[i].progress += 0.003; + scope.animatelist[k].progress += scope.animatelist[k].speed; point = null; } diff --git a/src/jlmap3d/jl3ddevicetrain/config.js b/src/jlmap3d/jl3ddevicetrain/config.js index 5e02750d0..bb97621c8 100644 --- a/src/jlmap3d/jl3ddevicetrain/config.js +++ b/src/jlmap3d/jl3ddevicetrain/config.js @@ -1,13 +1,44 @@ var Staticmodel = { - Jdq: { + Jdq1: { id: "1", - name: "继电器", + name: "继电器1700", + deviceType: "jdq1700", + type: "training", + picUrl: "", + assetUrl: "../../static/model/jdq/jdq1700.FBX" + }, + Jdq2: { + id: "1", + name: "继电器1000", deviceType: "jdq", type: "training", picUrl: "", - assetUrl: "../../static/model/jdq/jdq.FBX" + assetUrl: "../../static/model/jdq/jdq1000.FBX" + }, + Jdq3: { + id: "1", + name: "继电器h18", + deviceType: "jdq", + type: "training", + picUrl: "", + assetUrl: "../../static/model/jdq/jdqh18.FBX" + }, + Jdq4: { + id: "1", + name: "继电器480", + deviceType: "jdq", + type: "training", + picUrl: "", + assetUrl: "../../static/model/jdq/jdq480.FBX" + }, + Jdqg:{ + id: "0", + name: "继电器柜", + deviceType: "jdqg", + type: "training", + picUrl: "", + assetUrl: "../../static/model/jdq/jdqg.FBX" } - } export { Staticmodel } diff --git a/src/jlmap3d/jl3ddevicetrain/jl3ddevicetrain.js b/src/jlmap3d/jl3ddevicetrain/jl3ddevicetrain.js index a15ba623c..751af80fe 100644 --- a/src/jlmap3d/jl3ddevicetrain/jl3ddevicetrain.js +++ b/src/jlmap3d/jl3ddevicetrain/jl3ddevicetrain.js @@ -4,57 +4,50 @@ import { FBXLoader } from '@/jlmap3d/main/loaders/FBXLoader'; import { OrbitControls } from '@/jlmap3d/main/control/OrbitControls'; import { ModelManager } from '@/jlmap3d/jl3ddevicetrain/loader.js'; +import { Moveanimate } from '@/jlmap3d/jl3ddevicetrain/component/moveanimate.js'; +import { Jdqcontrol } from '@/jlmap3d/jl3ddevicetrain/component/jdqcontrol.js'; // import { Signallightload } from '@/jlmap3d/jl3ddevice/component/signallight.js'; // import StompClient from '@/utils/sock'; import {Stats} from '@/jlmap3d/main/lib/stats.min.js'; var clock = new THREE.Clock(); -export function Jl3ddevice(dom,group,token) { - var scope = this; +export function Jl3ddevice(dom) { + let scope = this; + let helpbox,textplane; this.dom = dom; this.nowcode = null; this.animateswitch = false; this.mixers = []; this.showmodel = null; + //场景状态 + this.status = 0; + //动画状态 + this.animastats = false; //初始化webgl渲染 let renderer = new THREE.WebGLRenderer({ antialias: true,alpha: true }); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize(dom.offsetWidth, dom.offsetHeight); - renderer.shadowMap.enabled = true; - renderer.shadowMap.type = THREE.PCFSoftShadowMap; + // renderer.shadowMap.enabled = true; + // renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.setClearColor( 0x000000, 0 ); this.dom.appendChild(renderer.domElement); //定义相机 let camera = new THREE.PerspectiveCamera(70, dom.offsetWidth / dom.offsetHeight, 0.01, 5000); - camera.position.set(0, 20, 2500); + camera.position.set(-1000, 1500, 0); camera.aspect = dom.offsetWidth / dom.offsetHeight; camera.updateProjectionMatrix(); this.controls = new THREE.OrbitControls(camera, dom); - // this.controls.maxPolarAngle = Math.PI / 2; - // this.controls.minPolarangle = Math.PI / 5; - this.controls.maxDistance = 4800; + this.controls.target = new THREE.Vector3(500,1000,0); this.controls.update(); //定义场景(渲染容器) let scene = new THREE.Scene(); scene.background = new THREE.Color(0xa0a0a0); - // var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) ); - // mesh.rotation.x = - Math.PI / 2; - // mesh.receiveShadow = true; - // scene.add( mesh ); - // - // var grid = new THREE.GridHelper( 5000, 100, 0x000000, 0x000000 ); - // grid.material.opacity = 0.2; - // grid.material.transparent = true; - // scene.add( grid ); - - - //定义全局光 let ambientLight = new THREE.AmbientLight(0xffffff, 1.3); scene.add(ambientLight); @@ -62,6 +55,20 @@ export function Jl3ddevice(dom,group,token) { var light = new THREE.HemisphereLight( 0xffffff, 0x444444 ); light.position.set( 0, 200, 0 ); scene.add( light ); + + // var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) ); + // mesh.position.x = 10000; + // mesh.rotation.x = - Math.PI / 2; + // mesh.receiveShadow = true; + + + var grid = new THREE.GridHelper( 1000, 20, 0x000000, 0x000000 ); + grid.material.opacity = 0.2; + grid.material.transparent = true; + grid.position.x = 10000; + + scene.add( grid ); + // scene.add( mesh ); // // var spotLight = new THREE.SpotLight(0xffffff); // spotLight.position.set(0, 3000, 0); @@ -73,6 +80,165 @@ export function Jl3ddevice(dom,group,token) { this.selectmodel = null; + + this.updateselect = function(updata){ + console.log(updata); + if(helpbox){ + scene.remove( helpbox ); + helpbox = null; + } + helpbox = new THREE.BoxHelper( updata.mesh, 0xff0000 ); + console.log(updata.mesh); + let point = { + x:updata.mesh.matrixWorld.elements[12], + y:updata.mesh.matrixWorld.elements[13], + z:updata.mesh.matrixWorld.elements[14] + }; + settext(updata.mesh,point) + // moveanima.animatelist[scope.selectmodel.name+"select1"].enable = true; + // console.log(intersects[0].object); + scene.add( helpbox ); + } + this.backselect = function(){ + console.log(scope.modelmanager.controllist); + scope.modelmanager.controllist[0].position.set(19,1270,-165); + scope.modelmanager.controllist[0].rotation.y = -Math.PI/2; + scope.modelmanager.controllist[0].rotation.z = -Math.PI/2; + + scope.modelmanager.controllist[1].position.set(19,1270,-55); + scope.modelmanager.controllist[1].rotation.y = -Math.PI/2; + scope.modelmanager.controllist[1].rotation.z = -Math.PI/2; + + scope.modelmanager.controllist[2].position.set(19,1270,65); + scope.modelmanager.controllist[2].rotation.y = -Math.PI/2; + scope.modelmanager.controllist[2].rotation.z = -Math.PI/2; + + scope.modelmanager.controllist[3].position.set(19,1270,170); + scope.modelmanager.controllist[3].rotation.y = -Math.PI/2; + scope.modelmanager.controllist[3].rotation.z = -Math.PI/2; + + camera.position.set(-1000, 1500, 0); + scope.controls.target = new THREE.Vector3(500,1000,0); + scope.controls.update(); + scope.status = '0'; + if(textplane){ + scene.remove(textplane); + textplane.geometry.dispose(); + textplane.material.dispose(); + } + scope.selectmodel = null; + scope.jdqcontrol.devicelist = []; + updatemenulist(scope.jdqcontrol.devicelist); + }; + + this.disperdevice = function(){ + console.log(scope.status); + console.log(scope.animastats); + if(scope.status == '1'){ + if(scope.animastats == false){ + scope.animastats = true; + for(let i=0,leni=scope.selectmodel.children.length;i { + jdq1.mesh.position.x = 19; + jdq1.mesh.position.z = -165; + jdq1.mesh.position.y = 1270; + jdq1.mesh.rotation.y = -Math.PI/2; + jdq1.mesh.rotation.z = -Math.PI/2; + + jdq2.mesh.position.x = 19; + jdq2.mesh.position.z = -55; + jdq2.mesh.position.y = 1270; + jdq2.mesh.rotation.y = -Math.PI/2; + jdq2.mesh.rotation.z = -Math.PI/2; + + jdq3.mesh.position.x = 19; + jdq3.mesh.position.z = 65; + jdq3.mesh.position.y = 1270; + jdq3.mesh.rotation.y = -Math.PI/2; + jdq3.mesh.rotation.z = -Math.PI/2; + + jdq4.mesh.position.x = 19; + jdq4.mesh.position.z = 170; + jdq4.mesh.position.y = 1270; + jdq4.mesh.rotation.y = -Math.PI/2; + jdq4.mesh.rotation.z = -Math.PI/2; + + scope.controllist.push(jdq1.mesh); + scope.controllist.push(jdq2.mesh); + scope.controllist.push(jdq3.mesh); + scope.controllist.push(jdq4.mesh); + scene.add(jdq1.mesh); + scene.add(jdq2.mesh); + scene.add(jdq3.mesh); + scene.add(jdq4.mesh); + scene.add(scope.jdqg.mesh); resolve("success"); //['成功了', 'success'] }).catch((error) => { //console.log(error); @@ -32,27 +97,37 @@ export function ModelManager(){ function fbxpromise(asset,mixers,model){ return new Promise(function(resolve, reject){ var loader = new THREE.FBXLoader(); + loader.load( asset.assetUrl, function ( object ) { let mixer = new THREE.AnimationMixer( object ); - object.traverse( function ( child ) { - if ( child.isMesh ) { - child.castShadow = true; - child.receiveShadow = true; - } - } ); + // object.traverse( function ( child ) { + // if ( child.isMesh ) { + // child.castShadow = true; + // child.receiveShadow = true; + // } + // } ); + for(let i=0,leni=object.children.length;i0){ model.action = mixer.clipAction( object.animations[ 0 ] ); model.action.setLoop(THREE.LoopOnce); model.action.clampWhenFinished = true; + mixers.push(mixer); //model.action.play(); } - - - resolve(asset.deviceType); } ); diff --git a/src/jlmap3d/main/loaders/FBXLoader.js b/src/jlmap3d/main/loaders/FBXLoader.js index c19f20484..123ba5a4c 100644 --- a/src/jlmap3d/main/loaders/FBXLoader.js +++ b/src/jlmap3d/main/loaders/FBXLoader.js @@ -588,7 +588,7 @@ THREE.FBXLoader = ( function () { case 'DiffuseColor': case 'Maya|TEX_color_map': parameters.map = self.getTexture( textureMap, child.ID ); - parameters.map.encoding = THREE.sRGBEncoding; + // parameters.map.encoding = THREE.sRGBEncoding; break; case 'DisplacementColor': @@ -619,7 +619,7 @@ THREE.FBXLoader = ( function () { case 'TransparentColor': parameters.alphaMap = self.getTexture( textureMap, child.ID ); parameters.transparent = true; - parameters.alphaTest = 0.1; + parameters.alphaTest = 0.1; break; case 'AmbientColor': diff --git a/src/utils/baseUrl.js b/src/utils/baseUrl.js index 79d1c6346..1e9afea51 100644 --- a/src/utils/baseUrl.js +++ b/src/utils/baseUrl.js @@ -3,11 +3,11 @@ 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.3.5:9000'; // 袁琪 // BASE_API = 'http://192.168.3.6:9000'; // 旭强 // BASE_API = 'http://192.168.3.41:9000'; // 张赛 - BASE_API = 'http://192.168.3.82:9000'; // 杜康 + // BASE_API = 'http://192.168.3.82:9000'; // 杜康 } else { BASE_API = process.env.VUE_APP_BASE_API; } diff --git a/src/views/jlmap3d/devicetrain/component/devicetrainmenu.vue b/src/views/jlmap3d/devicetrain/component/devicetrainmenu.vue new file mode 100644 index 000000000..fcf4d4bf7 --- /dev/null +++ b/src/views/jlmap3d/devicetrain/component/devicetrainmenu.vue @@ -0,0 +1,151 @@ + + + + + + diff --git a/src/views/jlmap3d/devicetrain/jl3ddevicetrain.vue b/src/views/jlmap3d/devicetrain/jl3ddevicetrain.vue index 67a900514..0432ba603 100644 --- a/src/views/jlmap3d/devicetrain/jl3ddevicetrain.vue +++ b/src/views/jlmap3d/devicetrain/jl3ddevicetrain.vue @@ -1,21 +1,43 @@