Browse Source

复用导致模型拉伸计算问题

caodongdong 1 year ago
parent
commit
4e4579af2e
2 changed files with 33 additions and 14 deletions
  1. 32 13
      src/mixins/loadModel.js
  2. 1 1
      src/pages/webgl_rxdz/webgl_rxdz.vue

+ 32 - 13
src/mixins/loadModel.js

@@ -139,7 +139,6 @@ export default {
 			}else{
 				this.calculateLayoutModelSize() // 提前计算模型的位置
 			}
-			
 			console.log("***realFurArr***", realFurArr,this.gltfLayouts);
 			realFurArr && realFurArr.forEach((item,index) => {
 				this.promise_list.push(
@@ -415,6 +414,7 @@ export default {
 			const spaceList = 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;
 				})
@@ -425,10 +425,14 @@ export default {
 				gltfLayoutModels.sort(function(a, b) {
 					return a.userData.level - b.userData.level
 				});
+
+				let newSpace = this.spaceList.find(item => {
+					return element.spaceId == item.spaceId;
+				})
 				// console.log("对应空间ID的模型数组", this.gltfLayouts, element.spaceId, gltfLayoutModels)
 				for (let j = 0; j < gltfLayoutModels.length; j++) {
 					const cube = gltfLayoutModels[j];
-					this.drawLayoutModel(element, cube);
+					this.drawLayoutModel(newSpace, cube);
 				}
 			}
 		},
@@ -654,12 +658,17 @@ export default {
 						positionX -= parseFloat(cubeInfo.marginRight) / 2;
 					}
 					// console.log("模型计算位置" , parseFloat(cubeInfo.rotation))
+					
+					console.log("模型计算位置--", spaceWidth, modelWidth, scaleX, cubeInfo)
 					// 计算缩放
 					if (parseFloat(cubeInfo.rotation) == 90 || parseFloat(cubeInfo.rotation) == -90) {
 						scaleX = spaceWidth / modelWidth;
 					} else {
 						scaleY = spaceWidth / modelWidth;
 					}
+
+					
+					console.log("模型计算位置--", spaceWidth, modelWidth, scaleX, cubeInfo)
 	
 				}
 	
@@ -683,6 +692,7 @@ export default {
 						scaleX = newModelHeight / modelHeight;
 					}
 					positionY = wallPositionY + newModelHeight / 2;
