// const util = require('@/static/utils/util.js'); const config = require('@/services/urlConfig.js'); import modelData from '@/static/layoutModelData.js'; import globlShowModel from '@/static/globlShowModel.js'; // import requestConfig from '@/services/requestConfig.js'; import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; import * as THREE from 'three'; // import { TWEEN } from '@/webgl/jsm/libs/tween.module.min.js'; export default { data() { return { gltfLayouts: [], instancedFurList:[], arrFrunList:[], promise_list:[], dracoLoader:null, type:1, tmpList:[], realList:[], nextString:'_simple',//精简模型后缀 } }, watch: {}, mounted() { console.warn("***loadmodel-mounted****") this.dracoLoader = new DRACOLoader(); this.dracoLoader.setDecoderPath('./gltf/'); this.dracoLoader.setDecoderConfig( { type: 'js' } ); this.dracoLoader.preload(); }, methods: { // 设置空间数组的墙体信息 async setSpaceListWallInfo(){ for (let index = 0; index < this.spaceList.length; index++) { let spaceWallInfo = {wallN:false, wallS:false, wallW:false, wallE:false} const element = this.spaceList[index]; const wallWIndex = this.gltfWalls.findIndex(item=>{ return element.spaceId == item.spaceId && item.wallDirection == "W" }) spaceWallInfo.wallW = wallWIndex == -1 ? false : true; const wallEIndex = this.gltfWalls.findIndex(item=>{ return element.spaceId == item.spaceId && item.wallDirection == "E" }) spaceWallInfo.wallE = wallEIndex == -1 ? false : true; const wallNIndex = this.gltfWalls.findIndex(item=>{ return element.spaceId == item.spaceId && item.wallDirection == "N" }) spaceWallInfo.wallN = wallNIndex == -1 ? false : true; const wallSIndex = this.gltfWalls.findIndex(item=>{ return element.spaceId == item.spaceId && item.wallDirection == "S" }) spaceWallInfo.wallS = wallSIndex == -1 ? false : true; element.spaceWallInfo = spaceWallInfo; } }, // 批量获取空间模型信息 async getOverallArrangementDetailsList(type=1) { // 设置空间数组的墙体信息 // this.setSpaceListWallInfo(); this.type = type;//加载类型,1空间加载 2 全局精简加载 let arr = this.spaceList.map(it => it.layoutId).filter(it => it != 0); let parmas = { ids: arr, }; // 默认的布局 let res = await requestConfig("getOverallArrangementDetailsList", parmas); if (!res.success || !res.list || res.list.length == 0) { return false; } this.promise_list = []; this.arrFrunList = res.list; // 通过默认布局 this.furnHandle(this.arrFrunList); }, //拆分家具模型加载逻辑 furnHandle(arrFrunList, spaceObj = null){ if(!arrFrunList || arrFrunList.length == 0){ return } let startTime = new Date().getTime(); let tmpList = [];//临时数据 this.gltfLayouts = []; //模型列表,所有空间里面的每个模型(家具)对应一条记录 let allowSpaceId = [this.curSpaceObj.spaceId]; if(this.type == 2){//全局精简模型;需要的是所有空间的模型 allowSpaceId = this.spaceList.map(it=>it.spaceId) }else{//空间模型模式 allowSpaceId = [this.curSpaceObj.spaceId]; if(this.curSpaceObj.spaceType==4){//厨房 let list = this.spaceList.filter(it=>it.spaceType==2) allowSpaceId.push(...list.map(it=>it.spaceId));//客厅 } if(this.curSpaceObj.spaceType==2){//餐厅 let list = this.spaceList.filter(it=>it.spaceType==4) allowSpaceId.push(...list.map(it=>it.spaceId));//厨房 } //花园类型的添加到家具加载目录里面 // this.spaceList.forEach(it=>{ // if(it.spaceType==14){ // allowSpaceId.push(it.spaceId); // } // }) } // allowSpaceId = [388];//模型有警告,需要看下 console.log("重新加载布局", arrFrunList,this.spaceList,this.gltfLayouts, this.curSpaceObj.spaceId); arrFrunList.forEach(signel => { let spaceId = this.spaceList.find(it => it.layoutId == signel.id).spaceId; if(allowSpaceId.includes(spaceId)){//只加载允许的空间的布局,其他不加载 let md = JSON.parse(signel.modelJson); //获取布局里面的模型信息 //遍历模型信息,获取模型列表 for (let i = 0; i < md.modelData.length; i++) { let item = md.modelData[i]; item.spaceId = spaceId; item.layoutId = signel.id; item.h5Id = signel.id+""+item.id;//唯一标识 if(item.modelName=='BP_furnitureBase_C'){ console.warn("***布局1***", item, signel.id) continue; }else{ tmpList.push(item); console.warn("***布局***", item, signel.id) } } } }) this.tmpList = tmpList; if(this.type==2){//全局精简模型;需要的是所有空间的模型 this.fliterList(tmpList); console.warn("***fliterList***",this.realList.length ,this.realList); tmpList = this.realList; } let realFurArr = this.preFurnitureData(tmpList);//统一处理家具模型 if(spaceObj){ this.calculateLayoutModelSizeBySpace(spaceObj) // 提前计算模型的位置 }else{ this.calculateLayoutModelSize() // 提前计算模型的位置 } console.log("***realFurArr***", realFurArr,this.gltfLayouts); realFurArr && realFurArr.forEach((item,index) => { this.promise_list.push( new Promise((resolve, reject) => { this.loadLayoutModels(item, resolve); }) ) }); Promise.all(this.promise_list).then(() => { let endTime = new Date().getTime(); console.log("家具模型全部加载完成,时间:", endTime - startTime, this.gltfLayouts); }) }, //过滤掉不需要的家具 fliterList(list){ this.realList = []; let tempList = globlShowModel.map(it=>it.replace(this.nextString,'')); //找到直接的家具模型 list && list.forEach((mod)=>{ let name = mod.modelName.substring(0,mod.modelName.length-2); if(tempList.includes(name)){ this.realList.push(mod); } }) this.realList.forEach((ref)=>{ this.recursionFliter(ref) }) }, //递归处理不需要的家具 recursionFliter(item){ let _list = [];// if(parseInt(item.referenceModelBottom) > 0){ _list.push(item.referenceModelBottom) } if(parseInt(item.referenceModelLeft) > 0){ _list.push(item.referenceModelLeft) } if(parseInt(item.referenceModelRight) > 0){ _list.push(item.referenceModelRight) } if(parseInt(item.referenceModelTop) > 0){ _list.push(item.referenceModelTop) } if(_list.length==0){ return false; }else{ this.tmpList.forEach(tmp=>{ if(_list.includes(tmp.id)){ if(!this.realList.find(it=>it.h5Id==tmp.h5Id)){ this.realList.push(tmp); this.recursionFliter(tmp); } } }) } }, //预处理需要加载墙体模型的数据-减少模型请求数 preFurnitureData(list){ let realFurnitureArr = [];//家具列表 list && list.forEach((item, index) => { item.uniId = Date.now() + index;//唯一标识 //获取墙体对应的gltb模型的相关信息 let modelName = item.modelName; // console.log("布局模型名称", modelName); let layoutModel = modelData.find(it => modelName.indexOf(it.modelName) == 0); //模型地址 console.log("要加载的模型数据", item.modelName, layoutModel) if (layoutModel && layoutModel.url) {//该数据存在模型地址 let object = realFurnitureArr.find(it=>it.url==layoutModel.url); //列表中还没有这个数据 if(!object){ let url = layoutModel.url; if(this.type==2){//全局精简模型;需要的是所有空间的模型 //说明当前模型存在精简模型对象,则应该使用精简模型数据 if(globlShowModel.includes(layoutModel.modelName + this.nextString)){ let idx = layoutModel.url.lastIndexOf('.'); url = url.substr(0,idx) + this.nextString + url.substr(idx) } } let it = { url:url, name:layoutModel.modelName, list:[item], } realFurnitureArr.push(it) }else{ object.list.push(item); } let position = new THREE.Vector3();//当前几何体的位置参数 let scale = new THREE.Vector3();//当前几何体的缩放参数 let rotation = new THREE.Vector3();//当前几何体的缩放参数 let md = { uniId:item.uniId,//家具模型实例的唯一标识 spaceId:item.spaceId, id:item.id, userData:item, position:position, scale:scale, rotation:rotation, loaded:false, }; this.gltfLayouts.push(md); } }); return realFurnitureArr; }, //加载家具模型-实例化方案 loadLayoutModels(realData, resolve){ var that = this; if(!realData.url){ console.warn("***家具模型不存在***",realData); resolve(); return false; } if(realData.name.includes('BP_XSPACE_deng_01')){//灯光 resolve(); }else{ that.loader.setDRACOLoader(this.dracoLoader); that.loader.load(realData.url, ( gltf ) => { gltf.scene.traverse((child)=> { if (child.isMesh && child.visible) { let instancedMesh = new THREE.InstancedMesh(child.geometry.clone(), child.material.clone(), realData.list.length); this.instancedFurList.push(instancedMesh); //realData 该模型被重复使用时的每一次的形变参数等 realData.list && realData.list.forEach((it,i)=>{ let gltfFurn = that.gltfLayouts.find(itme=>itme.uniId==it.uniId);//判断是否已经添加过 gltf.scene.rotation.y = gltfFurn.rotation.y; gltf.scene.position.set(gltfFurn.position.x,0,gltfFurn.position.z); gltf.scene.scale.set(gltfFurn.scale.x,1,gltfFurn.scale.z); gltf.scene.updateMatrixWorld();//更新世界坐标-这样,子模型也同步更新了 instancedMesh.setMatrixAt(i, child.matrixWorld); instancedMesh.instanceMatrix.needsUpdate = true; gltfFurn.loaded = true; if(!gltfFurn.instancedMeshIndexList){//标识网格实例数组的序号 以及 当前几何体 在网格实例的序号 gltfFurn.instancedMeshIndexList = [ {instancedMeshIndex:this.instancedFurList.length-1,instancedAtIndex:i}, ] }else{ gltfFurn.instancedMeshIndexList.push({ instancedMeshIndex:this.instancedFurList.length-1,instancedAtIndex:i }) } }) instancedMesh.userType = "layoutMesh"; if(realData.name.includes("BP_L_carpet01")){//地毯接收阴影 instancedMesh.receiveShadow = true;//对象是否接收阴影 }else{ instancedMesh.castShadow = true;//对象是否产生阴影 } this.scene.add(instancedMesh);//添加到场景中 } }); resolve(); }); } }, //加载模型 loadLayoutModelsOld(modelObj, resolve) { let that = this; const modelName = modelObj.modelName; console.log("布局模型名称", modelName); let layoutModel = modelData.find(it => modelName.indexOf(it.modelName) == 0); //模型地址 if (!layoutModel || !layoutModel.url) { resolve(); return false } let url = layoutModel.url; console.log("布局模型数据", layoutModel); that.loader.load(url, (gltf) => { // console.log("布局模型加载成功", gltf); let model = gltf.scene; // 获取模型 model.name = layoutModel.modelName; model.userType = "layoutMesh"; model.userData = modelObj; // model.rotation.y = Math.PI / 2 ; // 旋转 90 度 this.gltfLayouts.push(model); resolve(); }); }, // 切换家具的显示隐藏 changeLayoutModelState(isShow=false){ console.log("移动过程中显示隐藏空间家具", this.gltfLayouts,isShow, this.leftSpaces, this.rightSpaces); const changeSpaceList = this.leftSpaces.concat(this.rightSpaces); // 只改变空间尺寸变化的家具模型 for (let index = 0; index < changeSpaceList.length; index++) { const element = changeSpaceList[index]; const gltfLayoutModels = this.gltfLayouts.filter(item => { return element.layoutId == item.userData.layoutId && element.spaceId == item.userData.spaceId; }) if (!gltfLayoutModels || gltfLayoutModels.length == 0) { continue; } for (let j = 0; j < gltfLayoutModels.length; j++) { const cube = gltfLayoutModels[j]; this.changeCubeState(cube, isShow); } } }, // 显示隐藏指定cube的状态 changeCubeState(cube, isShow){ let lay = this.gltfLayouts.find(it=>it.uniId==cube.uniId); if(cube.instancedMeshIndexList && cube.instancedMeshIndexList.length>0){ cube.instancedMeshIndexList.forEach(item=>{ let index = item.instancedMeshIndex; let instancedMesh = this.instancedFurList[index];//网格实例对象 let curMeshIndex = item.instancedAtIndex;//当前家具模型在网格实例对象里面的序号 let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵 instancedMesh.getMatrixAt(curMeshIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面 instancedMesh.instanceMatrix.needsUpdate = true;//更新之前,必须开启开关 instancedMesh.visible = isShow; instancedMesh.setMatrixAt(curMeshIndex,stratMatrix);//更新几何体的世界矩阵 }) } }, deleteLayoutModel(spaceObj, layoutObj){ // 删除布局数据 for (let index = 0; index < this.arrFrunList.length; index++) { const element = this.arrFrunList[index]; } const oldLayoutIndex = this.arrFrunList.findIndex((item)=>{ return item.id == spaceObj.layoutId }) if(oldLayoutIndex!=-1){ this.arrFrunList[oldLayoutIndex] = layoutObj; } console.log("准备删除模型", spaceObj, this.gltfLayouts, this.arrFrunList); const gltfLayoutModels = this.gltfLayouts.filter(item => { return spaceObj.layoutId == item.userData.layoutId && spaceObj.spaceId == item.userData.spaceId; }) if (!gltfLayoutModels || gltfLayoutModels.length == 0) { return; } for (let j = 0; j < gltfLayoutModels.length; j++) { const cube = gltfLayoutModels[j]; if(cube.instancedMeshIndexList && cube.instancedMeshIndexList.length>0){ cube.instancedMeshIndexList.forEach(item=>{ let index = item.instancedMeshIndex; let instancedMesh = this.instancedFurList[index];//网格实例对象 this.scene.remove(instancedMesh);//添加到场景中 }) } console.log("删除原有模型", spaceObj.layoutId, cube); } }, // 计算家具的位置 calculateLayoutModelSize() { console.log("计算家具的位置", this.gltfLayouts); for (let index = 0; index < this.spaceList.length; index++) { const element = this.spaceList[index]; const gltfLayoutModels = this.gltfLayouts.filter(item => { return element.layoutId == item.userData.layoutId && element.spaceId == item.userData.spaceId; }) //空间下不存在家具模型,则该空间不需要进行下一步处理 if (!gltfLayoutModels || gltfLayoutModels.length == 0) { continue; } gltfLayoutModels.sort(function(a, b) { return a.userData.level - b.userData.level }); // console.log("对应空间ID的模型数组", this.gltfLayouts, element.spaceId, gltfLayoutModels) for (let j = 0; j < gltfLayoutModels.length; j++) { const cube = gltfLayoutModels[j]; this.drawLayoutModel(element, cube); } } }, // 计算家具的位置 calculateLayoutModelSizeBySpace(spaceObj) { // for (let index = 0; index < this.spaceList.length; index++) { const element = spaceObj; const gltfLayoutModels = this.gltfLayouts.filter(item => { return element.layoutId == item.userData.layoutId && element.spaceId == item.userData.spaceId; }) console.log("计算指定空间的家具的位置", spaceObj, element.layoutId, gltfLayoutModels); //空间下不存在家具模型,则该空间不需要进行下一步处理 if (!gltfLayoutModels || gltfLayoutModels.length == 0) { return; } gltfLayoutModels.sort(function(a, b) { return a.userData.level - b.userData.level }); // console.log("对应空间ID的模型数组", this.gltfLayouts, element.spaceId, gltfLayoutModels) for (let j = 0; j < gltfLayoutModels.length; j++) { const cube = gltfLayoutModels[j]; this.drawLayoutModel(element, cube); } // } }, // 绘制模型 drawLayoutModel(curSpace, cube) { const { centerX, spaceId } = curSpace; const cubeInfo = this.resetModelParameters(curSpace, cube.userData); // const cubeInfo = cube.userData; let centerY = curSpace.centerY * -1; // UE和ThreeJS坐标做相反 // 默认空间中心点 let positionX = centerX; let positionY = centerY; let rotationY = Math.PI / 2; let scaleX = 1; let scaleY = 1; // 空间尺寸 let spaceWidth = curSpace.spaceWidth; let spaceHeight = curSpace.spaceHeight; // 模型尺寸 let modelWidth = cubeInfo.modelWidth; let modelHeight = cubeInfo.modelHeight; // 判断旋转 if (parseFloat(cubeInfo.rotation) == 90) { rotationY = 0; // 交换尺寸 // modelWidth = cubeInfo.modelHeight; // modelHeight = cubeInfo.modelWidth; } if (parseFloat(cubeInfo.rotation) == 180) { rotationY = -Math.PI / 2; // modelWidth = cubeInfo.modelHeight; // modelHeight = cubeInfo.modelWidth; } if (parseFloat(cubeInfo.rotation) == -90) { rotationY = -Math.PI; // 交换尺寸 // modelWidth = cubeInfo.modelHeight; // modelHeight = cubeInfo.modelWidth; } // 判断靠墙 if (cubeInfo.isStepAsideLeft == 'true') { positionX = centerX - (spaceWidth / 2 - modelWidth / 2); if (parseFloat(cubeInfo.rotation) == 90 || parseFloat(cubeInfo.rotation) == -90) { positionX = centerX - (spaceWidth / 2 - modelWidth / 2); } positionX += parseFloat(cubeInfo.marginLeft); positionX += curSpace.spaceWallInfo.wallW ? 10 : 0; } if (cubeInfo.isStepAsideRight == 'true') { positionX = centerX + (spaceWidth / 2 - modelWidth / 2); if (parseFloat(cubeInfo.rotation) == 90 || parseFloat(cubeInfo.rotation) == -90) { positionX = centerX + (spaceWidth / 2 - modelWidth / 2); } positionX -= parseFloat(cubeInfo.marginRight); positionX -= curSpace.spaceWallInfo.wallE ? 10 : 0; } if (cubeInfo.isStepAsideTop == 'true') { positionY = centerY - (spaceHeight / 2 - modelHeight / 2); if (parseFloat(cubeInfo.rotation) == 90 || parseFloat(cubeInfo.rotation) == -90) { positionY = centerY - (spaceHeight / 2 - modelHeight / 2); } positionY += parseFloat(cubeInfo.marginTop); positionY += curSpace.spaceWallInfo.wallN ? 10 : 0; } if (cubeInfo.isStepAsideBottom == 'true') { positionY = centerY + (spaceHeight / 2 - modelHeight / 2); if (parseFloat(cubeInfo.rotation) == 90 || parseFloat(cubeInfo.rotation) == -90) { positionY = centerY + (spaceHeight / 2 - modelHeight / 2); } positionY -= parseFloat(cubeInfo.marginBottom); positionY -= curSpace.spaceWallInfo.wallS ? 10 : 0; } // 参照物 if (parseInt(cubeInfo.referenceModelTop) > 0) { const referenceModel = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelTop) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) if(!referenceModel){ console.warn("***no-data***",cubeInfo.referenceModelTop,cubeInfo) return false } positionY = referenceModel.position.z * 100 + (referenceModel.userData.modelHeight / 2 + cubeInfo .modelHeight / 2); positionY = positionY + parseFloat(cubeInfo.marginTop); } if (parseInt(cubeInfo.referenceModelBottom) > 0) { const referenceModel = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelBottom) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) if(!referenceModel){ console.warn("***no-data***",cubeInfo.referenceModelBottom,cubeInfo) return false } positionY = referenceModel.position.z * 100 - (referenceModel.userData.modelHeight / 2 + cubeInfo .modelHeight / 2); positionY = positionY - parseFloat(cubeInfo.marginBottom); } if (parseInt(cubeInfo.referenceModelLeft) > 0) { const referenceModel = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelLeft) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) if(!referenceModel){ console.warn("***no-data***",cubeInfo.referenceModelLeft,cubeInfo) return false } positionX = referenceModel.position.x * 100 + (referenceModel.userData.modelWidth / 2 + cubeInfo .modelWidth / 2); positionX = positionX + parseFloat(cubeInfo.marginLeft); } if (parseInt(cubeInfo.referenceModelRight) > 0) { const referenceModel = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelRight) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) if(!referenceModel){ console.warn("***no-data***",cubeInfo.referenceModelRight,cubeInfo) return false } positionX = referenceModel.position.x * 100 - (referenceModel.userData.modelWidth / 2 + cubeInfo .modelWidth / 2); positionX = positionX - parseFloat(cubeInfo.marginRight); } if (cubeInfo.isFixedWidth == "false" || cubeInfo.isFixedHeight == "false") { // 固定尺寸 // 靠墙拉伸 if (cubeInfo.isStepAsideTop == 'true' && cubeInfo.isStepAsideBottom == 'true') { // console.log("高度拉伸", spaceHeight / modelHeight) positionY = centerY; if (curSpace.spaceWallInfo.wallN && curSpace.spaceWallInfo.wallS) { spaceHeight -= 20 + parseFloat(cubeInfo.marginTop) + parseFloat(cubeInfo.marginBottom); positionY += parseFloat(cubeInfo.marginTop) / 2 ; positionY -= parseFloat(cubeInfo.marginBottom) / 2; } else if (curSpace.spaceWallInfo.wallN) { spaceHeight -= 10 + parseFloat(cubeInfo.marginTop) + parseFloat(cubeInfo.marginBottom); positionY += 10 / 2; positionY += parseFloat(cubeInfo.marginTop) / 2; positionY -= parseFloat(cubeInfo.marginBottom) / 2; } else if (curSpace.spaceWallInfo.wallS) { spaceHeight -= 10 + parseFloat(cubeInfo.marginTop) + parseFloat(cubeInfo.marginBottom); positionY -= 10 / 2; positionY += parseFloat(cubeInfo.marginTop) / 2 ; positionY -= parseFloat(cubeInfo.marginBottom) / 2; }else { spaceHeight -= parseFloat(cubeInfo.marginTop) + parseFloat(cubeInfo.marginBottom); positionY += parseFloat(cubeInfo.marginTop) / 2 ; positionY -= parseFloat(cubeInfo.marginBottom) / 2; } // 计算缩放 if (parseFloat(cubeInfo.rotation) == 90 || parseFloat(cubeInfo.rotation) == -90) { scaleY = spaceHeight / modelHeight; } else { scaleX = spaceHeight / modelHeight; } } if (cubeInfo.isStepAsideLeft == 'true' && cubeInfo.isStepAsideRight == 'true') { // console.log("宽度拉伸11111", spaceWidth / modelWidth) positionX = centerX; if (curSpace.spaceWallInfo.wallW && curSpace.spaceWallInfo.wallE) { spaceWidth -= 20 + parseFloat(cubeInfo.marginLeft) + parseFloat(cubeInfo.marginRight); positionX += parseFloat(cubeInfo.marginLeft) / 2; positionX -= parseFloat(cubeInfo.marginRight) / 2; } else if (curSpace.spaceWallInfo.wallW) { spaceWidth -= 10 + parseFloat(cubeInfo.marginLeft) + parseFloat(cubeInfo.marginRight); positionX += 10 / 2; positionX += parseFloat(cubeInfo.marginLeft) / 2; positionX -= parseFloat(cubeInfo.marginRight) / 2; } else if (curSpace.spaceWallInfo.wallE) { spaceWidth -= 10 + parseFloat(cubeInfo.marginLeft) + parseFloat(cubeInfo.marginRight); positionX -= 10 / 2; positionX += parseFloat(cubeInfo.marginLeft) / 2; positionX -= parseFloat(cubeInfo.marginRight) / 2; }else { spaceWidth -= parseFloat(cubeInfo.marginLeft) + parseFloat(cubeInfo.marginRight); positionX += parseFloat(cubeInfo.marginLeft) / 2; positionX -= parseFloat(cubeInfo.marginRight) / 2; } // console.log("模型计算位置" , parseFloat(cubeInfo.rotation)) // 计算缩放 if (parseFloat(cubeInfo.rotation) == 90 || parseFloat(cubeInfo.rotation) == -90) { scaleX = spaceWidth / modelWidth; } else { scaleY = spaceWidth / modelWidth; } } // 单个参照物和墙面拉伸 if (cubeInfo.isStepAsideTop == 'true' && parseInt(cubeInfo.referenceModelBottom) > 0) { const referenceModel = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelBottom) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) const referenceModelPositionY = referenceModel.position.z * 100 - referenceModel.userData .modelHeight / 2 - parseFloat(cubeInfo.marginBottom); const wallPositionY = centerY - spaceHeight / 2 + (curSpace.spaceWallInfo.wallN ? 10 : 0) + parseFloat(cubeInfo.marginTop); const newModelHeight = Math.abs(referenceModelPositionY - wallPositionY); // console.log("上边拉伸", referenceModelPositionY, wallPositionY, newModelHeight) if (Math.abs(parseFloat(cubeInfo.rotation)) == 90) { scaleY = newModelHeight / modelHeight; } else { scaleX = newModelHeight / modelHeight; } positionY = wallPositionY + newModelHeight / 2; } if (cubeInfo.isStepAsideBottom == 'true' && parseInt(cubeInfo.referenceModelTop) > 0) { const referenceModel = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelTop) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) const referenceModelPositionY = referenceModel.position.z * 100 + referenceModel.userData .modelHeight / 2 + parseFloat(cubeInfo.marginTop) + (curSpace.spaceWallInfo.wallN ? 10 : 0); const wallPositionY = centerY + spaceHeight / 2 - (curSpace.spaceWallInfo.wallS ? 10 : 0) - parseFloat(cubeInfo.marginBottom); const newModelHeight = Math.abs(referenceModelPositionY - wallPositionY); if (Math.abs(parseFloat(cubeInfo.rotation)) == 90) { scaleY = newModelHeight / modelHeight; } else { scaleX = newModelHeight / modelHeight; } positionY = wallPositionY - newModelHeight / 2; } if (cubeInfo.isStepAsideLeft == 'true' && parseInt(cubeInfo.referenceModelRight) > 0) { // console.log("左边拉伸") const referenceModel = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelRight) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) const referenceModelPositionX = referenceModel.position.x * 100 - referenceModel.userData .modelWidth / 2 - parseFloat(cubeInfo.marginLeft); const wallPositionX = centerX - spaceWidth / 2 + (curSpace.spaceWallInfo.wallE ? 10 : 0) + parseFloat(cubeInfo.marginRight); const newModelWidth = Math.abs(referenceModelPositionX - wallPositionX); if (Math.abs(parseFloat(cubeInfo.rotation)) == 90) { scaleX = newModelWidth / modelWidth; } else { scaleY = newModelWidth / modelWidth; } positionX = wallPositionX + newModelWidth / 2; } if (cubeInfo.isStepAsideRight == 'true' && parseInt(cubeInfo.referenceModelLeft) > 0) { const referenceModel = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelLeft) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) const referenceModelPositionX = referenceModel.position.x * 100 + referenceModel.userData .modelWidth / 2 + parseFloat(cubeInfo.marginLeft); const wallPositionX = centerX + spaceWidth / 2 - (curSpace.spaceWallInfo.wallE ? 10 : 0) - parseFloat(cubeInfo.marginRight); const newModelWidth = Math.abs(referenceModelPositionX - wallPositionX); if (Math.abs(parseFloat(cubeInfo.rotation)) == 90) { scaleX = newModelWidth / modelWidth; } else { scaleY = newModelWidth / modelWidth; } positionX = wallPositionX - newModelWidth / 2; // console.log("右边拉伸", Math.abs(parseFloat(cubeInfo.rotation))) } if(parseInt(cubeInfo.referenceModelBottom) > 0 && parseInt(cubeInfo.referenceModelTop) > 0){ // 上边惨遭物 const referenceModelTop = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelTop) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) // 下边参照物 const referenceModelBottom = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelBottom) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) const referenceModelTopPositionY = referenceModelTop.position.z * 100 + referenceModelTop.userData .modelHeight / 2 + parseFloat(cubeInfo.marginTop); const referenceModelBottomPositionY = referenceModelBottom.position.z * 100 - referenceModelBottom.userData .modelHeight / 2 - parseFloat(cubeInfo.marginBottom); const newModelHeight = Math.abs(referenceModelTopPositionY - referenceModelBottomPositionY); if (Math.abs(parseFloat(cubeInfo.rotation)) == 90) { scaleY = newModelHeight / modelHeight; } else { scaleX = newModelHeight / modelHeight; } positionY = referenceModelBottomPositionY - newModelHeight / 2; } if(parseInt(cubeInfo.referenceModelLeft) > 0 && parseInt(cubeInfo.referenceModelRight) > 0){ const referenceModelLeft = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelLeft) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) const referenceModelRight = this.gltfLayouts.find(item => { const layoutModelData = item.userData; return layoutModelData.id == parseInt(cubeInfo.referenceModelRight) && layoutModelData .spaceId == cubeInfo.spaceId && layoutModelData.layoutId == cubeInfo.layoutId; }) const referenceModelLeftPositionX = referenceModelLeft.position.x * 100 + referenceModelLeft.userData .modelWidth / 2 + parseFloat(cubeInfo.marginLeft); const referenceModelRightPositionX = referenceModelRight.position.x * 100 - referenceModelRight.userData .modelWidth / 2 - parseFloat(cubeInfo.marginRight); const newModelWidth = Math.abs(referenceModelLeftPositionX - referenceModelRightPositionX); if (Math.abs(parseFloat(cubeInfo.rotation)) == 90) { scaleX = newModelWidth / modelWidth; } else { scaleY = newModelWidth / modelWidth; } positionX = referenceModelRightPositionX - newModelWidth / 2; } } // console.log("模型计算位置--", positionX, positionY) console.log("模型计算位置", cubeInfo, centerX, centerY, spaceWidth, spaceHeight, modelWidth, modelHeight, spaceId, scaleX, scaleY, positionX, positionY, cubeInfo.modelName) let oldPosition = new THREE.Vector3();//当前几何体的位置参数 oldPosition.copy(cube.position); cube.position.x = positionX / 100; cube.position.z = positionY / 100; cube.rotation.y = rotationY; cube.scale.x = scaleX; cube.scale.z = scaleY; cube.scale.y = 1; // if (!cube.parent) { //说明还没添加到场景中-旧版方法 // this.scene.add(cube); //处理完毕后在加入场景中 // } // if(scaleX>1 || scaleY>1){ // console.warn("***scaleinfo***",cubeInfo.id,scaleX,scaleY,cubeInfo.modelName) // } if(this.type==2){//全局精简加载 let name = cubeInfo.modelName.substring(0, cubeInfo.modelName.length - 2); if(globlShowModel.includes(name)){ if(cubeInfo.modelName=='BP_XSPACE_deng_01_C'){//灯光 this.lightHandle(cube) }else{ this.updateInfo(cube,oldPosition,scaleX,scaleY);//实例化方法 } } }else{ if(cubeInfo.modelName=='BP_XSPACE_deng_01_C'){//灯光 this.lightHandle(cube) }else{ this.updateInfo(cube,oldPosition,scaleX,scaleY);//实例化方法 } } }, //更新家具模型到页面中 updateInfo(cube,oldPosition,scaleX,scaleY){ let lay = this.gltfLayouts.find(it=>it.uniId==cube.uniId); if(cube.instancedMeshIndexList && cube.instancedMeshIndexList.length>0){ cube.instancedMeshIndexList.forEach(item=>{ let index = item.instancedMeshIndex; let instancedMesh = this.instancedFurList[index];//网格实例对象 let curMeshIndex = item.instancedAtIndex;//当前家具模型在网格实例对象里面的序号 let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵 instancedMesh.getMatrixAt(curMeshIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面 let scaleMatrix = new THREE.Matrix4(); //定义一个缩放变化矩阵 let panMatrix = new THREE.Matrix4(); //定义一个平移变化矩阵 if (!lay.loaded) { //说明还没添加到场景中 // scaleMatrix.makeScale(scaleX,1,scaleY); //获得缩放变化矩阵 // panMatrix.makeTranslation(cube.position.x,0,cube.position.z); //获得平移变化矩阵 // stratMatrix.multiply(scaleMatrix).premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵 // instancedMesh.instanceMatrix.needsUpdate = true;//更新之前,必须开启开关 // instancedMesh.setMatrixAt(curMeshIndex,stratMatrix);//更新几何体的世界矩阵 // this.scene.add(instancedMesh); }else{//更新形变矩阵 scaleMatrix.makeScale(scaleX, 1, scaleY); //获得缩放变化矩阵 panMatrix.makeTranslation(cube.position.x - oldPosition.x,0,cube.position.z - oldPosition.z); //获得平移变化矩阵 stratMatrix.multiply(scaleMatrix).premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵 instancedMesh.instanceMatrix.needsUpdate = true;//更新之前,必须开启开关 instancedMesh.setMatrixAt(curMeshIndex,stratMatrix);//更新几何体的世界矩阵 } }) lay.loaded = true; } }, // 空间处理光源 lightHandle(cube){ let light = this.gltfLayouts.find(it=>it.uniId==cube.uniId); if(!light.loaded){ // 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。 let pointLight = new THREE.PointLight(0xffd7b3, 1, 5, 1); pointLight.position.set(cube.position.x, 1.5, cube.position.z); //default; light shining from top this.scene.add(pointLight); let sphereSize = 0.1; let pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize ); this.scene.add( pointLightHelper); // pointLight.castShadow = true; // default false // // 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域,光源投射方向为通过坐标原点 // pointLight.shadow.camera.left = -200; // default // pointLight.shadow.camera.right = 200; // default // pointLight.shadow.camera.top = 200; // default // pointLight.shadow.camera.bottom = -200; // default this.scene.add(pointLight); light.loaded = true; }else{ } }, // 空间布局旋转镜像重置模型约束 resetModelParameters(curSpace, cubeInfo) { // 旋转 const defaultLayout = curSpace.layouts.find(item => { return item.isDefault }) if (!defaultLayout) { return cubeInfo } let count = 0; switch (parseInt(defaultLayout.layoutRotate)) { case 90: count = 1; break; case 180: count = 2; break; case -90: count = 3; break; default: break; } for (let index = 0; index < count; index++) { let oldCubeInfo = JSON.parse(JSON.stringify(cubeInfo)) oldCubeInfo.isStepAsideLeft = "false" oldCubeInfo.isStepAsideTop = "false" oldCubeInfo.isStepAsideRight = "false" oldCubeInfo.isStepAsideBottom = "false" oldCubeInfo.referenceModelLeft = "0" oldCubeInfo.referenceModelTop = "0" oldCubeInfo.referenceModelRight = "0" oldCubeInfo.referenceModelBottom = "0" oldCubeInfo.rotation = "0" oldCubeInfo.marginLeft = "0"; oldCubeInfo.marginTop = "0"; oldCubeInfo.marginRight = "0"; oldCubeInfo.marginBottom = "0"; // 是否靠墙 if (cubeInfo.isStepAsideLeft == 'true') { oldCubeInfo.isStepAsideTop = 'true' } if (cubeInfo.isStepAsideTop == 'true') { oldCubeInfo.isStepAsideRight = 'true' } if (cubeInfo.isStepAsideRight == 'true') { oldCubeInfo.isStepAsideBottom = 'true' } if (cubeInfo.isStepAsideBottom == 'true') { oldCubeInfo.isStepAsideLeft = 'true' } // 参照物体 if (parseInt(cubeInfo.referenceModelLeft) > 0) { oldCubeInfo.referenceModelTop = cubeInfo.referenceModelLeft; } if (parseInt(cubeInfo.referenceModelTop) > 0) { oldCubeInfo.referenceModelRight = cubeInfo.referenceModelTop; } if (parseInt(cubeInfo.referenceModelRight) > 0) { oldCubeInfo.referenceModelBottom = cubeInfo.referenceModelRight; } if (parseInt(cubeInfo.referenceModelBottom) > 0) { oldCubeInfo.referenceModelLeft = cubeInfo.referenceModelBottom; } // 边距 oldCubeInfo.marginLeft = cubeInfo.marginBottom; oldCubeInfo.marginTop = cubeInfo.marginLeft; oldCubeInfo.marginRight = cubeInfo.marginTop; oldCubeInfo.marginBottom = cubeInfo.marginRight; oldCubeInfo.modelWidth = cubeInfo.modelHeight; oldCubeInfo.modelHeight = cubeInfo.modelWidth; // 旋转 if (parseInt(cubeInfo.rotation) == 0 || parseInt(cubeInfo.rotation) == 90) { oldCubeInfo.rotation = parseInt(cubeInfo.rotation) + 90; } if (parseInt(cubeInfo.rotation) == 180) { oldCubeInfo.rotation = "-90"; } if (parseInt(cubeInfo.rotation) == -90) { oldCubeInfo.rotation = "0"; } // console.log("旋转前的模型参数X", cubeInfo, oldCubeInfo, defaultLayout) cubeInfo = oldCubeInfo; // console.log("旋转后的模型参数X", cubeInfo, oldCubeInfo, defaultLayout) } return cubeInfo; }, // 改变空间模型 changeLayoutModel(){ let changeSpaces = []; // 去重 for (let index = 0; index < this.changeSpaces.length; index++) { const element = this.changeSpaces[index]; const findIndex = changeSpaces.findIndex((item)=>{ return item.spaceId == element.spaceId; }) if(findIndex==-1){ const findListIndex = this.spaceList.findIndex((item)=>{ return item.spaceId == element.spaceId; }) if(findListIndex !=-1){ changeSpaces.push(this.spaceList[findListIndex]) } } } console.log("所有变化的空间", changeSpaces) this.changeLayouts = []; let promise_list = []; for (let index = 0; index < changeSpaces.length; index++) { const element = changeSpaces[index]; const layoutObj = this.arrFrunList.find((item)=>{ return item.id == element.layoutId; }) console.log("请求布局的对象", layoutObj, element); if(layoutObj){ promise_list.push( new Promise((resolve, reject) => { this.loadlayoutByID(layoutObj.groupType, element, resolve); }) ) } } Promise.all(promise_list).then(()=>{ this.$nextTick(()=>{ console.log("新布局替换完成",this.changeLayouts, changeSpaces); this.furnHandle(this.changeLayouts, changeSpaces[0]); }) }) }, async loadlayoutByID(groupType,spaceObj, resolve){ let param = { "brandId": $config.brandId, "houseId": this.curHouseObj.houseId, "groupType": groupType } // 默认的布局 let res = await requestConfig("findOverallArrangementList", param); if (!res.success || !res.pageModel || res.pageModel.resultSet.length == 0) { return resolve(); } const groupLayouts = res.pageModel.resultSet; console.log("查询指定分组的布局", groupType, groupLayouts, spaceObj.spaceWidth, spaceObj.spaceHeight) // 根据空间的尺寸和布局的最小尺寸,筛选出合适的最大的布局 const layouts01 = groupLayouts.filter((item)=>{ return item.minWidth <= spaceObj.spaceWidth && item.minDepth <= spaceObj.spaceHeight }) console.log("过滤适合的布局01", layouts01) // 长度和宽度都满足空间尺寸 const layouts02 = layouts01.filter((item)=>{ return (item.minWidth * item.minDepth ) <= (spaceObj.spaceWidth * spaceObj.spaceHeight) }) console.log("过滤适合的布局02", layouts02) // 取布局面积最大的一个 let layoutObj = null for (let index = 0; index < layouts02.length; index++) { const element = layouts02[index]; if(!layoutObj){ layoutObj = element; }else{ if((layoutObj.minWidth * layoutObj.minDepth) < (element.minWidth * element.minDepth)){ layoutObj = element; } } } console.log("找出最合适的布局", layoutObj) console.log("更新空间的布局ID=", layoutObj.id) // 合适的布局更现有布局相同 if(spaceObj.layoutId == layoutObj.id){ this.calculateLayoutModelSizeBySpace(spaceObj) // 提前计算模型的位置 this.changeLayoutModelState(true); // 显示家具模型 return resolve() } // 更新空间的布局id for (let index = 0; index < this.spaceList.length; index++) { const element = this.spaceList[index]; if(element.spaceId == spaceObj.spaceId){ this.deleteLayoutModel(element, layoutObj) element.layoutId = layoutObj.id console.log("替换空间的布局ID", spaceObj.spaceId, layoutObj.id); } } this.changeLayouts.push(layoutObj) resolve() } } }