From df095d8b1ea38bed3071004fd30b980b2bd7f1b2 Mon Sep 17 00:00:00 2001 From: gaozl Date: Mon, 23 Oct 2023 14:03:29 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B4=B4=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/qm/MainMap_QM_go.js | 443 ++++++++++++++++++++---------- 1 file changed, 296 insertions(+), 147 deletions(-) diff --git a/public/static/qm/MainMap_QM_go.js b/public/static/qm/MainMap_QM_go.js index e67670b..50607c1 100644 --- a/public/static/qm/MainMap_QM_go.js +++ b/public/static/qm/MainMap_QM_go.js @@ -243,7 +243,7 @@ QMUtil = function () { { key: 'ludeng', url: 'static/img/model/ludeng.glb', colorModel: 'gama', rot: { x: 1.5708, y: 0, z: 0 }, size: { x: 20, y: 20, z: 20 }, load: false }, { key: 'taiyangsan', url: 'static/img/model/taiyangsan.glb', colorModel: 'gama', rot: { x: 1.5708, y: 0, z: 0 }, size: { x: 20, y: 20, z: 20 }, load: false }, { key: 'honglvdeng', url: 'static/img/model/honglvdeng.glb', colorModel: 'gama', rot: { x: 1.5708, y: 0, z: 0 }, size: { x: 20, y: 20, z: 20 }, load: false }, - + { key: 'park_paly', url: 'static/img/model/park_paly.glb', colorModel: 'gama', rot: { 'x': 1.5708, 'y': 0, 'z': 0 }, size: { 'x': 80, 'y': 80, 'z': 80 }, load:false}, { key: 'chongdianzhuang', url: 'static/img/model/chongdianzhuang.glb', @@ -334,25 +334,105 @@ QMUtil = function () { this.leftPoint //左侧平行线交点 this.rightPoint //右侧平行线交点 } - this.assignUVs = function (geometry) { - geometry.computeBoundingBox() - var max = geometry.boundingBox.max, - min = geometry.boundingBox.min - var offset = new THREE.Vector2(0 - min.x, 0 - min.y) - var range = new THREE.Vector2(max.x - min.x, max.y - min.y) - var faces = geometry.faces - geometry.faceVertexUvs[0] = [] - for (var i = 0; i < faces.length; i++) { - var v1 = geometry.vertices[faces[i].a], - v2 = geometry.vertices[faces[i].b], - v3 = geometry.vertices[faces[i].c] - geometry.faceVertexUvs[0].push([ - new THREE.Vector2((v1.x + offset.x) / range.x, (v1.y + offset.y) / range.y), - new THREE.Vector2((v2.x + offset.x) / range.x, (v2.y + offset.y) / range.y), - new THREE.Vector2((v3.x + offset.x) / range.x, (v3.y + offset.y) / range.y) - ]) - } - geometry.uvsNeedUpdate = true + this.assignUVs = function (geometry) { + geometry.computeBoundingBox(); + let max = geometry.boundingBox.max, + min = geometry.boundingBox.min; + let offset = new THREE.Vector2(0 - min.x, 0 - min.y); + let range = new THREE.Vector2(max.x - min.x, max.y - min.y); + let addX=1, addY=1; + range.x/range.y < 1 ? (addX = range.x/range.y) : (addY = range.y/range.x) + geometry.faceVertexUvs[0] = []; + + for (let face of geometry.faces) { + let v1 = geometry.vertices[face.a], + v2 = geometry.vertices[face.b], + v3 = geometry.vertices[face.c]; + if(face.normal.z == 0){ //侧面 + if(range.x/range.y >= 1){ + let repY = range.y/256 >= 2 ? 256:range.y; + face.materialIndex = Math.abs(face.normal.x) < 0.7 ? 2 : 1; + geometry.faceVertexUvs[0].push(face.materialIndex == 1 ? [ + new THREE.Vector2((v1.y + offset.y) / repY, v1.z / 512), + new THREE.Vector2((v2.y + offset.y) / repY, v2.z / 512), + new THREE.Vector2((v3.y + offset.y) / repY, v3.z / 512) + ] : [ + new THREE.Vector2((v1.x + offset.x) / range.x, v1.z / 64), + new THREE.Vector2((v2.x + offset.x) / range.x, v2.z / 64), + new THREE.Vector2((v3.x + offset.x) / range.x, v3.z / 64) + ]); + }else{ + face.materialIndex = Math.abs(face.normal.x) < 0.7 ? 1 : 2; + geometry.faceVertexUvs[0].push(face.materialIndex == 1 ? [ + new THREE.Vector2((v1.x + offset.x) / range.x, v1.z / 512), + new THREE.Vector2((v2.x + offset.x) / range.x, v2.z / 512), + new THREE.Vector2((v3.x + offset.x) / range.x, v3.z / 512) + ] : [ + new THREE.Vector2((v1.y + offset.y) / range.y, v1.z / 64), + new THREE.Vector2((v2.y + offset.y) / range.y, v2.z / 64), + new THREE.Vector2((v3.y + offset.y) / range.y, v3.z / 64) + ]); + } + }else{ //顶面和底面 + face.materialIndex = 0; + geometry.faceVertexUvs[0].push([ + new THREE.Vector2((v1.x + offset.x) / range.x*addX, (v1.y + offset.y) / range.y*addY), + new THREE.Vector2((v2.x + offset.x) / range.x*addX, (v2.y + offset.y) / range.y*addY), + new THREE.Vector2((v3.x + offset.x) / range.x*addX, (v3.y + offset.y) / range.y*addY) + ]); + } + } + geometry.uvsNeedUpdate = true; + } + this.packUv = function (geometry){ + geometry.computeBoundingBox(); + let max = geometry.boundingBox.max, + min = geometry.boundingBox.min; + let offset = new THREE.Vector2(0 - min.x, 0 - min.y); + let range = new THREE.Vector2(max.x - min.x, max.y - min.y); + geometry.faceVertexUvs[0] = []; + let allReag = 0; + for(let i=0; i< geometry.faces.length; i+=2){ + let v1 = geometry.vertices[geometry.faces[i].a], + v2 = geometry.vertices[geometry.faces[i].b]; + if(geometry.faces[i].normal.z == 0){ //侧面 + if(Math.abs(geometry.faces[i].normal.x) < 0.7){ //左右 + allReag+=Math.abs(v2.x-v1.x); + }else{ + allReag+=Math.abs(v2.y-v1.y); + } + } + } + for (let face of geometry.faces) { + let v1 = geometry.vertices[face.a], + v2 = geometry.vertices[face.b], + v3 = geometry.vertices[face.c]; + if(face.normal.z == 0){ //侧面 + face.materialIndex = 1; + if(Math.abs(face.normal.x) < 0.7){ //前后 + geometry.faceVertexUvs[0].push([ + new THREE.Vector2((v1.x + offset.x) / allReag, v1.z / 512), + new THREE.Vector2((v2.x + offset.x) / allReag, v2.z / 512), + new THREE.Vector2((v3.x + offset.x) / allReag, v3.z / 512) + ]) + }else{ + geometry.faceVertexUvs[0].push([ + new THREE.Vector2((v1.y + offset.y) / allReag, v1.z / 512), + new THREE.Vector2((v2.y + offset.y) / allReag, v2.z / 512), + new THREE.Vector2((v3.y + offset.y) / allReag, v3.z / 512) + ]) + + } + }else{ //顶面和底面 + face.materialIndex = 0; + geometry.faceVertexUvs[0].push([ + new THREE.Vector2((v1.x + offset.x) / range.x, (v1.y + offset.y) / range.y), + new THREE.Vector2((v2.x + offset.x) / range.x, (v2.y + offset.y) / range.y), + new THREE.Vector2((v3.x + offset.x) / range.x, (v3.y + offset.y) / range.y) + ]); + } + } + } /** * 检测点是否在多边形区域内 @@ -2007,7 +2087,7 @@ MainMap_QM.prototype = { } }) object.scene.children[0].scale.set(sopce.util.modelStr[sopce.index].size.x, sopce.util.modelStr[sopce.index].size.y, Map_QM.util.modelStr[sopce.index].size.z) - sopce.util.fbxModels.push({ key: sopce.util.modelStr[sopce.index].key, obj: object.scene, operation: Map_QM.util.modelStr[sopce.index] }) + sopce.util.fbxModels.push({ key: sopce.util.modelStr[sopce.index].key, obj: object, operation: Map_QM.util.modelStr[sopce.index] }) if (sopce.index < sopce.util.modelStr.length - 1) { sopce.index++ sopce.initTreeModel() @@ -5176,12 +5256,18 @@ FloorMap_QM.prototype = { for (let t = 0; t < mapData.models.length; t++) { for (let i = 0; i < Map_QM.util.fbxModels.length; i++) { if (mapData.models[t].type == Map_QM.util.fbxModels[i].key) { - let obj = Map_QM.util.fbxModels[i].obj.clone() - obj.position.set(mapData.models[t].x, -1 * mapData.models[t].y, mapData.models[t].site) - obj.scale.set(mapData.models[t].scale, mapData.models[t].scale, mapData.models[t].scale) - obj.rotateX(Map_QM.util.fbxModels[i].operation.rot.x) - obj.rotateY((-1 * mapData.models[t].angle * Math.PI) / 180) - this.allObj.add(obj) + let obj = Map_QM.util.fbxModels[i].obj.scene.clone(); + obj.position.set(mapData.models[t].x, -1 * mapData.models[t].y, mapData.models[t].site); + obj.scale.set(mapData.models[t].scale, mapData.models[t].scale, mapData.models[t].scale); + obj.rotateX(Map_QM.util.fbxModels[i].operation.rot.x); + obj.rotateY(-1 * mapData.models[t].angle * Math.PI / 180); + obj.renderOrder = 100; + for (let k = 0; k < Map_QM.util.fbxModels[i].obj.animations.length; k++) { + let mixer = new THREE.AnimationMixer(obj) + mixer.clipAction(Map_QM.util.fbxModels[i].obj.animations[k]).play() + Map_QM.mixers.push(mixer) + } + this.allObj.add(obj); } } } @@ -5844,16 +5930,16 @@ FloorMap_QM.prototype = { } } //显示车位编号 - if (mapData.parkArea[i].parkNum != 'NaN' && i % 10 == 0) { - let shopDiv = document.createElement('div') - shopDiv.style.cssText = css_LR - shopDiv.style.visibility = 'hidden' - shopDiv.textContent = mapData.parkArea[i].parkNum - let shopLabel = new THREE.CSS2DObject(shopDiv) - shopLabel.name = mapData.parkArea[i].name - shopLabel.position.set(mapData.parkArea[i].xaxis >> 0, (-1 * mapData.parkArea[i].yaxis) >> 0, parseInt(mapData.parkArea[i].toHeight) + 1) - this.labelObj.add(shopLabel) - } + // if (mapData.parkArea[i].parkNum != 'NaN' && i % 10 == 0) { + // let shopDiv = document.createElement('div') + // shopDiv.style.cssText = css_LR + // shopDiv.style.visibility = 'hidden' + // shopDiv.textContent = mapData.parkArea[i].parkNum + // let shopLabel = new THREE.CSS2DObject(shopDiv) + // shopLabel.name = mapData.parkArea[i].name + // shopLabel.position.set(mapData.parkArea[i].xaxis >> 0, (-1 * mapData.parkArea[i].yaxis) >> 0, parseInt(mapData.parkArea[i].toHeight) + 1) + // this.labelObj.add(shopLabel) + // } } } let mahc = this.Model_QM.MyParkShape(shapeArr, materials, parkHeight, borderColor) @@ -5901,98 +5987,170 @@ MyModel_QM.prototype.MyParkShape = function (shapes, materials, toHeight = 5, bo } MyModel_QM.prototype.MyModelShape = function (areaArr, howllowArr, opObj, entityColor = 0xdadada, lineColor = 0xeeeeee, indexOrder = 1) { - let len = areaArr.length - if (len == 0) { - return - } - let alphaModle = opObj.alphaModle / 100 || 0 - // 实例化shape对象 - let shape = new THREE.Shape() - // 设置开始点的位置 - shape.moveTo(areaArr[0][0], -1 * areaArr[0][1]) - for (let i = 0; i < areaArr.length; i++) { - if (areaArr[i].length == 4) { - shape.lineTo(areaArr[i][2], -1 * areaArr[i][3]) - } else { - shape.bezierCurveTo(areaArr[i][2], -1 * areaArr[i][3], areaArr[i][4], -1 * areaArr[i][5], areaArr[i][6], -1 * areaArr[i][7]) - } - } - let material; - let matcolor = new THREE.Color(lineColor) - for (let k = 0; k < Map_QM.util.lineBasicMaterialArr.length; k++) { - if (Map_QM.util.lineBasicMaterialArr[k].color.equals(matcolor)) { - material = Map_QM.util.lineBasicMaterialArr[k] - } - } - if (!material) { - material = new THREE.LineBasicMaterial({ - color: lineColor, - opacity: 0.8, + let len = areaArr.length; + if (len == 0) { + return; + } + let alphaModle = opObj.alphaModle / 100 || 0; + // 实例化shape对象 + let shape = new THREE.Shape(); + // 设置开始点的位置 + shape.moveTo(areaArr[0][0], -1 * areaArr[0][1]); + for (let i = 0; i < areaArr.length; i++) { + if (areaArr[i].length == 4) { + shape.lineTo(areaArr[i][2], -1 * areaArr[i][3]); + } else { + shape.bezierCurveTo(areaArr[i][2], -1 * areaArr[i][3], areaArr[i][4], -1 * areaArr[i][5], areaArr[i][6], -1 * areaArr[i][7]); + } + } + let material; + let matcolor = new THREE.Color(lineColor) + for (let k = 0; k < Map_QM.util.lineBasicMaterialArr.length; k++) { + if (Map_QM.util.lineBasicMaterialArr[k].color.equals(matcolor)) { + material = Map_QM.util.lineBasicMaterialArr[k]; + } + } + if (!material) { + material = new THREE.LineBasicMaterial({ + color: lineColor, + opacity: 0.8, transparent: true - }) //材质对象lineColor - Map_QM.util.lineBasicMaterialArr.push(material) - } - if (howllowArr && howllowArr.length > 0) { - for (let n = 0; n < howllowArr.length; n++) { - let hole = new THREE.Path() // 添加孔洞 - hole.moveTo(howllowArr[n][0][0], -1 * howllowArr[n][0][1]) - for (let k = 0; k < howllowArr[n].length; k++) { - if (howllowArr[n][k].length == 4) { - hole.lineTo(howllowArr[n][k][2], -1 * howllowArr[n][k][3]) - } else { - hole.bezierCurveTo(howllowArr[n][k][2], -1 * howllowArr[n][k][3], howllowArr[n][k][4], -1 * howllowArr[n][k][5], howllowArr[n][k][6], -1 * howllowArr[n][k][7]) - } - } - shape.holes.push(hole) - } - } - let scanGeometry, - meshMaterial, - options = { - depth: parseInt(opObj.toHeight), - bevelEnabled: false, - curveSegments: 12 - } + }); //材质对象lineColor + Map_QM.util.lineBasicMaterialArr.push(material); + } + if (howllowArr && howllowArr.length > 0) { + for (let n = 0; n < howllowArr.length; n++) { + let hole = new THREE.Path(); // 添加孔洞 + hole.moveTo(howllowArr[n][0][0], -1 * howllowArr[n][0][1]); + for (let k = 0; k < howllowArr[n].length; k++) { + if (howllowArr[n][k].length == 4) { + hole.lineTo(howllowArr[n][k][2], -1 * howllowArr[n][k][3]); + } else { + hole.bezierCurveTo(howllowArr[n][k][2], -1 * howllowArr[n][k][3], howllowArr[n][k][4], -1 * howllowArr[n][k][5], howllowArr[n][k][6], -1 * howllowArr[n][k][7]); + } + } + shape.holes.push(hole); + } + } - scanGeometry = new THREE.ExtrudeGeometry(shape, options) - let color2 = new THREE.Color(entityColor) - for (let e = 0; e < Map_QM.util.meshMaterialArr.length; e++) { - if (Map_QM.util.meshMaterialArr[e].color.equals(color2) && Map_QM.util.meshMaterialArr[e].opacity == alphaModle) { - meshMaterial = Map_QM.util.meshMaterialArr[e] - } - } - if (!meshMaterial) { - meshMaterial = new THREE.MeshPhongMaterial({ - //MeshStandardMaterial MeshPhongMaterial - color: entityColor, - transparent: true, - opacity: alphaModle, - side: THREE.DoubleSide, - depthTest: true - }) - //meshMaterial.color.convertLinearToGamma(0.4); - Map_QM.util.meshMaterialArr.push(meshMaterial) - } - if (opObj.angleY || opObj.angleZ) { - Map_QM.util.rotateYZ(scanGeometry, (opObj.angleY * Math.PI) / 180, (opObj.angleZ * Math.PI) / 180) - } - // 创建模型 - let mesh = new THREE.Mesh(scanGeometry, meshMaterial) - if (!Map_QM.util.toMapModel && opObj.type != 'wall') { - let cubeEdges = new THREE.EdgesGeometry(scanGeometry, 60) - let cubeLine = new THREE.LineSegments(cubeEdges, material) - cubeLine.renderOrder = indexOrder - 5 - mesh.add(cubeLine) - } - if (opObj.name != 'floor') { - mesh.position.z = opObj.site || 0 - } else { - mesh.position.z = -1 * parseInt(opObj.toHeight) - 1 - } - mesh.castShadow = true - mesh.renderOrder = indexOrder - mesh.name = opObj.name || '' - return mesh + let scanGeometry, meshMaterial, options = { + depth: parseInt(opObj.toHeight), + bevelEnabled: false, + curveSegments: 12, + bevelThickness: 0, + bevelSize: 0, + bevelSegments: 0, + material: 0, //frontMaterial = green + extrudeMaterial: 1, //sideMaterial = gray + }; + + scanGeometry = new THREE.ExtrudeGeometry(shape, options); + let meshColor = new THREE.Color(entityColor); + for (let e = 0; e < Map_QM.util.meshMaterialArr.length; e++) { + if (Map_QM.util.meshMaterialArr[e].color.equals(meshColor) && Map_QM.util.meshMaterialArr[e].opacity == alphaModle && !Map_QM.util.meshMaterialArr[e].userData.map) { + meshMaterial = Map_QM.util.meshMaterialArr[e]; + } + } + if (!meshMaterial) { + meshMaterial = new THREE.MeshPhongMaterial({ //MeshStandardMaterial MeshPhongMaterial MeshBasicMaterial + color: entityColor, + transparent: true, + opacity: alphaModle, + side: THREE.DoubleSide, + depthTest: true + }); + Map_QM.util.meshMaterialArr.push(meshMaterial); + } + if (opObj.angleY || opObj.angleZ) { + Map_QM.util.rotateYZ(scanGeometry, opObj.angleY * Math.PI / 180, opObj.angleZ * Math.PI / 180); + } + // 创建模型 + let mesh; + if(opObj.map == "home"){ + Map_QM.util.assignUVs(scanGeometry); + let mapMaterial,ceMaterial; + for (let e = 0; e < Map_QM.util.meshMaterialArr.length; e++) { + if (Map_QM.util.meshMaterialArr[e].userData.map == "front" && Map_QM.util.meshMaterialArr[e].opacity == alphaModle) { + mapMaterial = Map_QM.util.meshMaterialArr[e]; + } + if (Map_QM.util.meshMaterialArr[e].userData.map == "c50" && Map_QM.util.meshMaterialArr[e].opacity == alphaModle) { + ceMaterial = Map_QM.util.meshMaterialArr[e]; + } + } + if(!mapMaterial){ + let texture = new THREE.TextureLoader().load(Map_QM.util.beforPath + "static/img/map/front.png"); + texture.wrapS = THREE.ClampToEdgeWrapping; + texture.wrapT = THREE.RepeatWrapping; + mapMaterial = new THREE.MeshPhongMaterial({ + color: entityColor, + map: texture, + transparent: true, + opacity: alphaModle, + side: THREE.DoubleSide, + depthTest: true + }); + mapMaterial.userData.map = "front"; + Map_QM.util.meshMaterialArr.push(mapMaterial); + } + if(!ceMaterial){ + let texture2 = new THREE.TextureLoader().load(Map_QM.util.beforPath + "static/img/map/c50.png"); + texture2.wrapS = THREE.RepeatWrapping; + texture2.wrapT = THREE.ClampToEdgeWrapping; + ceMaterial = new THREE.MeshPhongMaterial({ + color: entityColor, + map: texture2, + transparent: true, + opacity: alphaModle, + side: THREE.DoubleSide, + depthTest: true + }); + ceMaterial.userData.map = "c50"; + Map_QM.util.meshMaterialArr.push(ceMaterial); + } + mesh = new THREE.Mesh(scanGeometry, [meshMaterial,ceMaterial,mapMaterial]); + } else if(opObj.map){ + Map_QM.util.packUv(scanGeometry); + let ceMaterial; + for (let e = 0; e < Map_QM.util.meshMaterialArr.length; e++) { + if (Map_QM.util.meshMaterialArr[e].userData.map == opObj.map && Map_QM.util.meshMaterialArr[e].opacity == alphaModle) { + ceMaterial = Map_QM.util.meshMaterialArr[e]; + } + } + if(!ceMaterial){ + let texture2 = new THREE.TextureLoader().load(Map_QM.util.beforPath + "static/img/map/"+opObj.map+".png"); + texture2.wrapS = THREE.RepeatWrapping; + texture2.wrapT = THREE.ClampToEdgeWrapping; + ceMaterial = new THREE.MeshPhongMaterial({ + color: entityColor, + map: texture2, + transparent: true, + opacity: alphaModle, + side: THREE.DoubleSide, + depthTest: true + }); + ceMaterial.userData.map = opObj.map; + Map_QM.util.meshMaterialArr.push(ceMaterial); + } + mesh = new THREE.Mesh(scanGeometry, [meshMaterial,ceMaterial]); + }else{ + mesh = new THREE.Mesh(scanGeometry, meshMaterial); + } + + if (opObj.type != "wall") { + let cubeEdges = new THREE.EdgesGeometry(scanGeometry, 60); + let cubeLine = new THREE.LineSegments(cubeEdges, material); + cubeLine.renderOrder = indexOrder - 5; + mesh.add(cubeLine); + } + if (opObj.name != "floor") { + mesh.position.z = opObj.site || 0; + } else { + mesh.position.z = -1 * parseInt(opObj.toHeight) - 1; + } + mesh.castShadow = true; + mesh.renderOrder = indexOrder; + mesh.name = opObj.name || ""; + return mesh; } //绘制平面 @@ -6046,26 +6204,17 @@ MyModel_QM.prototype.MyPlaneShape = function (areaArr, howllowArr, opObj, entity scanGeometry = new THREE.ShapeGeometry(shape, 8); Map_QM.util.assignUVs(scanGeometry); if(opObj.map){ - for (let e = 0; e < Map_QM.util.meshMaterialArr.length; e++) { - if (Map_QM.util.meshMaterialArr[e].userData.map == opObj.map) { - meshMaterial = Map_QM.util.meshMaterialArr[e]; - } - } - if (!meshMaterial) { - let texture = new THREE.TextureLoader().load(Map_QM.util.beforPath + "static/img/map/" + opObj.map + ".jpg"); - texture.wrapT = THREE.RepeatWrapping; - texture.repeat.y = 1; - meshMaterial = new THREE.MeshPhongMaterial({ //MeshStandardMaterial MeshPhongMaterial olor: entityColor, - color: entityColor, - map: texture, - transparent: true, - opacity: alphaModle, - side: THREE.DoubleSide, - depthTest: true - }); - meshMaterial.userData.map = opObj.map; - Map_QM.util.meshMaterialArr.push(meshMaterial); - } + let texture = new THREE.TextureLoader().load(Map_QM.util.beforPath + "static/img/map/" + opObj.map + ".png"); + meshMaterial = new THREE.MeshPhongMaterial({ //MeshStandardMaterial MeshPhongMaterial olor: entityColor, + color: entityColor, + map: texture, + transparent: true, + opacity: alphaModle, + side: THREE.DoubleSide, + depthTest: true + }); + meshMaterial.userData.map = opObj.map; + Map_QM.util.meshMaterialArr.push(meshMaterial); }else{ for (let e = 0; e < Map_QM.util.meshMaterialArr.length; e++) { let color2 = new THREE.Color(entityColor);