+					
 				}
 	
 				if (cubeInfo.isStepAsideBottom == 'true' && parseInt(cubeInfo.referenceModelTop) > 0) {
@@ -710,15 +720,18 @@ export default {
 				if (cubeInfo.isStepAsideLeft == 'true' && parseInt(cubeInfo.referenceModelRight) > 0) {
 					// console.log("左边拉伸")
 	
+					// 墙的位置
+					const wallPositionX = centerX - spaceWidth / 2 + (curSpace.spaceWallInfo.wallW ? 10 : 0) +
+						parseFloat(cubeInfo.marginLeft);
+					// 右边参照模型位置
 					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);
+						.modelWidth / 2 - parseFloat(cubeInfo.marginRight);
+					
 	
 					const newModelWidth = Math.abs(referenceModelPositionX - wallPositionX);
 					if (Math.abs(parseFloat(cubeInfo.rotation)) == 90) {
@@ -727,7 +740,7 @@ export default {
 						scaleY = newModelWidth / modelWidth;
 					}
 					positionX = wallPositionX + newModelWidth / 2;
-	
+					
 				}
 	
 				if (cubeInfo.isStepAsideRight == 'true' && parseInt(cubeInfo.referenceModelLeft) > 0) {
@@ -782,9 +795,9 @@ export default {
 					}
 					positionY = referenceModelBottomPositionY - newModelHeight / 2;
 				}
-			
 				if(parseInt(cubeInfo.referenceModelLeft) > 0 && parseInt(cubeInfo.referenceModelRight) > 0){
 			
+					console.log("模型计算位置--", cubeInfo.modelName, parseInt(cubeInfo.referenceModelLeft), parseInt(cubeInfo.referenceModelRight))
 					const referenceModelLeft = this.gltfLayouts.find(item => {
 						const layoutModelData = item.userData;
 						return layoutModelData.id == parseInt(cubeInfo.referenceModelLeft) && layoutModelData
@@ -810,6 +823,7 @@ export default {
 					}
 			
 					positionX = referenceModelRightPositionX - newModelWidth / 2;
+
 				}
 			
 			}
@@ -817,6 +831,8 @@ export default {
 			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);
+			let oldScale = new THREE.Vector3();//当前几何体的位置参数
+			oldScale.copy(cube.scale);
 			cube.position.x = positionX / 100;
 			cube.position.z = positionY / 100;
 			cube.rotation.y = rotationY;
@@ -835,19 +851,21 @@ export default {
 					if(cubeInfo.modelName=='BP_XSPACE_deng_01_C'){//灯光
 						this.lightHandle(cube)
 					}else{
-						this.updateInfo(cube,oldPosition,scaleX,scaleY);//实例化方法
+						this.updateInfo(cube,oldPosition,oldScale);//实例化方法
 					}
 				}
 			}else{
 				if(cubeInfo.modelName=='BP_XSPACE_deng_01_C'){//灯光
 					this.lightHandle(cube)
 				}else{
-					this.updateInfo(cube,oldPosition,scaleX,scaleY);//实例化方法
+					this.updateInfo(cube,oldPosition,oldScale);//实例化方法
 				}
 			}
 		},
 		//更新家具模型到页面中
-		updateInfo(cube,oldPosition,scaleX,scaleY){
+		updateInfo(cube,oldPosition,oldScale){
+			const ssss = cube.scale.x / oldScale.x
+			console.log("XXXXXXXXXXXXXXXXX", cube, oldPosition,oldScale, ssss)
 			let lay = this.gltfLayouts.find(it=>it.uniId==cube.uniId);
 			if(cube.instancedMeshIndexList && cube.instancedMeshIndexList.length>0){
 				cube.instancedMeshIndexList.forEach(item=>{
@@ -865,8 +883,9 @@ export default {
 						// instancedMesh.instanceMatrix.needsUpdate = true;//更新之前,必须开启开关
 						// instancedMesh.setMatrixAt(curMeshIndex,stratMatrix);//更新几何体的世界矩阵
 						// this.scene.add(instancedMesh);
+						
 					}else{//更新形变矩阵
-						scaleMatrix.makeScale(scaleX, 1, scaleY);	//获得缩放变化矩阵
+						scaleMatrix.makeScale(cube.scale.x / oldScale.x, 1, cube.scale.z/oldScale.z);	//获得缩放变化矩阵
 						panMatrix.makeTranslation(cube.position.x - oldPosition.x,0,cube.position.z - oldPosition.z);	//获得平移变化矩阵
 						stratMatrix.multiply(scaleMatrix).premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵
 						instancedMesh.instanceMatrix.needsUpdate = true;//更新之前,必须开启开关
@@ -1096,11 +1115,11 @@ export default {
 				return resolve()
 			}
 			console.log("找出最合适的布局", layoutObj)
-			console.log("更新空间的布局ID=", layoutObj.id)
+			console.log("更新空间的布局ID=", layoutObj.id, spaceObj.layoutId)
 		
 			// 合适的布局更现有布局相同
 			if(spaceObj.layoutId == layoutObj.id){
-				// this.calculateLayoutModelSizeBySpace(spaceObj) // 提前计算模型的位置
+				this.calculateLayoutModelSizeBySpace(spaceObj) // 提前计算模型的位置
 				// this.changeLayoutModelState(true); // 显示家具模型
 				return resolve()
 			}

+ 1 - 1
src/pages/webgl_rxdz/webgl_rxdz.vue

@@ -961,7 +961,7 @@
 					that.updataPageData();
 					that.overChange = false;
 					that.callBackFun && that.callBackFun(true);
-					that.calculateLayoutModelSize(); //重新计算家具位置
+					// that.calculateLayoutModelSize(); //重新计算家具位置
 					that.updateWallModels(); // 替换墙体模型
 					that.changeLayoutModel(); // 改变空间模型
 					that.changeLayoutModelState(true); // 显示家具模型