同步冬冬提交的代码

src/components/newBottomCom/viewStyle/viewStyle.vue

@@ -308,7 +308,7 @@
 					negativePrompt: noPromot,
 					prompt: prompt,
 					"batchSize": 1,
-					brandId: config.brandId,
+					brandId: $config.brandId,
 					height: this.imageHeight,
 					width: this.imageWidth,
 					"moduleType": "simple_and_quiet",

src/mixins/loadModel - 副本.js

@@ -2,7 +2,9 @@ var app = getApp(); //获取应用实例
 const util = require('@/static/utils/util.js');
 const config = require('@/static/config.js');
 import modelData from '@/webgl/static/layoutModelData.js';
-// import requestConfig from '@/services/requestConfig.js';
+import globlShowModel from '@/webgl/static/globlShowModel.js';
+import requestConfig from '@/static/lib/requestConfig';
+import { DRACOLoader } from '@/webgl/jsm/loaders/DRACOLoader.js';
 const THREE = requirePlugin('ThreeX');
 // import { TWEEN } from '@/webgl/jsm/libs/tween.module.min.js';
 export default {
@@ -12,17 +14,20 @@ export default {
 			instancedFurList:[],
 			arrFrunList:[],
 			promise_list:[],
-			loadFurPromise: new Promise((resolve) => {
-			    this.loadedCompleteFun = function() {
-			        console.log('家具模型接口结束');
-			        resolve()
-			    }
-			}),
+			dracoLoader:null,
+			type:1,
+			tmpList:[],
+			realList:[],
+			changeLayouts:[]
 		}
 	},
 	watch: {},
-	onReady() {
-
+	mounted() {
+		console.warn("***loadmodel-mounted****")
+		this.dracoLoader = new DRACOLoader();
+		this.dracoLoader.setDecoderPath('/webgl/draco/gltf/');
+		this.dracoLoader.setDecoderConfig( { type: 'js' } );
+		this.dracoLoader.preload();
 	},
 	methods: {
 		// 设置空间数组的墙体信息 
@@ -50,50 +55,53 @@ export default {
 				spaceWallInfo.wallS = wallSIndex == -1 ? false : true;
 				element.spaceWallInfo = spaceWallInfo;
 			}
-			await this.loadFurPromise;//等待解析分享者参数结束
-			this.$nextTick(() => {
-				this.calculateLayoutModelSize() // 计算模型的位置
-			})
 		},
 		// 批量获取空间模型信息
-		async getOverallArrangementDetailsList() {
+		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,
 			};
-			this.loadFurPromise = new Promise((resolve, reject) => {
-				this.loadedCompleteFun = function() {
-				    console.log('家具模型接口结束');
-				    resolve()
-				}
-			})
+			// 默认的布局
 			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.furnHandle(this.arrFrunList);
 		},
 		//拆分家具模型加载逻辑
