// 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:[], // graderGltfLayouts: [],//花园地块的模型对象 // graderInstancedFurList:[],//花园地块的模型 arrFrunList:[], promise_list:[], dracoLoader:null, type:1, tmpList:[], realList:[], nextString:'_simple',//精简模型后缀 // lastFrunList:[], } }, 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; } // let list1 = []; // let list2 = []; // res.list.forEach(singel=>{ // let spaceType = this.spaceList.find(it => it.layoutId == signel.id).spaceType; // if(spaceType!=14){//花园地块 // list1.push(singel); // }else{ // list2.push(singel); // } // }); this.promise_list = []; this.arrFrunList = res.list; this.gltfLayouts = []; //模型列表,所有空间里面的每个模型(家具)对应一条记录 // 通过默认布局 this.furnHandle(this.arrFrunList,[]); }, //加载其他空间的家具模型 loadLastSpaceModel(){ if(!this.changeSpaces || this.changeSpaces.length==0){ return false; } let spaceIds = this.changeSpaces.map(it=>it.spaceId); let layoutIds = this.spaceList.filter(item=>spaceIds.includes(item.spaceId)).map(it=>it.layoutId); let list = this.arrFrunList.filter(item=>{ return !layoutIds.includes(item.id) }) let spaceList = this.spaceList.filter(item=>{ return !spaceIds.includes(item.spaceId) }) // console.warn("***layoutIds***",layoutIds,spaceIds,this.gltfLayouts) this.furnHandle(list,spaceList) this.changeSpaces = [] }, //拆分家具模型加载逻辑 furnHandle(arrFrunList, tmpSpaceList=[]){ console.log("bug修复", arrFrunList, tmpSpaceList) if(!arrFrunList || arrFrunList.length == 0){ return } let startTime = new Date().getTime(); let tmpList = [];//临时数据 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));//厨房 } } console.warn("重新加载布局", arrFrunList,this.spaceList,this.gltfLayouts,allowSpaceId); 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) } } } }) // 处理删除模型时,其他空间引用了该模型时的重新载入处理 // if(this.lastFrunList && this.lastFrunList.length>0){ // let spaceIds = tmpSpaceList.map(it=>it.spaceId); // this.arrFrunList.forEach(signel => { // let spaceId = this.spaceList.find(it => it.layoutId == signel.id).spaceId; // let md = JSON.parse(signel.modelJson); //获取布局里面的模型信息 // //遍历模型信息,获取模型列表 // for (let i = 0; i < md.modelData.length; i++) { // let item = md.modelData[i]; // if(this.lastFrunList.includes(item.modelName) && !spaceIds.includes(spaceId)){ // item.spaceId = spaceId; // item.layoutId = signel.id; // item.h5Id = signel.id+""+item.id;//唯一标识 // if(!tmpList.find(it=>it.h5Id==item.h5Id)){ // // tmpList.push(item); // console.warn("***布局xxxx***", item, signel.id) // } // } // } // }) // this.lastFrunList = []; // } this.tmpList = tmpList; if(this.type==2){//全局精简模型;需要的是所有空间的模型 this.fliterList(tmpList);//精简模式下,只计算白名单里面的模型位置等信息 console.warn("***fliterList***",this.realList.length); tmpList = this.realList; } let realFurArr = this.preFurnitureData(tmpList);//统一处理家具模型 if(tmpSpaceList && tmpSpaceList.length>0){ this.calculateLayoutModelSizeBySpace(tmpSpaceList) // 提前计算模型的位置 }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); this.loadLastSpaceModel();//加载剩余空间的家具模型 }) }, //过滤掉不需要的家具 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{ //不在白名单里面的,不加载 if(!globlShowModel.includes(realData.name)){ resolve(); return false; } 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(); }); }, //清除当前楼层下的所有家具模型 clearAllLayoutData(){ let deleList = this.scene && this.scene.children.filter(object=>{ if(object.userType=="layoutMesh"){ return object } }) // console.warn("***deleList***",deleList) if(deleList && deleList.length>0){ this.scene.remove(...deleList); } this.gltfLayouts = []; this.instancedFurList = []; }, // 切换家具的显示隐藏 changeLayoutModelState(isShow=false){ if(isShow){ this.instancedFurList.forEach(it=>{ if(it){ it.visible = isShow; } }) console.log("移动过程中显示隐藏空间家具", this.gltfLayouts,isShow,this.changeSpaces) return false; } const changeSpaceList = this.leftSpaces.concat(this.rightSpaces); // 只改变空间尺寸变化的家具模型 console.log("移动过程中显示隐藏空间家具", this.gltfLayouts,isShow, this.leftSpaces, this.rightSpaces,this.changeSpaces); for (let index = 0; index < changeSpaceList.length; index++) { let element = changeSpaceList[index]; let gltfLayoutModels = this.gltfLayouts.filter(item => { return element.layoutId == item.userData.layoutId && element.spaceId == item.userData.spaceId; }) if (!gltfLayoutModels || gltfLayoutModels.length == 0) { continue; } console.warn("***隐藏空间家具***",element,gltfLayoutModels) for (let j = 0; j < gltfLayoutModels.length; j++) { let 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){ const oldLayoutIndex = this.arrFrunList.findIndex((item)=>{ return item.id == spaceObj.layoutId }) //对应空间的布局替换为新的布局数据 if(oldLayoutIndex!=-1 && layoutObj){ this.arrFrunList[oldLayoutIndex] = layoutObj // this.arrFrunList.splice(oldLayoutIndex,1) } if(!layoutObj){//当前空间不存在布局了 this.arrFrunList.splice(oldLayoutIndex,1) spaceObj.layoutId = null;//为了确保传递到下一页的空间里面也没有布局信息,确保布局一致 } console.log("准备删除模型", spaceObj,oldLayoutIndex, this.gltfLayouts); //寻找当前空间下的所有家具模型对象 const gltfLayoutModels = this.gltfLayouts.filter(item => { return spaceObj.layoutId == item.userData.layoutId && spaceObj.spaceId == item.userData.spaceId; }) //不存在则不处理 if (!gltfLayoutModels || gltfLayoutModels.length == 0) { return; } let deleList = [] for (let j = 0; j < gltfLayoutModels.length; j++) { const cube = gltfLayoutModels[j]; this.gltfLayouts.splice(this.gltfLayouts.findIndex(it=>it.uniId==cube.uniId),1);//删除gltfLayouts里面的数据 if(cube.instancedMeshIndexList && cube.instancedMeshIndexList.length>0){ cube.instancedMeshIndexList.forEach(item=>{ let index = item.instancedMeshIndex; let instancedMesh = this.instancedFurList[index];//网格实例对象 if(instancedMesh){ instancedMesh.dispose(); deleList.push(instancedMesh);//等待释放资源 this.instancedFurList[index] = null; // if(instancedMesh.count>1){//表示其他空间还存在这个模型,应该重新加入计算中 // if(!this.lastFrunList.includes(cube.userData.modelName)){ // this.lastFrunList.push(cube.userData.modelName); // } // } } }) } } this.scene.remove(...deleList);//释放家具的资源,this.instancedFurList console.log("删除模型了", spaceObj, this.gltfLayouts); }, // 计算家具的位置 calculateLayoutModelSize() { console.log("计算家具的位置", this.gltfLayouts,this.changeSpaces); // 有改变空间,只刷新改变空间的模型数据 const spaceList = (!this.changeSpaces || this.changeSpaces.length ==0) ? this.spaceList : this.changeSpaces; for (let index = 0; index < spaceList.length; index++) { const element = 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(spaceList) { for (let index = 0; index < spaceList.length; index++) { const element = spaceList[index]; const gltfLayoutModels = this.gltfLayouts.filter(item => { return element.layoutId == item.userData.layoutId && element.spaceId == item.userData.spaceId; }) // console.log("计算指定空间的家具的位置", element, element.layoutId, gltfLayoutModels); //空间下不存在家具模型,则该空间不需要进行下一步处理 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); } } }, // 绘制模型 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 && this.spaceList[findListIndex].spaceType!=14){ changeSpaces.push(this.spaceList[findListIndex]) } } } console.log("所有变化的空间", changeSpaces) this.changeLayouts = []; let promise_list = []; if(!changeSpaces || changeSpaces.length==0){ // this.changeLayoutModelState(true); // 显示家具模型 return false; } this.clearAllLayoutData();//清除所有空间的家具模型 for (let index = 0; index < changeSpaces.length; index++) { let element = changeSpaces[index]; let 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); }) ) }else{//空间不存在布局,需要请求布局信息 promise_list.push( new Promise((resolve, reject) => { this.loadlayoutByID(element.groupType, element, resolve); }) ) } } Promise.all(promise_list).then(()=>{ this.$nextTick(()=>{ console.log("新布局替换完成",this.changeLayouts, changeSpaces,this.arrFrunList.map(it=>it.id)); this.furnHandle(this.changeLayouts, changeSpaces);//先加载变化的空间的布局 this.updataPageData();//更新数据 }) }) }, 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; } } } if(layoutObj==null){ console.warn("没有合适的布局", layoutObj,spaceObj.layoutId); spaceObj.groupType = groupType; this.deleteLayoutModel(spaceObj, layoutObj);//删除当前的布局 return resolve() } console.log("找出最合适的布局", layoutObj) console.log("更新空间的布局ID=", spaceObj.layoutId,'=>',layoutObj.id) // 合适的布局更现有布局相同-不在需要了,因为这此之前已经把所有的家具都删除了 // if(spaceObj.layoutId == layoutObj.id && !spaceObj.delateLayoutId){ // // this.calculateLayoutModelSizeBySpace(spaceObj) // 提前计算模型的位置 // // this.changeLayoutModelState(true); // 显示家具模型 // return resolve() // } // 更新空间的布局id const element = this.spaceList.find(it=>it.spaceId == spaceObj.spaceId); if(element){ this.deleteLayoutModel(element, layoutObj) element.layoutId = layoutObj.id console.log("替换空间的布局ID", spaceObj.spaceId, layoutObj.id); } this.changeLayouts.push(layoutObj) resolve() } } }