h5-webgl-program/src/mixins/loadModel.js

// 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()
		}
	}
}