-		furnHandle(){
+		furnHandle(arrFrunList){
+			if(!arrFrunList || arrFrunList.length == 0){
+				return
+			}
 			let startTime = new Date().getTime();
 			let tmpList = [];//临时数据
 			this.gltfLayouts = []; //模型列表，所有空间里面的每个模型(家具)对应一条记录
 			
 			let allowSpaceId = [this.curSpaceObj.spaceId];
-			if(this.curSpaceObj.spaceId==758){//二层主卧特殊处理
-				allowSpaceId.push(735);//休闲小客厅
-			}
-			//花园类型的添加到家具加载目录里面
-			// this.spaceList.forEach(it=>{
-			// 	if(it.spaceType==14){
-			// 		allowSpaceId.push(it.spaceId);
-			// 	}
-			// })
-			this.arrFrunList.forEach(signel => {
+			if(this.type == 2){//全局精简模型;需要的是所有空间的模型
+				allowSpaceId = this.spaceList.map(it=>it.spaceId)
+			}else{//空间模型模式
+				allowSpaceId = [this.curSpaceObj.spaceId];
+				if(this.curSpaceObj.spaceId==758){//二层主卧特殊处理
+					allowSpaceId.push(735);//休闲小客厅
+				}
+				//花园类型的添加到家具加载目录里面
+				// this.spaceList.forEach(it=>{
+				// 	if(it.spaceType==14){
+				// 		allowSpaceId.push(it.spaceId);
+				// 	}
+				// })
+			}
+			// allowSpaceId = [388];//模型有警告，需要看下
+			console.log("重新加载布局", arrFrunList,this.spaceList,this.gltfLayouts);
+			arrFrunList.forEach(signel => {
 				let spaceId = this.spaceList.find(it => it.layoutId == signel.id).spaceId;
 				if(allowSpaceId.includes(spaceId)){//只加载允许的空间的布局，其他不加载
 					let md = JSON.parse(signel.modelJson); //获取布局里面的模型信息
@@ -103,44 +111,83 @@ export default {
 						let item = md.modelData[i];
 						item.spaceId = spaceId;
 						item.layoutId = signel.id;
-						// tmpList.push(item);
-						this.promise_list.push(
-							new Promise((resolve, reject) => {
-								this.loadLayoutModelsOld(item , resolve);
-							})
-						)
+						item.h5Id = signel.id+""+item.id;//唯一标识
+						if(item.modelName=='BP_furnitureBase_C'){
+							continue;
+						}else{
+							tmpList.push(item);
+						}
 					}
 				}
-				
 			})
-			// let realFurArr = this.preFurnitureData(tmpList);//统一处理家具模型
-			// let arrLength = realFurArr.length;
-			// console.log("***realFurArr***", realFurArr);
-			// realFurArr && realFurArr.forEach((item,index) => {
-			// 	this.promise_list.push(
-			// 		new Promise((resolve, reject) => {
-			// 			this.loadLayoutModels(item, arrLength , resolve);
-			// 		})
-			// 	)
-			// });
+			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);//统一处理家具模型
+			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.loadedCompleteFun()
-				// this.$nextTick(() => {
-				// 	this.calculateLayoutModelSize() // 计算模型的位置
-				// })
+				console.log("家具模型全部加载完成，时间：", endTime - startTime, this.gltfLayouts);
+			})
+		},
+		//过滤掉不需要的家具
+		fliterList(list){
+			this.realList = [];
+			//找到直接的家具模型
+			list && list.forEach((mod)=>{
+				let name = mod.modelName.substring(0,mod.modelName.length-2);
+				if(globlShowModel.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 = [];//家具列表
-			let dataList = [];
-			dataList = list.map(item=>{
-				let curSpace = this.spaceList.find(space=>space.spaceId==item.spaceId);
-				return this.resetModelParameters(curSpace, item);
-			})
-			dataList && dataList.forEach((item, index) => {
+			list && list.forEach((item, index) => {
 				item.uniId = Date.now() + index;//唯一标识
 				//获取墙体对应的gltb模型的相关信息
 				let modelName = item.modelName;
@@ -159,77 +206,75 @@ export default {
 					}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, arrLength, resolve){
+		loadLayoutModels(realData, resolve){
 		    var that = this;
 			if(!realData.url){
 				console.warn("***家具模型不存在***",realData);
 				resolve();
 				return false;
 			}
-			that.loader.load(realData.url, ( gltf ) => {
-				// that.progress = parseInt(100/arrLength) + that.progress;
-				// if(that.progress>100){
-				// 	that.progress = 100;
-				// }
-				// that.$refs.myLoading.showLoading("加载中..." + that.progress+'%')
-				// console.log("家具加载成功",that.progress,realData,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 rotationY = Math.PI / 2;
-							if (parseFloat(it.rotation) == 90) {
-								rotationY = 0;
-							}
-							if (parseFloat(it.rotation) == 180) {
-								rotationY = -Math.PI / 2;
-							}
-							if (parseFloat(it.rotation) == -90) {
-								rotationY = -Math.PI;
-							}
-							gltf.scene.rotation.y = rotationY;
-							gltf.scene.updateMatrixWorld();//更新世界坐标-这样，子模型也同步更新了
-							instancedMesh.setMatrixAt(i, child.matrixWorld);
-							instancedMesh.instanceMatrix.needsUpdate = true;
-							// instancedMesh.setColorAt(i, child.material.color);
-							// instancedMesh.instanceColor.needsUpdate = true;
-							let gltfFurn = that.gltfLayouts.find(itme=>itme.uniId==it.uniId);//判断是否已经添加过
-							if(!gltfFurn){
-								let position = new THREE.Vector3();//当前几何体的位置参数
-								let scale = new THREE.Vector3();//当前几何体的缩放参数
-								let rotation = new THREE.Vector3();//当前几何体的缩放参数
-								let md = {
-									uniId:it.uniId,//家具模型实例的唯一标识
-									spaceId:it.spaceId,
-									id:it.id,
-									instancedMeshIndexList:[//标识网格实例数组的序号 以及 当前几何体 在网格实例的序号
+			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},
-									],
-									userData:it,
-									position:position,
-									scale:scale,
-									rotation:rotation,
-									loaded:false,
-								};
-								that.gltfLayouts.push(md);
+									]
+								}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{
-								gltfFurn.instancedMeshIndexList.push({
-									instancedMeshIndex:this.instancedFurList.length-1,instancedAtIndex:i
-								})
+								instancedMesh.castShadow = true;//对象是否产生阴影
 							}
-						})
-						instancedMesh.userType = "layoutMesh";
-					}
+							this.scene.add(instancedMesh);//添加到场景中
+						}
+					});
+					resolve();
 				});
-				resolve();
-			});
+			}
+			
 		},
 		//加载模型
 		loadLayoutModelsOld(modelObj, resolve) {
@@ -256,6 +301,80 @@ export default {
 				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);
@@ -293,6 +412,7 @@ export default {
 			let rotationY = Math.PI / 2;
 			let scaleX = 1;
 			let scaleY = 1;
+
 			// 空间尺寸
 			let spaceWidth = curSpace.spaceWidth;
 			let spaceHeight = curSpace.spaceHeight;
@@ -300,7 +420,7 @@ export default {
 			let modelWidth = cubeInfo.modelWidth;
 			let modelHeight = cubeInfo.modelHeight;
 
-			// // 判断旋转
+			// 判断旋转
 			if (parseFloat(cubeInfo.rotation) == 90) {
 				rotationY = 0;
 				// 交换尺寸
@@ -329,7 +449,7 @@ export default {
 				positionX += curSpace.spaceWallInfo.wallW ? 10 : 0;
 			}
 			if (cubeInfo.isStepAsideRight == 'true') {
-				positionX = centerX + (spaceWidth / 2 - modelHeight / 2);
+				positionX = centerX + (spaceWidth / 2 - modelWidth / 2);
 				if (parseFloat(cubeInfo.rotation) == 90 || parseFloat(cubeInfo.rotation) == -90) {
 					positionX = centerX + (spaceWidth / 2 - modelWidth / 2);
 				}
@@ -337,7 +457,7 @@ export default {
 				positionX -= curSpace.spaceWallInfo.wallE ? 10 : 0;
 			}
 			if (cubeInfo.isStepAsideTop == 'true') {
-				positionY = centerY - (spaceHeight / 2 - modelWidth / 2);
+				positionY = centerY - (spaceHeight / 2 - modelHeight / 2);
 				if (parseFloat(cubeInfo.rotation) == 90 || parseFloat(cubeInfo.rotation) == -90) {
 					positionY = centerY - (spaceHeight / 2 - modelHeight / 2);
 				}
@@ -361,6 +481,10 @@ export default {
 					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);
@@ -371,6 +495,10 @@ export default {
 					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);
@@ -381,6 +509,10 @@ export default {
 					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);
@@ -391,6 +523,10 @@ export default {
 					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);
@@ -547,51 +683,153 @@ export default {
 
 					// 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, rotationY)
+			console.log("模型计算位置", cubeInfo, centerX, centerY, spaceWidth, spaceHeight, modelWidth, modelHeight, spaceId, scaleX, scaleY, positionX, positionY)
 			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.x = scaleX;
 			cube.scale.z = scaleY;
-			if (!cube.parent) { //说明还没添加到场景中-旧版方法
-				this.scene.add(cube); //处理完毕后在加入场景中
-			}
-			if(scaleX>1 || scaleY>1){
-				console.warn("***scaleinfo***",cubeInfo.id,scaleX,scaleY,cubeInfo.modelName)
+			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);//实例化方法
+				}
 			}
-			// this.updateInfo(cube,oldPosition,scaleX,scaleY);//实例化方法
 		},
 		//更新家具模型到页面中
 		updateInfo(cube,oldPosition,scaleX,scaleY){
 			let lay = this.gltfLayouts.find(it=>it.uniId==cube.uniId);
-			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{//更新形变矩阵
-					panMatrix.makeTranslation(cube.position.x - oldPosition.x,0,cube.position.z - oldPosition.z);	//获得平移变化矩阵
-					stratMatrix.premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵
-					instancedMesh.instanceMatrix.needsUpdate = true;//更新之前，必须开启开关
-					instancedMesh.setMatrixAt(curMeshIndex,stratMatrix);//更新几何体的世界矩阵
-				}
-			})
-			lay.loaded = true;
+			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, 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) {
@@ -692,5 +930,118 @@ export default {
 
 			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.furnHandle(this.changeLayouts);
+				})
+			})
+		},
+		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.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()
+		}
 	}
 }

src/mixins/loadModel.js

@@ -28,10 +28,10 @@ export default {
 	watch: {},
 	mounted() {
 		console.warn("***loadmodel-mounted****")
-		// this.dracoLoader = new DRACOLoader();
-		// this.dracoLoader.setDecoderPath('/gltf/');
-		// this.dracoLoader.setDecoderConfig( { type: 'js' } );
-		// this.dracoLoader.preload();
+		this.dracoLoader = new DRACOLoader();
+		this.dracoLoader.setDecoderPath('/gltf/');
+		this.dracoLoader.setDecoderConfig( { type: 'js' } );
+		this.dracoLoader.preload();
 	},
 	methods: {
 		// 设置空间数组的墙体信息 
@@ -59,7 +59,6 @@ export default {
 				spaceWallInfo.wallS = wallSIndex == -1 ? false : true;
 				element.spaceWallInfo = spaceWallInfo;
 			}
-			// this.loadedCompleteFun();
 		},
 		// 批量获取空间模型信息
 		async getOverallArrangementDetailsList(type=1) {
@@ -70,22 +69,21 @@ export default {
 			let parmas = {
 				ids: arr,
 			};
-			// this.loadFurPromise = new Promise((resolve, reject) => {
-			// 	this.loadedCompleteFun = function() {
-			// 		console.log('家具模型接口结束');
-			// 		resolve()
-			// 	}
-			// })
+			// 默认的布局
 			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.furnHandle(this.arrFrunList);
 		},
 		//拆分家具模型加载逻辑
-		furnHandle(){
+		furnHandle(arrFrunList){
+			if(!arrFrunList || arrFrunList.length == 0){
+				return
+			}
 			let startTime = new Date().getTime();
 			let tmpList = [];//临时数据
 			this.gltfLayouts = []; //模型列表，所有空间里面的每个模型(家具)对应一条记录
@@ -111,7 +109,8 @@ export default {
 				// })
 			}
 			// allowSpaceId = [388];//模型有警告，需要看下
-			this.arrFrunList.forEach(signel => {
+			console.log("重新加载布局", arrFrunList,this.spaceList,this.gltfLayouts);
+			arrFrunList.forEach(signel => {
 				let spaceId = this.spaceList.find(it => it.layoutId == signel.id).spaceId;
 				if(allowSpaceId.includes(spaceId)){//只加载允许的空间的布局，其他不加载
 					let md = JSON.parse(signel.modelJson); //获取布局里面的模型信息
@@ -136,8 +135,7 @@ export default {
 				console.warn("***fliterList***",this.realList.length ,this.realList);
 				tmpList = this.realList;
 			}
-			let realFurArr = [];
-			realFurArr = this.preFurnitureData(tmpList);//统一处理家具模型
+			let realFurArr = this.preFurnitureData(tmpList);//统一处理家具模型
 			this.calculateLayoutModelSize() // 提前计算模型的位置
 			console.log("***realFurArr***", realFurArr,this.gltfLayouts);
 			realFurArr && realFurArr.forEach((item,index) => {
@@ -149,7 +147,7 @@ export default {
 			});
 			Promise.all(this.promise_list).then(() => {
 				let endTime = new Date().getTime();
-				console.log("家具模型全部加载完成，时间：", endTime - startTime);
+				console.log("家具模型全部加载完成，时间：", endTime - startTime, this.gltfLayouts);
 			})
 		},
 		//过滤掉不需要的家具
@@ -157,7 +155,6 @@ export default {
 			this.realList = [];
 			//找到直接的家具模型
 			list && list.forEach((mod)=>{
-				// this.realList.push(mod);
 				let name = mod.modelName.substring(0,mod.modelName.length-2);
 				if(globlShowModel.includes(name)){
 					this.realList.push(mod);
@@ -257,10 +254,6 @@ export default {
 							//realData 该模型被重复使用时的每一次的形变参数等
 							realData.list && realData.list.forEach((it,i)=>{
 								let gltfFurn = that.gltfLayouts.find(itme=>itme.uniId==it.uniId);//判断是否已经添加过
-								if(!gltfFurn){
-									return false;
-									// debugger
-								}
 								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);
@@ -317,6 +310,78 @@ export default {
 				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);
@@ -625,9 +690,68 @@ export default {
 	
 					// 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("模型计算位置", cubeInfo, centerX, centerY, spaceWidth, spaceHeight, modelWidth, modelHeight, spaceId, scaleX, scaleY, positionX, positionY)
+			// console.log("模型计算位置--", positionX, positionY)
+			console.log("模型计算位置", cubeInfo, centerX, centerY, spaceWidth, spaceHeight, modelWidth, modelHeight, spaceId, scaleX, scaleY, positionX, positionY)
 			let oldPosition = new THREE.Vector3();//当前几何体的位置参数
 			oldPosition.copy(cube.position);
 			cube.position.x = positionX / 100;
@@ -679,8 +803,9 @@ export default {
 						// 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.premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵
+						stratMatrix.multiply(scaleMatrix).premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵
 						instancedMesh.instanceMatrix.needsUpdate = true;//更新之前，必须开启开关
 						instancedMesh.setMatrixAt(curMeshIndex,stratMatrix);//更新几何体的世界矩阵
 					}
@@ -812,5 +937,118 @@ export default {
 	
 			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.furnHandle(this.changeLayouts);
+				})
+			})
+		},
+		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.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()
+		}
 	}
 }

src/pages/webgl_rxdz_customize/webgl_rxdz_customize.scss

@@ -251,11 +251,11 @@ page {
     }
 }
 .swiper-img-gs-mh {
-	width: 100vw;
-	// height: calc(100% - 930rem);
-	// top:930rem;
+	// width: 100vw;
+	// top:0rem;
+	height: calc(100% - 930rem);
+	top:930rem;
 	height: 100%;
-	top:0rem;
 	opacity: 0.85;
 	position: absolute;
 	left: 0;

src/pages/webgl_rxdz_customize/webgl_rxdz_customize.vue

@@ -37,7 +37,7 @@ export default {
                 shareToken: "",
                 pageName: this.pvCurPageName,
             },
-            houseId: config.houseIdHs,
+            houseId: $config.houseIdHs,
 
             shareUserId: null, // 分享者ID
             id: '6523d91af65c626211ee21c8',//方案库id
@@ -135,7 +135,7 @@ export default {
 			let userId = this.userId || '';
             let params = {
                 id: this.id,
-                brandId: config.brandId,
+                brandId: $config.brandId,
 				houseId:this.houseId,
 				userId,
             };

src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -454,7 +454,7 @@
 				let userId = this.userId || '';
 			    let params = {
 			        id: this.id,
-			        brandId: config.brandId,
+			        brandId: $config.brandId,
 					houseId:this.houseId,
 					userId,
 			    };