优化

src/components/newBottomCom/viewCareful/viewCareful.vue

@@ -170,7 +170,7 @@
 					clkId: 'clk_2cmina_23080405', //点击ID
 					clkName: 'zoomin_clk', //点击前往的页面名称
 					clkParams: {
-						locusName: this.curHouseObj.houseType + "·" + this.$parent.$parent.fixedArea + " " + this.curHouseObj.note,
+						locusName: this.curHouseObj.houseType + "·" + webglCom.fixedArea + " " + this.curHouseObj.note,
 						locusValue:this.carefulList[index].name + "面积由" + parseFloat(item.area).toFixed(1)
 						+ "㎡调整为"+ value + "㎡",
 					}
@@ -187,7 +187,7 @@
 			},
 			selectSpace(item,index){
 				this.selectIndex = index;
-				webglCom.curSpaceSelect(item.spaceId);//向父页面通知空间被选中了
+				webglCom.curSpaceSelect(item.spaceId);//通知webgl通用组件，空间被选中了
 			},
 			//去往详情页面
 			// goRoam(){

src/components/newBottomCom/viewMask/viewMask.vue

@@ -273,7 +273,7 @@
 		methods:{
 			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
 			updataLable(){
-				let list = this.layoutList;
+				let list = this.arrFrunList;
 				this.datalist.forEach(lable=>{
 					if(lable.spaceType==15){
 						let layoutId = lable.layoutId;
@@ -297,7 +297,12 @@
 			},
 			//切换空间
 			changeSpace(item){
-				this.$parent.changeSpace(item.spaceId);
+				if(item.spaceId == this.spaceObj.spaceId){
+					return false
+				}
+				webglCom.changeSpace(item.spaceId);
+				this.spaceObj = item;
+				this.getAiBeautyFamily()
 				let param = {
 					type: 'CLK', //埋点类型
 					clkId: 'clk_2cmina_23080417', //点击ID
@@ -311,26 +316,8 @@
 				};
 				util.trackRequest(param);
 			},
-			//视角切换
-			switchActor(){
-				// this.$parent.clearHandle()
-				this.$emit('switchActor');
-				this.showAIImage = false;//隐藏AI结果集合-执行切换视角
-				let index = this.$parent.currentActor.userIndex;//当前视角的序号
-				let nextIndex = (index + 1) % this.$parent.actors.length;
-				let param = {
-					type: 'CLK', //埋点类型
-					clkId: 'clk_2cmina_23080417', //点击ID
-					clkName: 'changeangle_clk', //点击前往的页面名称
-					clkParams: {
-						locusName: "视角切换",
-						type:this.$parent.actors[nextIndex].actorEum
-					}
-				};
-				util.trackRequest(param);
-			},
+			
 			showOrHideWebGl(){
-				// this.$parent.clearHandle()
 				this.showAIImage = !this.showAIImage;
 				let param = {
 					type: 'CLK', //埋点类型
@@ -493,7 +480,6 @@
 			},
 			mynavigateFuc(e) {
 				if (e) {
-					// this.$parent.clearHandle();
 					let param = {
 						type: 'CLK', //埋点类型
 						clkId: 'clk_2cmina_23080408', //点击ID
@@ -558,22 +544,16 @@
 				this.aiFlag = true;
 				this.aiImage = "";//清空AI结果图
 				this.stopInterval();
-				// if(!this.showAIImage){
-					this.myloading = true;
-					this.loadingMsg = "启动中";
-				// }
-				
-				// this.inputBase64Url = await this.shottingAction(2);//开始截图-返回的是base64的数据
-				// this.startServer();
-				// let base64 = await this.$parent.shottingAction(2);//开始截图-返回的是base64
-				let shottingImg = await this.$parent.shottingAction();//开始截图-返回的是图片地址
+				this.myloading = true;
+				this.loadingMsg = "启动中";
+				let shottingImg = await webglCom.creatShotImg();//开始截图-返回的是图片地址
 				if(!shottingImg){
 					this.showToast("渲染失败，请重试");
 					return false;
 				}
 				// ?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg //阿里OSS
 				// "?imageMogr2/auto-orient/format/webp/blur/1x0/quality/75";//七牛云压缩图片
-				shottingImg += "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//压缩图片
+				// shottingImg += "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//压缩图片
 				this.shottingImg = shottingImg;
 				this.changeImg2Base64(this.shottingImg, false);
 				console.warn("***shottingImg***",this.shottingImg)
@@ -1034,9 +1014,9 @@
 			},
 			//空间数据整理
 			spaceAIHandle(){
-				let curHouseObj = this.$parent.curHouseObj;//当前户型数据对象
+				let curHouseObj = webglCom.curHouseObj;//当前户型数据对象
 				let aiImagesList = this.aiImagesList;//AI生成图数据对象
-				let wallList = this.$parent.wallList;//当前户型墙体数据列表对象
+				let wallList = webglCom.wallList;//当前户型墙体数据列表对象
 				let spaceList =  JSON.parse(curHouseObj.houseJson);
 				
 				//遍历当前户型下的每一个空间
@@ -1070,9 +1050,9 @@
 				console.warn("***shottingImg***",shottingImg);
 				let userId = this.userId ? this.userId : '';
 				let curLayoutStruct = JSON.parse(getStorage('curLayoutStruct')) ;//获取楼层的数据-户型数组
-				let curHouseObj = this.$parent.curHouseObj;//当前户型数据对象
-				let curHouseType = setStorage('curHouseType');//把楼层的数据存入缓存中
-				let curHouseName = setStorage('curHouseName');//把楼层的数据存入缓存中
+				let curHouseObj = webglCom.curHouseObj;//当前户型数据对象
+				let curHouseType = getStorage('curHouseType');//把楼层的数据存入缓存中
+				let curHouseName = getStorage('curHouseName');//把楼层的数据存入缓存中
 				let param = {
 					"brandId": $config.brandId,
 					"houseId": curHouseObj.houseId,
@@ -1083,7 +1063,7 @@
 					"curFloor":curHouseObj.houseFloor,
 					layoutStruct:[],
 				}
-				let wallList = this.$parent.wallList;//当前户型墙体数据列表对象
+				let wallList = webglCom.wallList;//当前户型墙体数据列表对象
 				//处理每一个楼层
 				curLayoutStruct.forEach((layoutStruct,index)=>{
 					let houseData = {
@@ -1157,6 +1137,8 @@
 						houseId:this.$route.query.houseId || this.$store.state.houseId,
 						id:res.single,
 					}
+					webglCom.saveState();//记录下当前的控制器状态
+					webglCom.showWebgl = false;//隐藏webgl
 					router.push({
 						name: "webgl_rxdz_customize",
 						query:data

src/components/newBottomCom/viewPlot/viewPlot.vue

@@ -183,14 +183,9 @@
 				util.trackRequest(param);
 				this.selectSpace.layoutId = plot.id;
 				this.unSelect = true;
-				this.$parent.$parent.userSelectPlot(plot,this.selectSpace);//告知页面，用户选择的布局id
+				webglCom.userSelectPlot(plot,this.selectSpace);//告知webgl组件，用户选择的布局id
 				this.lastTabIndex = this.tabIndex;
 			},
-			// callBack(type){
-			// 	console.warn("***callBack***",type)
-			// 	this.initData();
-			// 	this.$parent.$parent.callBackFun = null;//注销父页面的通知回调函数
-			// }
 		}
 	}
 </script>

src/components/newBottomCom/viewShell/viewShell.html

@@ -25,14 +25,14 @@
 		<div class="signscoll-block"></div>
 	</div> -->
 	<!-- 精细化视图 -->
-	<viewCareful ref="viewCareful" v-show="styleType==2" @curSpaceChange="curSpaceChange" :curHouseObj="houseObj"></viewCareful>
+	<viewCareful ref="viewCareful" v-show="styleType==2" @curSpaceChange="curSpaceChange" 
+	:curHouseObj="curHouseObj"></viewCareful>
 	<!-- 布局选择 -->
-	<viewPlot ref="viewPlot" v-show="styleType==3" @curSpaceChange="curSpaceChange"
-	:curHouseObj="houseObj"></viewPlot>
+	<viewPlot ref="viewPlot" v-show="styleType==3" :curHouseObj="curHouseObj"></viewPlot>
 	<!-- 底部按钮视图 -->
 	<viewlayout ref="viewlayout" @curSpaceChange="curSpaceChange" :styleType="styleType" 
-	:curHouseObj="houseObj" :houseList="houseList" @changeStyle="changeStyle"
-	@streamRecord="streamRecord" @streamRecordEnd="streamRecordEnd" @seedChange="seedChange"></viewlayout>
+	:curHouseObj="curHouseObj" @changeStyle="changeStyle"
+	@streamRecord="streamRecord" @streamRecordEnd="streamRecordEnd"></viewlayout>
 	<!-- nav视图 -->
 	<!-- <viewToolNav v-show="pageType==1 && (styleType==2 || styleType==3)" :seedItem="seedItem" @downCom="downScroll"></viewToolNav> -->
 	<!-- 风格选择视图 -->

src/components/newBottomCom/viewShell/viewShell.vue

@@ -41,17 +41,13 @@
 				type: [String, Number],
 				default: 1,
 			},
-			curHouseType: {//当前选中的户型类型
-				type: [String, Number],
-				default: '',
-			},
-			houseList: {//当前户型所有的户型详情，可以切换
-				type: Array,
+			selectHouse: {//当前选中的户型
+				type: Object,
 				default: () => {
-					return []
+					return null
 				}
 			},
-			houseObj: {//当前户型的具体详情
+			curHouseObj: {//当前户型的具体详情
 				type: Object,
 				default: () => {
 					return null
@@ -65,12 +61,11 @@
 			},
 		},
 		watch: {
-			curHouseType: {
+			selectHouse: {
 				handler(newVal) {
 					if (newVal) {
 						//户型大类发生了变更，此时需要更新楼层信息，并且重新选择具体的户型
-						console.warn("***curHouseType-change***",newVal)
-						this.initData()
+						this.initFloorData()
 					}
 				},
 			},
@@ -101,14 +96,6 @@
 					}
 				},
 			},
-			// houseObj: {
-			// 	handler(newVal) {
-			// 		if (newVal) {
-			// 			//户型大类发生了变更，此时需要更新楼层信息，并且重新选择具体的户型
-			// 			console.warn("***curHouseType-change***",newVal)
-			// 		}
-			// 	},
-			// },
 		},
 		components:{
 			viewlayout,
@@ -118,8 +105,7 @@
 		},
 		// mixins: [touchHandle],
 		async mounted() {
-			// await this.getCityHouseList();		
-			console.warn("***viewShell***",this.houseList)
+			console.warn("***viewShell***")
 		},
 		// 页面被展示时执行
 		onPageShow: function() {  
@@ -143,17 +129,9 @@
 				this.styleType = 2;//返回记录下的状态
 				this.selectSpace = null;
 			},
-			initData(){
-				let houseList = this.houseList;
-				// let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				// let curHouseType = currPage.curHouseType?currPage.curHouseType:houseList[0].spaceStructure;//获取当前页面选中的户型类型
-				let curHouseType = this.curHouseType || houseList[0].spaceStructure;//获取当前页面选中的户型类型
-				//获取当前选中的户型大类，从中提取楼层信息
-				let curData = houseList.find(item=>{
-					return item.spaceStructure == curHouseType;
-				})
+			initFloorData(){
 				this.floorList = [];
-				curData.layoutStruct && curData.layoutStruct.forEach(item=>{
+				this.selectHouse.layoutStruct && this.selectHouse.layoutStruct.forEach(item=>{
 					this.floorList.push(item);
 				})
 				console.warn("***floorList-init***",this.floorList)
@@ -197,12 +175,6 @@
 				util.trackRequest(param);
 				this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
 			},
-			//种子户型变更-户型大类变更
-			seedChange(item){
-				console.warn("***seedChange***",item)
-				this.seedItem = item;
-				this.$emit("curHouseTypeChange", item);//通知页面，户型大类发生了变更
-			},
 			//放大缩小
 			zoomInOut(){
 				if(this.styleType == 2){

src/components/newBottomCom/viewlayout/viewlayout.vue

@@ -46,12 +46,6 @@
 			}
 		},
 		props: {
-			houseList: {//当前户型所有的户型详情，可以切换
-				type: Array,
-				default: () => {
-					return []
-				}
-			},
 			curHouseObj: {//当前展示的户型
 				type: Object,
 				default: () => {
@@ -64,14 +58,6 @@
 			}
 		},
 		watch: {
-			houseList: {
-				handler(newVal) {
-					if (newVal) {
-						console.warn("***houseList-change***", newVal)
-						this.initData(newVal);
-					}
-				},
-			},
 			curHouseObj: {
 				handler(newVal,oldVal) {
 					if (newVal) {
@@ -157,49 +143,6 @@
 				})
 				console.warn("***viewlayout-init***", this.carefulList)
 			},
-			initData(houseList){
-				this.seedLayoutList = [];
-				houseList && houseList.forEach(item=>{
-					let data = {
-						spaceStructure: item.spaceStructure,
-						spaceName: item.spaceName,
-						set: false, //是否已经设置过
-					};
-					this.seedLayoutList.push(data);
-				})
-				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				// if(currPage.curHouseType){//获取当前页面选中的户型类型
-				// 	this.selectSeedId = currPage.curHouseType
-				// } else if(this.seedLayoutList && this.seedLayoutList[this.defaultIndex]){//默认选中第一个
-				// 	this.selectSeedId = this.seedLayoutList[this.defaultIndex].spaceStructure;
-				// }
-				this.selectSeedId = this.seedLayoutList[this.defaultIndex].spaceStructure;
-				let keyWord = this.$route.query.layer;
-				if(keyWord){//如果存在结构特征，则定位到该模型大类下
-					let item = this.seedLayoutList.find(it=>keyWord.includes(it.spaceName));
-					if(item){
-						this.selectSeedId = item.spaceStructure;
-					}
-				}
-				if(this.selectSeedId){
-					let item = this.seedLayoutList.find(it=>{
-						return it.spaceStructure == this.selectSeedId
-					})
-					this.$emit("seedChange", item);//通知父组件-当前已经选中了户型大类
-					let param = {
-						type: 'CLK', //埋点类型
-						clkId: 'clk_2cmina_23080402', //点击ID
-						clkName: 'seedroom_clk', //点击前往的页面名称
-						clkParams: {
-							type: item.spaceName,
-							locusValue: item.spaceStructure,
-							locusName: "切换种子户型",
-						}
-					};
-					// util.trackRequest(param);
-				}
-				console.warn("***curHouseType-init***",this.seedLayoutList)
-			},
 			//打开布局
 			openLayout(style) {
 				console.warn("***openLayout***",style)
@@ -230,11 +173,12 @@
 					clkName: 'AI_clk', //点击前往的页面名称
 					clkParams: {
 						locusName: "AI精软装",
-						carefulList:this.curSpaceId
+						curSpaceId:this.curSpaceId
 					}
 				};
 				util.trackRequest(param);
-				webglCom.goRoam1(this.curSpaceId);
+				// webglCom.goRoam1(this.curSpaceId);
+				this.$parent.$parent.goRoam1(this.curSpaceId);//向父页面通知空间被选中了
 			},
 			//获取录音权限
 			getRecordAuth: function() {

src/components/newQCCom/viewCareful/viewCareful.vue

@@ -21,23 +21,19 @@
 			}
 		},
 		props:{
-			overChange: {//当前页面是否处在忙碌状态
-				type: Boolean,
-				default: false,
-			},
-			curHouseObj: {//当前展示的户型
-				type: Object,
-				default: () => {
-					return null
-				}
-			},
+			// curHouseObj: {//当前展示的户型
+			// 	type: Object,
+			// 	default: () => {
+			// 		return null
+			// 	}
+			// },
 		},
 		watch: {
 			curHouseObj: {
 				handler(newVal,oldVal) {
 					if (newVal) {
 						console.warn("***curHouseObj-CHANGE-viewCareful***", newVal,oldVal)
-						if(!oldVal || (oldVal && oldVal.id != newVal.id)){
+						if(newVal){
 							this.initData();
 						}
 					}
@@ -58,6 +54,12 @@
 			curSpaceId() {
 				return this.$store.state.curSpaceId;
 			},
+			overChange() {
+				return this.$store.state.overChange;
+			},
+			curHouseObj() {
+				return this.$store.state.curHouseObj;
+			},
 		},
 		mixins: [],
 		async mounted() {//组件挂载时事件
@@ -116,9 +118,6 @@
 						})
 					}
 				})
-				// let result = this.carefulList.reduce((prev, cur)=>{
-				//     return prev + parseFloat(cur.area);
-				// },0);
 				this.carefulList.forEach(it=>{
 					if(!result){
 						it.percent = 100;
@@ -171,7 +170,7 @@
 					clkId: 'clk_2cmina_23080405', //点击ID
 					clkName: 'zoomin_clk', //点击前往的页面名称
 					clkParams: {
-						locusName: this.curHouseObj.houseType + "·" + this.$parent.$parent.fixedArea + " " + this.curHouseObj.note,
+						locusName: this.curHouseObj.houseType + "·" + webglCom.fixedArea + " " + this.curHouseObj.note,
 						locusValue:this.carefulList[index].name + "面积由" + parseFloat(item.area).toFixed(1)
 						+ "㎡调整为"+ value + "㎡",
 					}
@@ -183,11 +182,12 @@
 				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 				// this.sendMessageAction(JSON.stringify(parmas));
 				this.$parent.$parent.callBackFun = this.callBack;//向父页面注册通知回调函数
-				this.$emit("curSpaceChange",data);//通知父组件-空间面积变化
+				webglCom.curSpaceChange(data)
 			},
 			selectSpace(item,index){
 				this.selectIndex = index;
-				this.$parent.$parent.curSpaceSelect(item);//向父页面通知空间被选中了
+				// this.$parent.$parent.curSpaceSelect(item);//向父页面通知空间被选中了
+				webglCom.curSpaceSelect(item.spaceId);//向父页面通知空间被选中了
 			},
 			//去往详情页面
 			// goRoam(){

src/components/newQCCom/viewPlot/viewPlot.vue

@@ -31,10 +31,7 @@
 			}
 		},
 		props:{
-			overChange: {//当前页面是否处在忙碌状态
-				type: Boolean,
-				default: false,
-			},
+
 		},
 		watch: {
 			curSpaceId: {
@@ -59,7 +56,6 @@
 			this.spaceList = spaceList;
 			// this.initData();
 			// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-			// this.$parent.$parent.updateCareFul = this.initData;//页面注册变更方法
 		},
 		// 页面被展示时执行
 		onPageShow: function() {  
@@ -185,7 +181,7 @@
 				util.trackRequest(param);
 				this.selectSpace.layoutId = plot.id;
 				this.unSelect = true;
-				this.$parent.$parent.userSelectPlot(plot,this.selectSpace);//告知页面，用户选择的布局id
+				webglCom.userSelectPlot(plot,this.selectSpace);//告知webgl组件，用户选择的布局id
 				this.lastTabIndex = this.tabIndex;
 			},
 		}

src/components/newQCCom/viewShell/viewShell.html

@@ -25,15 +25,12 @@
 		<div class="signscoll-block"></div>
 	</div>
 	<!-- 精细化视图 -->
-	<viewCareful ref="viewCareful" v-show="styleType==2" @curSpaceChange="curSpaceChange" 
-	:overChange="overChange" :curHouseObj="houseObj"></viewCareful>
+	<viewCareful ref="viewCareful" v-show="styleType==2" :curHouseObj="curHouseObj"></viewCareful>
 	<!-- 布局选择 -->
-	<viewPlot ref="viewPlot" v-show="styleType==3" @curSpaceChange="curSpaceChange"
-	:overChange="overChange" :curHouseObj="houseObj"></viewPlot>
+	<viewPlot ref="viewPlot" v-show="styleType==3" :curHouseObj="curHouseObj"></viewPlot>
 	<!-- 种子户型视图 -->
-	<viewlayout ref="viewlayout" @curSpaceChange="curSpaceChange" :styleType="styleType" 
-	:overChange="overChange" :curHouseObj="houseObj" @changeStyle="changeStyle"
-	@streamRecord="streamRecord" @streamRecordEnd="streamRecordEnd"></viewlayout>
+	<viewlayout ref="viewlayout" :styleType="styleType" 
+	 :curHouseObj="curHouseObj" @changeStyle="changeStyle"></viewlayout>
 	<!-- nav视图 -->
 	<!-- <viewToolNav v-show="pageType==1 && (styleType==2 || styleType==3)" :seedItem="seedItem" @downCom="downScroll"></viewToolNav> -->
 	<!-- 风格选择视图 -->

src/components/newQCCom/viewShell/viewShell.vue

@@ -41,10 +41,6 @@
 			}
 		},
 		props:{
-			overChange: {//当前选中的户型类型
-				type: Boolean,
-				default: false,
-			},
 			pageType: {//当前组件所在的页面类型-决定了使用哪些子组件和样式
 				type: [String, Number],
 				default: 1,
@@ -53,7 +49,7 @@
 			// 	type: [String, Number],
 			// 	default: '',
 			// },
-			houseObj: {//当前户型的具体详情
+			curHouseObj: {//当前户型的具体详情
 				type: Object,
 				default: () => {
 					return null
@@ -96,21 +92,13 @@
 							_endHeight = 600;
 						}
 						// let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-						if(this.$parent && this.$parent.hasOwnProperty('canvasHeight')){
-							this.$parent.gradientResize(1,_starHeight,_endHeight)
+						if(webglCom && webglCom.hasOwnProperty('canvasHeight')){
+							webglCom.gradientResize(1,_starHeight,_endHeight);
+							webglCom.styleType = newVal;//变更为展开状态
 						}
-						this.$parent.styleType = newVal;//变更为展开状态
 					}
 				},
 			},
-			// houseObj: {
-			// 	handler(newVal) {
-			// 		if (newVal) {
-			// 			//户型大类发生了变更，此时需要更新楼层信息，并且重新选择具体的户型
-			// 			console.warn("***curHouseType-change***",newVal)
-			// 		}
-			// 	},
-			// },
 		},
 		components:{
 			viewlayout,
@@ -200,9 +188,6 @@
 					this.styleType = 2;//变更为展开状态
 				}
 			},
-			curSpaceChange(data){
-				this.$emit("curSpaceChange", data);
-			},
 			//点击-不是手势动作
 			upScrollOrDown(){
 				if(this.pageType!=1){//只有1才起作用

src/components/newQCCom/viewlayout/viewlayout.vue

@@ -58,10 +58,6 @@
 					return null
 				}
 			},
-			overChange: {//当前选中的户型类型
-				type: Boolean,
-				default: false,
-			},
 			styleType:{
 				type: [String, Number],
 				default: '',

src/components/webglCom/webglCom.html

@@ -1,5 +1,5 @@
 <!-- webgl的视图页面 -->
-<div class="webgl-view">
+<div class="webgl-view" :class="showWebgl?'show':'hide'">
 	<!-- 户型面积相关视图 -->
 	<div class="area-view" v-if="showArea">
 		<div>总面积：{{layoutArea}}<span style="font-weight: 700;">㎡</span></div>

src/components/webglCom/webglCom.scss

@@ -45,13 +45,20 @@ canvas:focus {
 	outline:none;
 }
 .webgl-view{
-	position: absolute;
+	// position: absolute;
+	position: fixed;
 	top: 0px;
 	left: 0px;
 	width: 100%;
 	height: 100vh;
 	// z-index: 1;
 }
+.show{
+	visibility:visible;
+}
+.hide{
+	visibility:hidden;
+}
 // 空间悬浮说明
 .word-view{
 	position: absolute; 

src/components/webglCom/webglCom.vue

@@ -57,15 +57,17 @@
 				camera:null,
 				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
 				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
+				canvas:null,		//webgl的画布对象
+				lastCanvasHeight:200,
 				canvasHeight:200,	//canvas视图的高度-计算得出
 				chooseMesh:null,	//标记鼠标拾取到的空间模型对象-webgl几何体mesh
 				instancedMeshList: [],	// webgl墙体模型的实例化数组对象-相同mesh只会实例化一个
 				instancedSpaceMeshList: [],// webgl空间模型的实例化数组对象-相同mesh只会实例化一个
 				
 				curLayoutStruct:null,//当前户型大类下所有楼层数据-户型存在多层结构时使用
-				houseList:[],		//当前项目下所有户型数据(以户型类型分组)-户型存在多层结构时使用
-				curHouseType: null,	//当前选中的户型类型-户型存在多层结构时使用 数字 1、2、3等区分
-				curHouseName:'',	//当前选中的户型类型名称-户型存在多层结构时使用 例如：大平层、大庭院
+				// houseList:[],		//当前项目下所有户型数据(以户型类型分组)-户型存在多层结构时使用
+				// curHouseType: null,	//当前选中的户型类型-户型存在多层结构时使用 数字 1、2、3等区分
+				// curHouseName:'',	//当前选中的户型类型名称-户型存在多层结构时使用 例如：大平层、大庭院
 				curHouseFloor: null,//当前选中的户型楼层数-户型存在多层结构时使用 1F等
 				curHouseObj: null,	//当前选中的户型具体楼层的数据对象-户型存在多层结构时使用
 				
@@ -87,8 +89,9 @@
 				layoutArea:0,	//总面积
 				houseId:'',
 				
-				showArea:false,	//显示面积
+				showArea:true,	//显示面积
 				circleGroup:null,//圆形地标
+				showWebgl:true,
 			}
 		},
 		props: {
@@ -111,13 +114,17 @@
 			},
 		},
 		async mounted() {
-			// await this.getCityHouseList();		
-			console.warn("***webglCom***",this.$route.query);
+			console.warn("***webglCom***",this.$route.query,this.$route.name);
+			if(this.$route.name=="webgl_rxdz" || this.$route.name=="webgl_rxdz_roam" || this.$route.name=="webgl_rxdz_look"
+			 || this.$route.name=="webgl_rxdz_test" || this.$route.name=="webgl_rxdz_test_roam" || this.$route.name=="webgl_rxdz_test_look"){//去往其他页面
+				this.showWebgl = true;//隐藏webgl
+			}else{
+				this.showWebgl = false;//隐藏webgl
+			}
 			var that = this;
 			let isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 			this.isIOS = isIOS;
 			this.houseId = this.$store.state.houseId || '';
-			this.childLayout = this.$route.query.childLayout || 0;//4-测试户型
 			let screenWidth = window.screen.width;
 			let screenHeight = window.screen.height;
 			if(window.innerWidth && window.screen.width){
@@ -128,6 +135,7 @@
 			}
 			let unit = screenWidth / 750;//单位rpm 对应 px 的值
 			this.canvasHeight = screenHeight - (200 * unit) + (20 * unit);
+			this.lastCanvasHeight = this.canvasHeight;
 			let container = that.$refs.webgl;
 			let canvas3d = that.canvas = that.$refs.glcanvas;
 			
@@ -145,11 +153,12 @@
 			//空间漫游时变量
 			let onPointerDownMouseX = 0, onPointerDownMouseY = 0,lon = 0,startTime = 0,boundary=null;
 			let light = null;//平行光的
+			// let lastPosition = null;
 			this.progress = 1;
 			this.clearEvent = clearEvent;
 			this.attendEvent = attendEvent;
 			this.updateLables = updateLables;
-			this.enableRenderHandle = enableRender;
+			// this.enableRenderHandle = enableRender;
 			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
 			this.gradientResize = gradientResize;
 			this.moveMeshCenterHandle = moveMeshCenterHandle;
@@ -157,11 +166,13 @@
 			this.stopRender = stopRender;//对外暴露停止渲染的方法
 			this.cameraInit = cameraInit;
 			this.resetControl = resetControl;
+			this.setHeight = setHeight;
 			
 			this.enterRoom = enterRoom;
 			this.leaveRoom = leaveRoom;
 			this.positionCamer = positionCamer;
-			this.getInitData();//请求获取页面模型数据等
+			this.saveState = saveState;
+			this.reset = reset;
 			init();
 			function init(){
 				scene.background = new THREE.Color("#FFFFFF");
@@ -174,13 +185,6 @@
 				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
 				scene.add(camera);
 				that.camera = camera;
-				// 辅助方格
-				// const axesHelper = new THREE.AxesHelper( 50 );
-				// scene.add( axesHelper );
-				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
-				// gridHelper.position.y = 0;
-				// gridHelper.position.x = 0;
-				// scene.add(gridHelper);
 				
 				// 环境光会均匀的照亮场景中的所有物体
 				const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3);
@@ -200,11 +204,6 @@
 					light.shadow.mapSize.height = 8192; // 影响阴影的清晰度
 				}
 				scene.add(light);
-				// const helper = new THREE.CameraHelper( light.shadow.camera );
-				// scene.add(helper);
-				// 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
-				// const pointLight = new THREE.PointLight( 0xffffff, 0.3 );
-				// camera.add( pointLight );
 				
 				//antialias 这个值得设置为false，不然IOS上截图会失效
 				renderer = that.renderer = new THREE.WebGLRenderer({ 
@@ -246,6 +245,22 @@
 				cameraInit();	//初始化摄像头
 				controls.saveState();//保存当前控制器的状态
 			}
+			function saveState(){
+				controls.saveState();//保存当前控制器的状态
+			}
+			function reset(){
+				controls.reset();//保存当前控制器的状态
+			}
+			//添加状态位置
+			function addStatus(name){
+				let position = new THREE.Vector3();
+				position.copy(camera.position);
+				let _data = {
+					name:name,
+					position:position,
+				}
+				// webglStatus
+			}
 			//初始化相机位置
 			function cameraInit(){
 				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
@@ -264,8 +279,19 @@
 			function attendEvent () {
 				window.addEventListener('resize', onWindowResize);
 			}
+			function setHeight(height){
+				that.canvasHeight = height;//变更canvas的高度
+				camera.aspect = screenWidth / that.canvasHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize(screenWidth, that.canvasHeight);
+			}
 			function enterRoom(){
 				// 监听相机移动事件-限制只能在当前空间范围内移动
+				that.lastCanvasHeight = that.canvasHeight;//记录下当前的canvas的高度
+				that.canvasHeight = screenHeight - (600 * unit) + (40 * unit);//变更canvas的高度
+				camera.aspect = screenWidth / that.canvasHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize(screenWidth, that.canvasHeight);
 				raycaster = new THREE.Raycaster();
 				controls.addEventListener('change', onControlChange,false);
 				renderer && renderer.domElement && renderer.domElement.addEventListener('touchstart', onPointerStart, false);
@@ -274,6 +300,10 @@
 			function leaveRoom(){//取消监听的事件
 				raycaster = null;
 				that.circleGroup = null;
+				that.canvasHeight = that.lastCanvasHeight;//还原回去之前的高度
+				camera.aspect = screenWidth / that.canvasHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize(screenWidth, that.canvasHeight);
 				controls.removeEventListener('change', onControlChange,false);
 				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart, false);
 				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp, false);
@@ -372,8 +402,8 @@
 				tweenCameraAnma = value
 			}
 			//开启渲染-帧率优化，不触发时停止渲染
-			function enableRender() {
-			}
+			// function enableRender() {
+			// }
 			//取消事件监听-避免二次进入时触发多次事件
 			function clearEvent(){
 				console.warn("**clearEvent****")
@@ -789,7 +819,7 @@
 		},
 		// 页面被展示时执行
 		onPageShow: function() {
-
+			console.warn("***onPageShow-webglCom***")
 		},
 		//页面被隐藏时执行
 		onPageHide: function() {
@@ -799,27 +829,16 @@
 			positionCamer(){},
 			//户型大类发生了变更-针对多层户型
 			curHouseTypeChange(item){
-				this.curHouseType = item.spaceStructure;//当前选中的户型类型-传递给子组件触发具体的户型数据选取
-				this.curHouseName = item.spaceName;//当前选中的户型类型名称
-				setStorage('curHouseType', this.curHouseType);//把楼层的数据存入缓存中
-				setStorage('curHouseName', this.curHouseName);//把楼层的数据存入缓存中
-				this.$store.dispatch('setCurHouseType', this.curHouseType);
 				//获取当前户型大类下的所有户型信息-用于用户提交
-				this.curLayoutStruct = this.houseList.find(it=>it.spaceStructure == this.curHouseType).layoutStruct;
+				this.curLayoutStruct = item.layoutStruct;
 				this.curLayoutStruct.forEach(it=>{
 					this.layoutArea += it.houseArea
 				})
 				setStorage('curLayoutStruct', this.curLayoutStruct);//把楼层的数据存入缓存中
 				console.warn("***curLayoutStruct***",this.curLayoutStruct)
 			},
-			//户型楼层发生了变更-针对多层户型
-			curHouseFloorChange(item){
+			clearWebGl(){
 				let that = this;
-				this.curHouseFloor = item.houseFloor;//当前选中的户型楼层
-				this.curHouseObj = item;//更新当前具体的户型数据
-				this.$store.dispatch('setCurHouseObj', this.curHouseObj);
-				this.id = this.curHouseObj.id;
-				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
 				let deleList = that.scene && that.scene.children.filter(object=>{
 					if(object.userType=="mesh" || object.userType=="layoutMesh"){
 						return object
@@ -830,38 +849,19 @@
 					that.showLables = false;//隐藏lable
 					that.scene.remove(...deleList);
 				}
-				this.houseInit();
 			},
-			//通过接口请求户型数据-多户型（每个户型可能存在多个楼层的数据）
-			async getInitData(){
-				let parmas = {
-					childLayout:this.childLayout || 0,
-					houseId:this.houseId,
-				}
-				const res = await requestConfig('getHouseTypeSpaceDetailsV2', parmas, true);
-				if (res.success && res.list) {
-					let list = res.list || [];
-					list && list.forEach((single,index)=>{
-						single.layoutStruct.forEach((item)=>{
-							if(item.houseJson){
-								let spaceList = JSON.parse(item.houseJson);
-								// 交换centerX， centerY
-								for (let index = 0; index < spaceList.length; index++) {
-								    var element = spaceList[index];
-								    const {centerX, centerY} = element;
-								    element.centerX = centerY;
-								    element.centerY = centerX;
-								}
-								item.houseJson = JSON.stringify(spaceList);
-							}
-						})
-					})
-					console.log("户型详情列表-接口原始数据: ", list);
-					this.houseList = list;//数据会同步到组件中-进而反馈更新页面数据
-					this.$store.dispatch('setHouseList', list);
-				}
+			//户型楼层发生了变更-针对多层户型
+			curHouseFloorChange(item){
+				let that = this;
+				this.curHouseFloor = item.houseFloor || 1;//当前选中的户型楼层
+				this.curHouseObj = item;//更新当前具体的户型数据
+				this.$store.dispatch('setCurHouseObj', this.curHouseObj);
+				// this.id = this.curHouseObj.id;
+				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+				this.clearWebGl();
+				this.houseInit();
 			},
-			//当前户型初始化
+			//绘制并且渲染当前户型-初始化
 			houseInit(){
 				this.gltfWalls = [];
 				this.gltfSpaces = [];
@@ -880,11 +880,12 @@
 				}, 100);
 				console.warn("***curHouseObj***",this.curHouseObj,this.aiData)
 				// this.navbar.title = this.curHouseObj.name + "  " + this.curHouseObj.houseArea + "㎡";
-				// this.navbar.title = "空间定制";
-				document.title = '空间定制';
+				if(window.currentPage && window.currentPage.navbar && window.currentPage.pvCurPageName=='home_show'){
+					window.currentPage.navbar.title = "空间定制";
+					document.title = '空间定制';
+				}
 				this.sumArea = this.curHouseObj.houseArea;
 				this.fixedArea = this.curHouseObj.houseArea;
-				this.curHouseName = this.curHouseObj.name;
 				if(this.curHouseObj.houseArea<=100){//面积小于100平米，则摄像头靠近一点
 					this.cameraStarPosition.y = 20;
 				}else if(this.curHouseObj.houseArea>100){
@@ -905,7 +906,7 @@
 				let type=[];
 			    if(this.curHouseObj){
 			        const spaceDetail = this.curHouseObj;
-			        const spaceList = JSON.parse(spaceDetail.houseJson);
+			        const spaceList = typeof(spaceDetail.houseJson)=="string" ? JSON.parse(spaceDetail.houseJson) : spaceDetail.houseJson;
 			        // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
 			        for (let index = 0; index < spaceList.length; index++) {
 			            var element = spaceList[index];
@@ -924,8 +925,15 @@
 			    }
 			    console.log("该户型空间数据:", this.spaceList, this.layoutIds,type);
 			    console.log("当前选中的空间:", this.curSpaceObj,this.curHouseObj);
+				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
+				let title =  this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
+				if(window.currentPage && window.currentPage.navbar && window.currentPage.pvCurPageName=='room_show'){
+					window.currentPage.navbar.title = title;
+					document.title = title;
+				}
 				this.spaceListBackup = JSON.parse(JSON.stringify(this.spaceList));
 				this.$store.state.curSpaceId = this.curSpaceObj.spaceId;
+				this.currentChangeSpaceId = this.curSpaceObj.spaceId;
 				this.loaderSpaceArr(this.spaceList);
 			    // 绘制墙体
 			    this.getHouseTypeSpaceWalls();
@@ -1001,14 +1009,18 @@
 				let str = JSON.stringify(this.spaceList)
 				//更新当前空间对象
 				this.curHouseObj.houseJson = str;
-				//更新提交的数据
-				let layoutStruct = this.curLayoutStruct.find(it=>{
-					return it.houseFloor == this.curHouseFloor
-				})
-				layoutStruct.houseJson = str;
-				setStorage('curLayoutStruct', this.curLayoutStruct);//把楼层的数据存入缓存中
+				this.$store.dispatch('setCurHouseObj', this.curHouseObj);//更新当前户型数据(单层)
+				if(this.curLayoutStruct){				//更新提交的数据
+					let layoutStruct = this.curLayoutStruct.find(it=>{
+						return it.houseFloor == this.curHouseFloor
+					})
+					if(layoutStruct){
+						layoutStruct.houseJson = str;
+					}
+					setStorage('curLayoutStruct', this.curLayoutStruct);//把楼层的数据存入缓存中
+				}
 				this.currentChangeSpaceId = null;//变化结束后
-				console.warn("***curLayoutStruct-updataPageData***",this.changeArea,this.sumArea,this.curHouseFloor,this.curHouseObj,layoutStruct)
+				console.warn("***curLayoutStruct-updataPageData***",this.changeArea,this.sumArea,this.curHouseFloor,this.curHouseObj)
 			},
 			// 添加文字标签
 			addWordLabel(){
@@ -1044,6 +1056,24 @@
 				this.showLables = true;
 				// this.updateLables();//更新lable
 			},
+			//AI生成页面切换空间
+			changeSpace(spaceId){
+				console.warn("***changeSpace***",spaceId,this.curSpaceObj.spaceId)
+				if(spaceId == this.curSpaceObj.spaceId){
+					return false;
+				}
+				this.curSpaceObj = this.spaceList.find(it=>it.spaceId == spaceId);
+				if(this.isIOS){
+					this.furnSingleSpaceHandle(this.curSpaceObj);
+				}
+				this.positionCamer(this.curSpaceObj,true);
+				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
+				let title =  this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
+				if(window.currentPage && window.currentPage.navbar && window.currentPage.pvCurPageName=='room_show'){
+					window.currentPage.navbar.title = title;
+					document.title = title;
+				}
+			},
 			//用户手动点击空间名称
 			selectSpaceHandle(gltf){
 				if(gltf.spaceType==13){//楼梯不处理
@@ -1112,62 +1142,12 @@
 					this.moveMeshCenterHandle(obj,type);
 				}
 			},
-			hushangHandle(param){
-				let expand = {};
-				expand.landImg = this.$route.query.landImg || '';
-				expand.baseImg = this.$route.query.baseImg || '';
-				expand.bgPrototypeImg = this.$route.query.bgPrototypeImg || '';
-				expand.landNo = this.$route.query.landNo || '';//地块
-				expand.landArea = this.$route.query.landArea || '';//地块面积
-				expand.buildingAreaPreference = this.$route.query.buildingAreaPreference || '';//建筑面积
-				expand.layer = this.$route.query.layer || '大平层';//层数
-				expand.structureName = this.$route.query.structureName || '';//结构-L形等
-				expand.landDescription = this.$route.query.landDescription || '';//地形地势
-				expand.scenery = this.$route.query.scenery || '';//景观
-				expand.structureDescription = this.$route.query.structureDescription || '';//空间特质-结构
-				setStorage('expand', expand);//把空间选择的数据存入本地缓存里面，方便后续使用
-				return JSON.stringify(expand);
-			},
-			async goRoam1(spaceId){
-				let gltf = this.lableItem.find(it=>it.spaceId==spaceId);
-				console.warn("**goRoam1***",gltf)
-				let shottingImg = await this.shottingAction() + "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//开始截图
-				console.warn("***shottingImg***",shottingImg);
-				setStorage('shottingImg', shottingImg);//把空间选择的数据存入本地缓存里面，方便后续使用
-				this.hushangHandle()
-				if(gltf){
-					this.goRoam(gltf)
-				}
-			},
-			//物体漫游-切换页面的方式进入
-			goRoam(gltf){
-				// console.log('是否漫游',this.isManyou ? '漫游' : '俯视',isManyou,this.repeatFlag);
-				if(gltf.spaceType==13){//楼梯不能跳转
-					return false
-				}
-				let spaceId = gltf.spaceId;//具体的空间Id
-				let data = {
-					spaceId:spaceId,
-					houseId:this.houseId,
-				}
-				if(this.repeatFlag){
-					return false;
-				}
-				this.repeatFlag = true;
-				router.push({
-					name: "webgl_rxdz_roam",
-					query:data
-				});
-				if(this.isIOS){
-					setStorage('curHouseObj', this.curHouseObj);
-					setStorage('wallList', this.wallList);
-				}
-				this.$store.dispatch('setCurHouseObj', this.curHouseObj);
-				this.$store.dispatch('setWallList', this.wallList);
-				setTimeout(()=> {
-					this.repeatFlag = false;
-					this.spaceEnter();
-				}, 1000);
+			//截取webgl图
+			async creatShotImg(){
+				return new Promise(async (resolve) => {
+					let shottingImg = await this.shottingAction() + "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//开始截图
+					resolve(shottingImg)
+				})
 			},
 			//进入具体空间时的处理
 			spaceEnter(){
@@ -1178,6 +1158,18 @@
 				}
 				this.enterRoom();
 				this.positionCamer(this.curSpaceObj);
+				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
+				let title =  this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
+				if(window.currentPage && window.currentPage.navbar){
+					window.currentPage.navbar.title = title;
+					document.title = title;
+				}
+			},
+			//离开具体空间时的处理
+			spaceLeave(){
+				this.showArea = true;
+				this.showLables = true;
+				this.leaveRoom();
 			}
 		}
 	}

src/mixins/commonPageMethod.js

@@ -11,8 +11,8 @@ export default {
 			window.removeEventListener('beforeunload', this.pvCloseHandle);
 			window.removeEventListener('visibilitychange', this.visibilitychange);
 			window.currentPage = this;
-			if(this.starRender && typeof(this.starRender)==='function'){
-				this.starRender()
+			if(window.webglCom && window.webglCom.starRender && typeof(window.webglCom.starRender)==='function'){
+				window.webglCom.starRender()
 			}
 			let param = {
 				type: 'PV',
@@ -24,6 +24,19 @@ export default {
 			window.addEventListener('beforeunload', this.pvCloseHandle);
 			window.addEventListener('visibilitychange', this.visibilitychange);
 		}
+		if(this.$route.name=="webgl_rxdz" || this.$route.name=="webgl_rxdz_roam" || this.$route.name=="webgl_rxdz_look"
+		 || this.$route.name=="webgl_rxdz_test" || this.$route.name=="webgl_rxdz_test_roam" || this.$route.name=="webgl_rxdz_test_look"){//去往其他页面
+			if(window.webglCom){
+				window.webglCom.showWebgl = true;//显示webgl
+				mapVue.$forceUpdate()
+			}
+		}else{
+			if(window.webglCom){
+				window.webglCom.showWebgl = false;//隐藏webgl
+				mapVue.$forceUpdate()
+			}
+		}
+		
 	},
 	//页面销毁时，注销监听程序|返回上一页，去往下一页等
 	destroyed(){
@@ -51,15 +64,45 @@ export default {
 		// 在离开当前路由前执行的方法
 		// 例如保存表单数据、清理定时器等操作
 		this.pvCloseHandle();
-		if(this.stopRender && typeof(this.stopRender)==='function'){
-			this.stopRender();//停止webgl的渲染
+		if(window.webglCom && window.webglCom.stopRender && typeof(window.webglCom.stopRender)==='function'){
+			window.webglCom.stopRender();
+			if(from.name=="webgl_rxdz_roam"){//离开具体的空间详情页面，则需要先注销限制条件
+				window.webglCom.spaceLeave();
+			}
+			if(to.name=="webgl_rxdz" || to.name=="webgl_rxdz_roam" || to.name=="webgl_rxdz_look"
+			 || to.name=="webgl_rxdz_test" || to.name=="webgl_rxdz_test_roam" || to.name=="webgl_rxdz_test_look"){//去往其他页面
+				webglCom.showWebgl = true;//显示webgl
+				mapVue.$forceUpdate()
+			}else{
+				webglCom.showWebgl = false;//隐藏webgl
+				mapVue.$forceUpdate()
+			}
 		}
+		
 		window.removeEventListener('beforeunload', this.pvCloseHandle);//注销监听刷新事件
 		window.removeEventListener('visibilitychange', this.visibilitychange);
 		next();
 	},
 	beforeRouteEnter(to, from, next) {
 		console.warn("router:beforeRouteEnter:",to.name,to);
+		if(window.webglCom && window.webglCom.reset && typeof(window.webglCom.reset)==='function'){
+			if(to.name=="webgl_rxdz" && from.name=="webgl_rxdz_roam"){//返回
+				window.webglCom.reset()
+			}
+			if(to.name=="webgl_rxdz_roam" && from.name=="webgl_rxdz_customize"){//从作品页返回空间详情页面
+				window.webglCom.spaceEnter()
+				window.webglCom.reset()
+			}
+			if(to.name=="webgl_rxdz" || to.name=="webgl_rxdz_roam" || to.name=="webgl_rxdz_look"
+			 || to.name=="webgl_rxdz_test" || to.name=="webgl_rxdz_test_roam" || to.name=="webgl_rxdz_test_look"){//去往其他页面
+				webglCom.showWebgl = true;//显示webgl
+				mapVue.$forceUpdate()
+			}else{
+				webglCom.showWebgl = false;//隐藏webgl
+				mapVue.$forceUpdate()
+			}
+		}
+		
 		next();
 	},
 	activated(){
@@ -68,8 +111,8 @@ export default {
 			window.removeEventListener('beforeunload', this.pvCloseHandle);
 			window.removeEventListener('visibilitychange', this.visibilitychange);
 			window.currentPage = this;
-			if(this.starRender && typeof(this.starRender)==='function'){
-				this.starRender()
+			if(window.webglCom && window.webglCom.starRender && typeof(window.webglCom.starRender)==='function'){
+				window.webglCom.starRender()
 			}
 			let param = {
 				type: 'PV',
@@ -86,13 +129,13 @@ export default {
 		visibilitychange(){
 			console.warn("visibilitychange");
 			if (document.visibilityState !== 'visible') { // 离开页面
-				if(this.stopRender && typeof(this.stopRender)==='function'){
-					this.stopRender();//停止webgl的渲染
+				if(window.webglCom && window.webglCom.stopRender && typeof(window.webglCom.stopRender)==='function'){
+					window.webglCom.stopRender()
 				}
 				this.pvCloseHandle()
 			} else { // 进入页面
-				if(this.starRender && typeof(this.starRender)==='function'){
-					this.starRender();//开始webgl的渲染
+				if(window.webglCom && window.webglCom.starRender && typeof(window.webglCom.starRender)==='function'){
+					window.webglCom.starRender()
 				}
 				this.pvShowHandle()
 			}

src/mixins/floorMethod.js

@@ -416,7 +416,7 @@ export default {
 				this.calculateLayoutModelSize();//重新计算家具位置
 				this.updateLables();//更新lable
 				this.$nextTick(()=>{
-					this.updateCareFul();//更新精细调整里面的空间
+					this.updateCareFul && this.updateCareFul();//更新精细调整里面的空间
 					this.updateSpanceData();//更新语音组件里面的空间
 				})
 			}, 100);

src/pages/webgl_rxdz/webgl_rxdz.html

@@ -22,8 +22,6 @@
 	</canvas> -->
 	<!-- 主要操作视图 -->
 	<viewShell ref="viewShell" pageType="1" 
-	:houseList="houseList" 
-	:houseObj="curHouseObj" :curHouseType="curHouseType" 
-	@curHouseTypeChange="curHouseTypeChange" 
+	:selectHouse="selectHouse" :curHouseObj="curHouseObj" 
 	@curHouseFloorChange="curHouseFloorChange"></viewShell>
 </div>

src/pages/webgl_rxdz_look/webgl_rxdz_look - 副本.vue

@@ -0,0 +1,692 @@
+<template src="./webgl_rxdz_look.html">
+
+</template>
+<script>
+	import * as THREE from 'three';
+	import Stats from 'three/addons/libs/stats.module.js';
+	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+	import spaceTypes from '@/static/spaceTypesIE.js';
+	import TWEEN from 'three/addons/libs/tween.module.js';
+
+	var requestId = "";
+    const util = require('@/utils/util.js');
+    const config = require('@/services/urlConfig.js');
+	import loadModel from '@/mixins/loadModel.js';
+	import wallMethod from '@/mixins/wallMethod.js';
+	import floorMethod from '@/mixins/floorMethod.js';
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+    // const app = getApp(); //获取应用实例
+    export default {
+		mixins:[loadModel,floorMethod,wallMethod,commonPageMethod],
+        /**
+         * 页面的初始数据
+         */
+        data() {
+            return {
+				pvCurPageName: "webgl_rxdz_look",
+				pvCurPageParams: null,
+				locusBehaviorName: "查看页面",
+                houseId: "",
+				pvId: 'p_2cmina_23080404',
+				navbar: {
+				    showCapsule: 1,
+				    title: '查看户型',
+				    titleColor: '#fff',
+				    navPadding: 0,
+				    navPaddingBg:'transparent',
+				    navBarColor: 'transparent',
+				    navBackColor: 'transparent',
+				    haveCallback: true, // 如果是 true 会接手 navbarBackClk
+				    fromShare: false,
+				    fromProject: 0,
+				    shareToken: "",
+				    pageName: this.pvCurPageName,
+				},
+				canvas:null,
+                id:'',// 户型编号
+                spaceList:[], // 空间列表
+                gltfSpaces:[], // 场景中地板模型数组
+				spaceId:null,
+                wallIds:[], // 空间墙体id
+				wallList:[], // 墙体数据
+                gltfWalls:[], // 场景中墙体模型数组
+                loader:null,
+                scene:null,
+                // sky:null,
+                camera:null,
+                controls:null,
+				curHouseObj: null,
+				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
+				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
+				// cameraLastPosition: null,		//摄像头上一次移动到的位置
+				// controlLastPosition: null,		//观察点上一次移动到的位置
+				canvasHeight:430,	//canvas视图的高度-计算得出
+				chooseMesh:null,//标记鼠标拾取到的mesh
+				progress:1,	//进度条
+				myLoadingStatus:false,
+				repeatFlag:false,	//重复点击
+				instancedFloorMesh:null,
+				instancedMeshList: [],
+				lableItem:[],
+				showLables:false,
+				gltfSpaceRoofs:[], // 屋顶模型数组
+				floorList:[],
+				floorId:null,
+				curData:null,	//上一个页面传来的数据
+				curSpaceObj:null,	//当前应该定位到的空间
+				isIOS:false,
+            }
+        },
+		computed: {
+			userId() {
+				return this.$store.state.userId;
+			},
+		},
+        watch:{
+
+        },
+		beforeDestroy() {
+			cancelAnimationFrame(requestId, this.canvas)
+			this.worker && this.worker.terminate()
+			setTimeout(() => {
+				if (this.renderer instanceof THREE.WebGLRenderer) {
+					// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+					let deleList = this.scene.children.filter(object=>{
+						if (object instanceof THREE.Mesh) {
+							return object
+						}
+					})
+					if(deleList && deleList.length>0){
+						this.scene.remove(...deleList);
+					}
+					this.scene.traverse(function(object) {
+						if (object instanceof THREE.Mesh) {
+							if(object.geometry && typeof(object.geometry.dispose)=='function'){
+								object.geometry.dispose();
+							}
+							if(object.material && typeof(object.material.dispose)=='function'){
+								object.material.dispose();
+							}
+							if(object.texture && typeof(object.texture.dispose)=='function'){
+								object.texture.dispose();
+							}
+						}
+					});
+					this.renderer.clear();
+					this.renderer.dispose();
+					this.renderer.forceContextLoss();
+					this.renderer.context = null;
+					this.renderer.domElement = null;
+					this.renderer = null;;
+					this.clearHandle()
+				}
+			}, 0)
+			this.gltfWalls = [];
+			this.gltfSpaces = [];
+			this.gltfSpaceRoofs = [];
+			this.instancedMeshList = [];
+			this.instancedSpaceMeshList = [];
+			this.lableItem = [];
+			this.gltfLayouts = [];
+			this.instancedFurList = [];
+			TWEEN && TWEEN.removeAll();//清除所有的tween;
+			console.warn("***destroyed-webgl_rxdz_look***")
+		},
+        async mounted(options) {
+			var that = this;
+
+            this.houseId = this.$route.query.houseId?this.$route.query.houseId:'';
+            this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
+            this.id = this.$route.query.id?this.$route.query.id:'';
+			console.warn("***mounted-webgl_rxdz_look****",this.id,this.$route.query)
+			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+			if(this.id){
+				this.getIdData()
+			}else{
+				this.$store.state.loadingMsg = "没有数据~";
+			}
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if(window.innerWidth && window.screen.width){
+				screenWidth = Math.min(window.innerWidth,window.screen.width)
+			}
+			if(window.innerHeight && window.screen.height){
+				screenHeight = Math.min(window.innerHeight,window.screen.height)
+			}
+            let container = this.$refs.webgl;
+            let canvas3d = this.canvas = this.$refs.glcanvas;
+
+			let controls = null;
+			let camera = null, renderer = null, mixer = null;
+
+            let loader = this.loader = new GLTFLoader();
+            let scene = this.scene = new THREE.Scene();
+            // let raycaster = null;
+            // let mouse = new THREE.Vector2();
+            let chooseMesh = this.chooseMesh;//标记鼠标拾取到的mesh
+			let isUserContorl = false;//是否进入漫游状态
+
+			let stats;
+			let tweenCameraAnma = false;	//表示当前是否处在动画过程中
+
+		
+			init();
+			this.$store.state.loadingMsg="加载中...1%";
+			this.progress = 1;
+			this.clearEvent = clearEvent;
+			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
+			this.updateLables = updateLables;
+			this.moveMeshCenterHandle = moveMeshCenterHandle;
+			this.cameraInit = cameraInit;
+			this.resetControl = resetControl;
+			function init() {
+
+                scene.background = new THREE.Color("#FFFFFF");
+
+				// 创建相机位置
+				camera = new THREE.PerspectiveCamera( 80, screenWidth / screenHeight, 0.1, 10000 );
+				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
+				scene.add(camera);
+                that.camera = camera;
+
+                // 环境光会均匀的照亮场景中的所有物体
+                const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3);
+                scene.add(ambientLight);
+                //平行光
+                const light = new THREE.DirectionalLight(0xFFF8E5, 3);
+                light.position.set(-3, 9, 3); //default; light shining from top
+                light.castShadow = true; // default false
+                // 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域，光源投射方向为通过坐标原点
+                light.shadow.camera.left = -100; // default
+                light.shadow.camera.right  = 100; // default
+                light.shadow.camera.top  = 100; // default
+                light.shadow.camera.bottom  = -100; // default
+                
+                light.shadow.mapSize.width = 1024; // default
+                light.shadow.mapSize.height = 1024; // default
+                // light.shadow.camera.near = 0.1; // default
+                // light.shadow.camera.far = 500; // default
+                
+                // light.shadow.bias = -0.01;
+                // light.shadow.radius = 1;
+                // light.shadow.darkness = 1; // 设置阴影强度为0.5
+                scene.add(light);
+				//antialias 这个值得设置为false，不然IOS上截图会失效
+                renderer = that.renderer = new THREE.WebGLRenderer({
+					canvas:canvas3d, 
+					alpha: true,
+				});
+				if(!that.isIOS){
+					renderer.shadowMap.enabled = true;//产生阴影
+					renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影属性
+				}
+                renderer.outputEncoding = THREE.sRGBEncoding;
+                renderer.outputColorSpace = THREE.SRGBColorSpace;
+                // renderer.toneMappingExposure = 0.1;//色调映射的曝光级别。默认是1
+                renderer.toneMapping = THREE.NoToneMapping;//色调映射
+                renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
+
+                renderer.setPixelRatio( window.devicePixelRatio );
+                renderer.setSize( screenWidth, screenHeight );
+                container.appendChild( renderer.domElement );
+				
+
+				// controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
+                
+				controls = new OrbitControls(camera, renderer.domElement);
+				controls.screenSpacePanning = true;
+				controls.enableDamping = true;
+				controls.minDistance = 1;
+				controls.maxDistance = 400;
+				controls.minPolarAngle = 0;// 默认0
+				controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
+				controls.target.set(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
+				controls.enableZoom = true;//启用摄像机的缩放
+				
+				// stats = new Stats();
+				// container.appendChild(stats.dom);
+				// stats.domElement.style.top = '100px';
+				// 监听
+                window.addEventListener( 'resize', onWindowResize );
+                // raycaster = new THREE.Raycaster();
+				renderer.domElement.addEventListener('touchstart', onPointerStart, false);
+				renderer.domElement.addEventListener('touchmove', onPointerMove, false);
+				renderer.domElement.addEventListener('touchend', onPointerUp, false);
+				render();//重启渲染
+				cameraInit();
+				controls.saveState();//保存当前控制器的状态
+            }
+			//初始化相机位置
+			function cameraInit(){
+				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
+				camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
+			}
+			//初始状态
+			function resetControl(){
+				controls.reset();
+			}
+			function tweenCameraAnmaChange (value) {
+				tweenCameraAnma = value
+			}
+			//取消事件监听-避免二次进入时触发多次事件
+			function clearEvent(){
+				console.warn("**clearEvent****")
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
+			}
+			// 手指移动开始
+			function onPointerStart(event){
+				console.log('开始触摸事件：',that.overChange)
+				if(that.overChange){//形变中，不能相应用户操作
+					return false;
+				}
+			}
+			//持续触摸中
+			function onPointerMove( event ) {
+				if(that.overChange){//形变中，不能相应用户操作
+					return false;
+				}
+				that.showLables = false;
+			}
+			//触摸结束
+			function onPointerUp(event) {
+				if(that.overChange){//形变中，不能相应用户操作
+					return false;
+				}
+				// enableRender();
+				if(event.touches.length==0){
+					that.showLables = true;
+					updateLables();
+				}
+			}
+			//把摄像机移动的选中模型的正上方，观察点也变更为模型中心点，同时选中模型
+			function moveMeshCenterHandle(mesh = null,noChangeColor = true){
+				if(mesh){//如果传入了模型，则取模型
+					let spaceId = mesh.spaceId;//空间id
+					if(chooseMesh && spaceId == chooseMesh.spaceId){
+						console.warn("**moveMeshCenterHandle-重复选中了***")
+						return false;
+					}
+					chooseMesh = mesh;
+				}
+				if(!chooseMesh){
+					console.warn("**moveMeshCenterHandle-没有数据***")
+					return false;
+				}
+				that.showLables = false;//隐藏
+				controls.enable = false;//控制器不响应用户的操作
+				
+				// let object = chooseMesh;//当前选中的空间模型
+				// let spaceObj = object.userData;//获取空间模型的相关数据
+				
+				let spaceObj = chooseMesh;//获取空间模型的相关数据
+				let cameraNewPosition ={};
+				let targetNewPosition ={};
+				let oldUp = {};
+				let newUp = {};
+				if (isUserContorl === false) { // 非漫游状态
+					cameraNewPosition = {
+						x:spaceObj.centerX/100,
+						y:camera.position.y, 
+						z:-spaceObj.centerY/100,
+					}
+					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为0
+					targetNewPosition = {
+						x:spaceObj.centerX/100,
+						y:0, 
+						z:-spaceObj.centerY/100,
+					}
+					oldUp = camera.up;//俯视状态
+					newUp = camera.up;
+					// that.cameraLastPosition = cameraNewPosition;//记录下上一次摄像头位置
+					// that.controlLastPosition = targetNewPosition;//记录下上一次观察点位置
+				}
+				console.warn("**moveMeshCenter***",isUserContorl,spaceObj,JSON.stringify(camera.position),JSON.stringify(controls.target)
+				,cameraNewPosition,targetNewPosition,JSON.stringify(camera.up))
+				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,600);
+				setTimeout(()=>{
+					that.showLables = true;
+					updateLables();
+					controls.enable = true;//控制器响应用户的操作
+				},601);//动画结束后回复原始状态
+			}
+			
+			// oldP  相机原来的位置
+            // oldT  target原来的位置
+            // newP  相机新的位置
+            // newT  target新的位置
+            function tweenCamera(oldP, oldT, newP, newT, oldUp, newUp, time=1000) {
+				if(JSON.stringify(oldP) == JSON.stringify(newP) && JSON.stringify(oldT) == JSON.stringify(newT)){
+					that.repeatFlag = false;//放开限制，可以再次点击
+					return false;
+				}
+				tweenCameraAnma = true;
+				var tween = new TWEEN.Tween({
+					x1: oldP.x, // 相机x
+					y1: oldP.y, // 相机y
+					z1: oldP.z, // 相机z
+					x2: oldT.x, // 控制点的中心点x
+					y2: oldT.y, // 控制点的中心点y
+					z2: oldT.z,	// 控制点的中心点z
+					x3: oldUp.x, // 控制点的中心点x
+					y3: oldUp.y, // 控制点的中心点y
+					z3: oldUp.z  // 控制点的中心点z
+				})
+				.to({
+			        x1: newP.x,
+					y1: newP.y,
+					z1: newP.z,
+					x2: newT.x,
+					y2: newT.y,
+					z2: newT.z,
+					x3: newUp.x, // up向量
+					y3: newUp.y, // 控制点的中心点y
+					z3: newUp.z  // 控制点的中心点z
+			    }, time)
+				.easing(TWEEN.Easing.Quadratic.InOut)
+				.onUpdate((object)=> {
+					camera.position.x = object.x1;
+					camera.position.y = object.y1;
+					camera.position.z = object.z1;
+					let newTarget = new THREE.Vector3(object.x3,object.y3,object.z3);
+					camera.up.copy(newTarget);
+					camera.lookAt(object.x2,object.y2,object.z2);
+					// controls.target.x = object.x2;
+					// controls.target.y = object.y2;
+					// controls.target.z = object.z2;
+					// controls.update();
+					// console.warn("****onUpdate**",object.x1,object.y1,object.z1,object.x2,object.y2,object.z2)
+				}).onComplete(()=>{
+					controls.target.x = newT.x;
+					controls.target.y = newT.y;
+					controls.target.z = newT.z;
+					//修正最后的视角
+					let up = new THREE.Vector3(newUp.x,newUp.y,newUp.z);
+					camera.up.copy(up);
+					camera.lookAt(controls.target.x,controls.target.y,controls.target.z);
+					tweenCameraAnma = false;
+					that.repeatFlag = false;//放开限制，可以再次点击
+				})
+				// 开始动画
+				tween.start();
+			}
+			function onWindowResize() {
+                camera.aspect = screenWidth / screenHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize( screenWidth, screenHeight );
+            }
+			//计算漫游时当前选中空间的观察点和摄像机的放置点位
+			//distance 表示要沿着视角移动的距离
+			function updateLables(){
+				if(!that.showLables){
+					return false;
+				}
+				that.lableItem.forEach(lable =>{
+					let item = that.gltfSpaces[lable.cubeIndex].instancedMeshIndexList[0];//获取地板模型的第一个geometry实例
+					let _index = item.instancedMeshIndex;//第一个geometry实例 在 全局InstancedMesh实例的位置
+					let instancedMesh = that.instancedSpaceMeshList[_index];//获取具体的网格实例
+					let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
+					instancedMesh.getMatrixAt(item.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
+					let position = new THREE.Vector3();//当前几何体的位置参数
+					position.setFromMatrixPosition(stratMatrix);//从四维向量中提取位置信息
+					// console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
+					position.project(camera);
+					const x = (position.x *  .5 + .5) * screenWidth;
+					const y = (position.y * -.5 + .5) * screenHeight;
+					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
+				})
+			}
+            function render() {
+                TWEEN && TWEEN.update();
+                // stats.update();
+				//不处在动画过程中，则可以处理移动等动作
+				if(tweenCameraAnma==false){
+					controls.update();
+				}
+				renderer.render(scene, camera);//单次渲染
+				requestId = requestAnimationFrame(render, canvas3d);
+            }
+		},
+
+		methods: {
+			clearHandle(){
+				this.clearEvent();
+			},
+			//楼层切换
+			floorChange(item){
+				if(this.floorId==item.layoutId){
+					return false;
+				}
+				this.floorId = item.layoutId;
+				
+				this.curHouseObj = this.curData.layoutStruct.find(it=>it.layoutId==item.layoutId);//更新当前具体的户型数据
+				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+				let deleList = this.scene.children.filter(object=>{
+					if(object.userType=="mesh" || object.userType=="layoutMesh"){
+						return object
+					}
+				})
+				// console.warn("***deleList***",deleList)
+				if(deleList && deleList.length>0){
+					this.showLables = false;//隐藏lable
+					this.scene.remove(...deleList);
+				}
+				this.gltfWalls = [];
+				this.gltfSpaces = [];
+				this.instancedMeshList = [];
+				this.instancedSpaceMeshList = [];
+				this.lableItem = [];
+				this.gltfLayouts = [];
+				this.instancedFurList = [];
+				this.wallList = [];
+				//恢复初始视角
+				this.cameraInit();
+				this.resetControl();
+				setTimeout(()=>{
+					this.loadSpace();
+				}, 100);
+				// this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
+			},
+			async getIdData(){
+				let userId = this.userId || '';
+			    let params = {
+			        id: this.id,
+			        brandId: $config.brandId,
+					houseId:this.houseId,
+					userId,
+			    };
+			    const res = await requestConfig('getCustomizedRecord', params);
+			    if (res.success ) {
+			        let single = res.list[0];
+					this.layoutStruct = JSON.parse(JSON.stringify(single));
+					this.setHouseDetail(this.layoutStruct)
+			    }
+			},
+			/**
+			 * 设置户型详情信息
+			 * @param {Object} data 户型详情
+			 */
+			setHouseDetail(data){
+				if(data && data.layoutStruct){
+					let curData = data;
+					this.curHouseObj = curData.layoutStruct.find(it=>it.floor==curData.curFloor);;
+					// this.spaceId = this.curHouseObj.spaceId;
+					console.warn("***curHouseObj***",this.curHouseObj)
+					this.floorList = [];
+					curData.layoutStruct && curData.layoutStruct.forEach(item=>{
+						this.floorList.push({
+							houseFloor:item.floor,
+							layoutId:item.layoutId,
+						});
+					})
+					let select = this.floorList.find(it=>it.houseFloor==this.curHouseObj.floor);
+					this.floorId = select ? select.layoutId : this.floorList[0].layoutId;
+					this.curData = curData;
+					console.warn("***floorList-init***",this.floorList,select)
+					// 加载户型
+					this.loadSpace();
+				}else{
+					this.curHouseObj = {}
+				}
+			},
+			// 添加文字标签
+			addWordLabel(){
+				if(!this.gltfSpaces || this.gltfSpaces.length <= 0){
+					return false;
+				}
+				// 方案二
+				this.lableItem = [];
+				this.gltfSpaces.forEach((cube,index) =>{
+					// 给地板加上空间类型标注, 空间为链接空间的不显示
+					if(cube.spaceName && !cube.isSizeLock){
+						let name = spaceTypes[cube.spaceType - 1];
+						if(cube.spaceType==15){			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
+							let layoutId = this.spaceList.find(it => it.spaceId == cube.spaceId).layoutId;
+							let layout = this.arrFrunList.find(it=>it.id == layoutId);
+							if(layout){
+								name = spaceTypes[layout.type - 1];
+							}
+						}
+						this.lableItem.push(
+							{
+								text:name,
+								spaceId:cube.spaceId,
+								transform:'',
+								cubeIndex:index,
+							}
+						)
+					}
+				})
+				this.showLables = true;
+				this.updateLables();//更新lable
+			}, 
+			//obj 物体对象，type 是否改变颜色
+			moveMeshCenter(obj,type){
+				console.warn("**moveMeshCenter***",obj)
+				if(obj && this.gltfSpaces && this.gltfSpaces.length>0){
+					this.moveMeshCenterHandle(obj,type);
+				}
+			},
+            // 绘制空间-即地板
+            async loadSpace(){
+				this.spaceList = [];
+				this.wallIds = [];
+				if(!this.curHouseObj){//减少重复请求
+					console.warn("***数据错误***")
+					return false
+				}
+                if(this.curHouseObj){
+                    const spaceDetail = this.curHouseObj;
+                    const spaceList = spaceDetail.houseJson;
+                    // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
+                    for (let index = 0; index < spaceList.length; index++) {
+                        var element = spaceList[index];
+                        // const centerX = JSON.parse(JSON.stringify(element.centerX))
+                        // element.centerX = element.centerY;
+                        // element.centerY = centerX;
+						// 计算观察点向量（相对中心点）
+						let _actorLoaction = element.actorLocation.split(',');//x y z
+						let _x = parseInt(_actorLoaction[1]) || element.centerX;//观察点 X轴坐标 
+						let _z = (parseInt(_actorLoaction[0])) || element.centerY;//观察点 Z轴坐标
+						let _presentX = (_x - element.centerX)/((element.spaceWidth/2) - 5);//5是墙壁厚度的一半-单位cm
+						let _presentY = (_z - element.centerY)/((element.spaceHeight/2) - 5);
+						element.presentX = _presentX;//观察点跟空间中心原点的距离比例
+						element.presentY = _presentY;
+						element.wallMoveValue = "[0,0,0,0]"
+                        this.spaceList.push(element);
+                        this.wallIds.push(element.wallId);
+						if(element.wallList){
+							this.wallList.push(JSON.parse(element.wallList));
+						}
+						if(element.isSelected){ // 默认选中空间
+						    this.curSpaceObj = element;
+						}
+                    }
+					if(!this.curSpaceObj && this.spaceList.length > 0){
+					    this.curSpaceObj = this.spaceList[0];
+					}
+                }
+                console.log("该户型空间数据:", this.spaceList);
+				console.log("当前选中的空间:", this.curSpaceObj);
+				this.loaderSpaceArr(this.spaceList);
+                // 获取墙体数据并且绘制墙体
+                this.getHouseTypeSpaceWalls();
+            },
+            // 获取墙体数据
+            async getHouseTypeSpaceWalls(){
+                // let data = {id:this.wallIds}
+                // const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
+                // console.log("墙体数据:", res.list)
+                // let wallList = [];
+                // if(res.success){
+                //     wallList = this.wallList = res.list;
+                // }
+				let wallList = [];
+				if(this.wallList && this.wallList.length>0){
+					wallList = this.wallList;
+				}else{
+					let data = {id:this.wallIds}
+					const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
+					console.log("墙体数据:", res.list)
+					if(res.success){
+					    wallList = this.wallList = res.list;
+					}
+				}
+                let wallArr = []
+                for (let index = 0; index < wallList.length; index++) {//每个空间对应一个数据
+                    let element = JSON.parse(wallList[index].wallJson);
+					let space = this.spaceList.find(space=>space.spaceId==element.spaceId);
+					this.computeWallHandleOld(space,element);//提前计算
+                    for (let i = 0; i < element.wallData.length; i ++) {//对应空间里面的4个方向的墙壁数据
+                        let wallData = element.wallData[i];
+						//对应方向的墙壁的墙体模型数据列表，每一面墙可能有多个模型
+                        for (let j = 0; j < wallData.wallModelData.length; j ++) {
+                            let wallModelData = wallData.wallModelData[j];
+                            wallArr.push({spaceId:element.spaceId, wallModelData:wallModelData, wallDirection:wallData.wallDirection})
+                        }
+                    }
+                }
+                this.loadSpaceObjWalls(wallArr, wallList);
+				this.getOverallArrangementDetailsList(2);
+            },
+			// 加载单个空间墙体资源
+            async loadSpaceObjWalls(wallArr, wallList){
+                // 加载远程墙体模型资源
+				let startTime = new Date().getTime();
+                // console.log("wallArr:", wallArr)
+				let promise_list = [];
+				let realWallArr = this.preWallData(wallArr);
+				let arrLength = realWallArr.length;
+				realWallArr && realWallArr.forEach((item,index) => {
+					promise_list.push(
+						new Promise((resolve, reject) => {
+							this.loadWallModels(item, wallList, arrLength , resolve);
+						})
+					)
+				});
+				Promise.all(promise_list).then(()=>{
+					let endTime = new Date().getTime();
+					console.log("模型全部加载完成，时间：",endTime - startTime);
+					this.$nextTick(()=>{
+						this.moveMeshCenter(this.curSpaceObj);
+						this.progress = 100;
+						// this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
+						this.$store.state.loadingMsg="加载中..." + this.progress + '%';
+						this.$nextTick(()=>{
+							this.myLoadingStatus = false;
+							// this.$refs.myLoading.hideLoading();
+							setTimeout(()=>{
+								this.addWordLabel(); // 添加文字标签
+							}, 610);
+						})
+					})
+				})
+            },
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    @import "./webgl_rxdz_look.scss";
+</style>

src/pages/webgl_rxdz_look/webgl_rxdz_look.html

@@ -1,12 +1,6 @@
 <!-- 模型查看页面 -->
 <div class="main-view">
 	<mynavbar :barData='navbar'/>
-	<div id="mapDiv" ref="webgl"></div>
-	<canvas id="canvas_webgl" type="webgl" ref="glcanvas" width="100vw" height="100vh"></canvas>
-	<div v-show="showLables && gltf.text.length>0" v-for="(gltf,index) in lableItem" :key="index" class="word-view"
-		:style="{'transform':gltf.transform}">
-		<span user-select="false">{{gltf.text}}</span>
-	</div>
 	<!-- 楼层 -->
 	<div class="floor-view" v-if="floorList&&floorList.length>1">
 		<div class="floor-item rows justify-center" :class="floorId==floor.layoutId?'active':''" 

src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -2,23 +2,13 @@
 
 </template>
 <script>
-	import * as THREE from 'three';
-	import Stats from 'three/addons/libs/stats.module.js';
-	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-	import spaceTypes from '@/static/spaceTypesIE.js';
-	import TWEEN from 'three/addons/libs/tween.module.js';
-
 	var requestId = "";
     const util = require('@/utils/util.js');
     const config = require('@/services/urlConfig.js');
-	import loadModel from '@/mixins/loadModel.js';
-	import wallMethod from '@/mixins/wallMethod.js';
-	import floorMethod from '@/mixins/floorMethod.js';
 	import commonPageMethod from '@/mixins/commonPageMethod.js';
     // const app = getApp(); //获取应用实例
     export default {
-		mixins:[loadModel,floorMethod,wallMethod,commonPageMethod],
+		mixins:[commonPageMethod],
         /**
          * 页面的初始数据
          */
@@ -43,39 +33,13 @@
 				    shareToken: "",
 				    pageName: this.pvCurPageName,
 				},
-				canvas:null,
                 id:'',// 户型编号
-                spaceList:[], // 空间列表
-                gltfSpaces:[], // 场景中地板模型数组
-				spaceId:null,
-                wallIds:[], // 空间墙体id
-				wallList:[], // 墙体数据
-                gltfWalls:[], // 场景中墙体模型数组
-                loader:null,
-                scene:null,
-                // sky:null,
-                camera:null,
-                controls:null,
-				curHouseObj: null,
-				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
-				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
-				// cameraLastPosition: null,		//摄像头上一次移动到的位置
-				// controlLastPosition: null,		//观察点上一次移动到的位置
-				canvasHeight:430,	//canvas视图的高度-计算得出
-				chooseMesh:null,//标记鼠标拾取到的mesh
-				progress:1,	//进度条
-				myLoadingStatus:false,
-				repeatFlag:false,	//重复点击
-				instancedFloorMesh:null,
-				instancedMeshList: [],
-				lableItem:[],
-				showLables:false,
-				gltfSpaceRoofs:[], // 屋顶模型数组
 				floorList:[],
-				floorId:null,
-				curData:null,	//上一个页面传来的数据
-				curSpaceObj:null,	//当前应该定位到的空间
-				isIOS:false,
+				floorId:'',
+				curData:null,
+				curHouseObj:null,
+				screenWidth:'',
+				screenHeight:'',
             }
         },
 		computed: {
@@ -83,56 +47,6 @@
 				return this.$store.state.userId;
 			},
 		},
-        watch:{
-
-        },
-		beforeDestroy() {
-			cancelAnimationFrame(requestId, this.canvas)
-			this.worker && this.worker.terminate()
-			setTimeout(() => {
-				if (this.renderer instanceof THREE.WebGLRenderer) {
-					// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
-					let deleList = this.scene.children.filter(object=>{
-						if (object instanceof THREE.Mesh) {
-							return object
-						}
-					})
-					if(deleList && deleList.length>0){
-						this.scene.remove(...deleList);
-					}
-					this.scene.traverse(function(object) {
-						if (object instanceof THREE.Mesh) {
-							if(object.geometry && typeof(object.geometry.dispose)=='function'){
-								object.geometry.dispose();
-							}
-							if(object.material && typeof(object.material.dispose)=='function'){
-								object.material.dispose();
-							}
-							if(object.texture && typeof(object.texture.dispose)=='function'){
-								object.texture.dispose();
-							}
-						}
-					});
-					this.renderer.clear();
-					this.renderer.dispose();
-					this.renderer.forceContextLoss();
-					this.renderer.context = null;
-					this.renderer.domElement = null;
-					this.renderer = null;;
-					this.clearHandle()
-				}
-			}, 0)
-			this.gltfWalls = [];
-			this.gltfSpaces = [];
-			this.gltfSpaceRoofs = [];
-			this.instancedMeshList = [];
-			this.instancedSpaceMeshList = [];
-			this.lableItem = [];
-			this.gltfLayouts = [];
-			this.instancedFurList = [];
-			TWEEN && TWEEN.removeAll();//清除所有的tween;
-			console.warn("***destroyed-webgl_rxdz_look***")
-		},
         async mounted(options) {
 			var that = this;
 
@@ -149,305 +63,11 @@
 			let screenWidth = window.screen.width;
 			let screenHeight = window.screen.height;
 			if(window.innerWidth && window.screen.width){
-				screenWidth = Math.min(window.innerWidth,window.screen.width)
+				this.screenWidth = Math.min(window.innerWidth,window.screen.width)
 			}
 			if(window.innerHeight && window.screen.height){
-				screenHeight = Math.min(window.innerHeight,window.screen.height)
-			}
-            let container = this.$refs.webgl;
-            let canvas3d = this.canvas = this.$refs.glcanvas;
-
-			let controls = null;
-			let camera = null, renderer = null, mixer = null;
-
-            let loader = this.loader = new GLTFLoader();
-            let scene = this.scene = new THREE.Scene();
-            // let raycaster = null;
-            // let mouse = new THREE.Vector2();
-            let chooseMesh = this.chooseMesh;//标记鼠标拾取到的mesh
-			let isUserContorl = false;//是否进入漫游状态
-
-			let stats;
-			let tweenCameraAnma = false;	//表示当前是否处在动画过程中
-
-		
-			init();
-			this.$store.state.loadingMsg="加载中...1%";
-			this.progress = 1;
-			this.clearEvent = clearEvent;
-			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
-			this.updateLables = updateLables;
-			this.moveMeshCenterHandle = moveMeshCenterHandle;
-			this.cameraInit = cameraInit;
-			this.resetControl = resetControl;
-			function init() {
-
-                scene.background = new THREE.Color("#FFFFFF");
-
-				// 创建相机位置
-				camera = new THREE.PerspectiveCamera( 80, screenWidth / screenHeight, 0.1, 10000 );
-				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
-				scene.add(camera);
-                that.camera = camera;
-
-                // 环境光会均匀的照亮场景中的所有物体
-                const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3);
-                scene.add(ambientLight);
-                //平行光
-                const light = new THREE.DirectionalLight(0xFFF8E5, 3);
-                light.position.set(-3, 9, 3); //default; light shining from top
-                light.castShadow = true; // default false
-                // 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域，光源投射方向为通过坐标原点
-                light.shadow.camera.left = -100; // default
-                light.shadow.camera.right  = 100; // default
-                light.shadow.camera.top  = 100; // default
-                light.shadow.camera.bottom  = -100; // default
-                
-                light.shadow.mapSize.width = 1024; // default
-                light.shadow.mapSize.height = 1024; // default
-                // light.shadow.camera.near = 0.1; // default
-                // light.shadow.camera.far = 500; // default
-                
-                // light.shadow.bias = -0.01;
-                // light.shadow.radius = 1;
-                // light.shadow.darkness = 1; // 设置阴影强度为0.5
-                scene.add(light);
-				//antialias 这个值得设置为false，不然IOS上截图会失效
-                renderer = that.renderer = new THREE.WebGLRenderer({
-					canvas:canvas3d, 
-					alpha: true,
-				});
-				if(!that.isIOS){
-					renderer.shadowMap.enabled = true;//产生阴影
-					renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影属性
-				}
-                renderer.outputEncoding = THREE.sRGBEncoding;
-                renderer.outputColorSpace = THREE.SRGBColorSpace;
-                // renderer.toneMappingExposure = 0.1;//色调映射的曝光级别。默认是1
-                renderer.toneMapping = THREE.NoToneMapping;//色调映射
-                renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
-
-                renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( screenWidth, screenHeight );
-                container.appendChild( renderer.domElement );
-				
-
-				// controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
-                
-				controls = new OrbitControls(camera, renderer.domElement);
-				controls.screenSpacePanning = true;
-				controls.enableDamping = true;
-				controls.minDistance = 1;
-				controls.maxDistance = 400;
-				controls.minPolarAngle = 0;// 默认0
-				controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
-				controls.target.set(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
-				controls.enableZoom = true;//启用摄像机的缩放
-				
-				// stats = new Stats();
-				// container.appendChild(stats.dom);
-				// stats.domElement.style.top = '100px';
-				// 监听
-                window.addEventListener( 'resize', onWindowResize );
-                // raycaster = new THREE.Raycaster();
-				renderer.domElement.addEventListener('touchstart', onPointerStart, false);
-				renderer.domElement.addEventListener('touchmove', onPointerMove, false);
-				renderer.domElement.addEventListener('touchend', onPointerUp, false);
-				render();//重启渲染
-				cameraInit();
-				controls.saveState();//保存当前控制器的状态
-            }
-			//初始化相机位置
-			function cameraInit(){
-				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
-				camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
-			}
-			//初始状态
-			function resetControl(){
-				controls.reset();
-			}
-			function tweenCameraAnmaChange (value) {
-				tweenCameraAnma = value
-			}
-			//取消事件监听-避免二次进入时触发多次事件
-			function clearEvent(){
-				console.warn("**clearEvent****")
-				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
-				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
-				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
-			}
-			// 手指移动开始
-			function onPointerStart(event){
-				console.log('开始触摸事件：',that.overChange)
-				if(that.overChange){//形变中，不能相应用户操作
-					return false;
-				}
-			}
-			//持续触摸中
-			function onPointerMove( event ) {
-				if(that.overChange){//形变中，不能相应用户操作
-					return false;
-				}
-				that.showLables = false;
-			}
-			//触摸结束
-			function onPointerUp(event) {
-				if(that.overChange){//形变中，不能相应用户操作
-					return false;
-				}
-				// enableRender();
-				if(event.touches.length==0){
-					that.showLables = true;
-					updateLables();
-				}
+				this.screenHeight = Math.min(window.innerHeight,window.screen.height)
 			}
-			//把摄像机移动的选中模型的正上方，观察点也变更为模型中心点，同时选中模型
-			function moveMeshCenterHandle(mesh = null,noChangeColor = true){
-				if(mesh){//如果传入了模型，则取模型
-					let spaceId = mesh.spaceId;//空间id
-					if(chooseMesh && spaceId == chooseMesh.spaceId){
-						console.warn("**moveMeshCenterHandle-重复选中了***")
-						return false;
-					}
-					chooseMesh = mesh;
-				}
-				if(!chooseMesh){
-					console.warn("**moveMeshCenterHandle-没有数据***")
-					return false;
-				}
-				that.showLables = false;//隐藏
-				controls.enable = false;//控制器不响应用户的操作
-				
-				// let object = chooseMesh;//当前选中的空间模型
-				// let spaceObj = object.userData;//获取空间模型的相关数据
-				
-				let spaceObj = chooseMesh;//获取空间模型的相关数据
-				let cameraNewPosition ={};
-				let targetNewPosition ={};
-				let oldUp = {};
-				let newUp = {};
-				if (isUserContorl === false) { // 非漫游状态
-					cameraNewPosition = {
-						x:spaceObj.centerX/100,
-						y:camera.position.y, 
-						z:-spaceObj.centerY/100,
-					}
-					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为0
-					targetNewPosition = {
-						x:spaceObj.centerX/100,
-						y:0, 
-						z:-spaceObj.centerY/100,
-					}
-					oldUp = camera.up;//俯视状态
-					newUp = camera.up;
-					// that.cameraLastPosition = cameraNewPosition;//记录下上一次摄像头位置
-					// that.controlLastPosition = targetNewPosition;//记录下上一次观察点位置
-				}
-				console.warn("**moveMeshCenter***",isUserContorl,spaceObj,JSON.stringify(camera.position),JSON.stringify(controls.target)
-				,cameraNewPosition,targetNewPosition,JSON.stringify(camera.up))
-				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,600);
-				setTimeout(()=>{
-					that.showLables = true;
-					updateLables();
-					controls.enable = true;//控制器响应用户的操作
-				},601);//动画结束后回复原始状态
-			}
-			
-			// oldP  相机原来的位置
-            // oldT  target原来的位置
-            // newP  相机新的位置
-            // newT  target新的位置
-            function tweenCamera(oldP, oldT, newP, newT, oldUp, newUp, time=1000) {
-				if(JSON.stringify(oldP) == JSON.stringify(newP) && JSON.stringify(oldT) == JSON.stringify(newT)){
-					that.repeatFlag = false;//放开限制，可以再次点击
-					return false;
-				}
-				tweenCameraAnma = true;
-				var tween = new TWEEN.Tween({
-					x1: oldP.x, // 相机x
-					y1: oldP.y, // 相机y
-					z1: oldP.z, // 相机z
-					x2: oldT.x, // 控制点的中心点x
-					y2: oldT.y, // 控制点的中心点y
-					z2: oldT.z,	// 控制点的中心点z
-					x3: oldUp.x, // 控制点的中心点x
-					y3: oldUp.y, // 控制点的中心点y
-					z3: oldUp.z  // 控制点的中心点z
-				})
-				.to({
-			        x1: newP.x,
-					y1: newP.y,
-					z1: newP.z,
-					x2: newT.x,
-					y2: newT.y,
-					z2: newT.z,
-					x3: newUp.x, // up向量
-					y3: newUp.y, // 控制点的中心点y
-					z3: newUp.z  // 控制点的中心点z
-			    }, time)
-				.easing(TWEEN.Easing.Quadratic.InOut)
-				.onUpdate((object)=> {
-					camera.position.x = object.x1;
-					camera.position.y = object.y1;
-					camera.position.z = object.z1;
-					let newTarget = new THREE.Vector3(object.x3,object.y3,object.z3);
-					camera.up.copy(newTarget);
-					camera.lookAt(object.x2,object.y2,object.z2);
-					// controls.target.x = object.x2;
-					// controls.target.y = object.y2;
-					// controls.target.z = object.z2;
-					// controls.update();
-					// console.warn("****onUpdate**",object.x1,object.y1,object.z1,object.x2,object.y2,object.z2)
-				}).onComplete(()=>{
-					controls.target.x = newT.x;
-					controls.target.y = newT.y;
-					controls.target.z = newT.z;
-					//修正最后的视角
-					let up = new THREE.Vector3(newUp.x,newUp.y,newUp.z);
-					camera.up.copy(up);
-					camera.lookAt(controls.target.x,controls.target.y,controls.target.z);
-					tweenCameraAnma = false;
-					that.repeatFlag = false;//放开限制，可以再次点击
-				})
-				// 开始动画
-				tween.start();
-			}
-			function onWindowResize() {
-                camera.aspect = screenWidth / screenHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize( screenWidth, screenHeight );
-            }
-			//计算漫游时当前选中空间的观察点和摄像机的放置点位
-			//distance 表示要沿着视角移动的距离
-			function updateLables(){
-				if(!that.showLables){
-					return false;
-				}
-				that.lableItem.forEach(lable =>{
-					let item = that.gltfSpaces[lable.cubeIndex].instancedMeshIndexList[0];//获取地板模型的第一个geometry实例
-					let _index = item.instancedMeshIndex;//第一个geometry实例 在 全局InstancedMesh实例的位置
-					let instancedMesh = that.instancedSpaceMeshList[_index];//获取具体的网格实例
-					let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
-					instancedMesh.getMatrixAt(item.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
-					let position = new THREE.Vector3();//当前几何体的位置参数
-					position.setFromMatrixPosition(stratMatrix);//从四维向量中提取位置信息
-					// console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
-					position.project(camera);
-					const x = (position.x *  .5 + .5) * screenWidth;
-					const y = (position.y * -.5 + .5) * screenHeight;
-					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
-				})
-			}
-            function render() {
-                TWEEN && TWEEN.update();
-                // stats.update();
-				//不处在动画过程中，则可以处理移动等动作
-				if(tweenCameraAnma==false){
-					controls.update();
-				}
-				renderer.render(scene, camera);//单次渲染
-				requestId = requestAnimationFrame(render, canvas3d);
-            }
 		},
 
 		methods: {
@@ -460,34 +80,10 @@
 					return false;
 				}
 				this.floorId = item.layoutId;
-				
 				this.curHouseObj = this.curData.layoutStruct.find(it=>it.layoutId==item.layoutId);//更新当前具体的户型数据
-				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
-				let deleList = this.scene.children.filter(object=>{
-					if(object.userType=="mesh" || object.userType=="layoutMesh"){
-						return object
-					}
-				})
-				// console.warn("***deleList***",deleList)
-				if(deleList && deleList.length>0){
-					this.showLables = false;//隐藏lable
-					this.scene.remove(...deleList);
+				if(webglCom && typeof(webglCom.curHouseFloorChange)==='function'){
+					webglCom.curHouseFloorChange(this.curHouseObj);
 				}
-				this.gltfWalls = [];
-				this.gltfSpaces = [];
-				this.instancedMeshList = [];
-				this.instancedSpaceMeshList = [];
-				this.lableItem = [];
-				this.gltfLayouts = [];
-				this.instancedFurList = [];
-				this.wallList = [];
-				//恢复初始视角
-				this.cameraInit();
-				this.resetControl();
-				setTimeout(()=>{
-					this.loadSpace();
-				}, 100);
-				// this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
 			},
 			async getIdData(){
 				let userId = this.userId || '';
@@ -500,8 +96,12 @@
 			    const res = await requestConfig('getCustomizedRecord', params);
 			    if (res.success ) {
 			        let single = res.list[0];
-					this.layoutStruct = JSON.parse(JSON.stringify(single));
-					this.setHouseDetail(this.layoutStruct)
+					let selectHouse = JSON.parse(JSON.stringify(single));
+					this.setHouseDetail(selectHouse)
+					// this.selectHouse = selectHouse;//传递给子组件，用于用户切换楼层
+					// this.curHouseType = selectHouse.spaceStructure;//当前选中的户型类型-传递给子组件触发具体的户型数据选取
+					// this.curHouseName = selectHouse.spaceName;//当前选中的户型类型名称
+					// webglCom.curHouseTypeChange(selectHouse);//把数据传给webgl通用组件
 			    }
 			},
 			/**
@@ -511,9 +111,7 @@
 			setHouseDetail(data){
 				if(data && data.layoutStruct){
 					let curData = data;
-					this.curHouseObj = curData.layoutStruct.find(it=>it.floor==curData.curFloor);;
-					// this.spaceId = this.curHouseObj.spaceId;
-					console.warn("***curHouseObj***",this.curHouseObj)
+					this.curData = curData;
 					this.floorList = [];
 					curData.layoutStruct && curData.layoutStruct.forEach(item=>{
 						this.floorList.push({
@@ -521,169 +119,18 @@
 							layoutId:item.layoutId,
 						});
 					})
-					let select = this.floorList.find(it=>it.houseFloor==this.curHouseObj.floor);
+					this.curHouseObj = curData.layoutStruct.find(it=>it.floor==curData.curFloor);
+					console.warn("***curHouseObj***",this.curHouseObj)
+					let select = this.floorList.find(it=>it.houseFloor == curData.curFloor);
 					this.floorId = select ? select.layoutId : this.floorList[0].layoutId;
-					this.curData = curData;
 					console.warn("***floorList-init***",this.floorList,select)
-					// 加载户型
-					this.loadSpace();
-				}else{
-					this.curHouseObj = {}
-				}
-			},
-			// 添加文字标签
-			addWordLabel(){
-				if(!this.gltfSpaces || this.gltfSpaces.length <= 0){
-					return false;
-				}
-				// 方案二
-				this.lableItem = [];
-				this.gltfSpaces.forEach((cube,index) =>{
-					// 给地板加上空间类型标注, 空间为链接空间的不显示
-					if(cube.spaceName && !cube.isSizeLock){
-						let name = spaceTypes[cube.spaceType - 1];
-						if(cube.spaceType==15){			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
-							let layoutId = this.spaceList.find(it => it.spaceId == cube.spaceId).layoutId;
-							let layout = this.arrFrunList.find(it=>it.id == layoutId);
-							if(layout){
-								name = spaceTypes[layout.type - 1];
-							}
-						}
-						this.lableItem.push(
-							{
-								text:name,
-								spaceId:cube.spaceId,
-								transform:'',
-								cubeIndex:index,
-							}
-						)
+					if(webglCom && typeof(webglCom.curHouseFloorChange)==='function'){
+						webglCom.setHeight(this.screenHeight);
+						webglCom.showArea = false;
+						webglCom.curHouseFloorChange(this.curHouseObj);
 					}
-				})
-				this.showLables = true;
-				this.updateLables();//更新lable
-			}, 
-			//obj 物体对象，type 是否改变颜色
-			moveMeshCenter(obj,type){
-				console.warn("**moveMeshCenter***",obj)
-				if(obj && this.gltfSpaces && this.gltfSpaces.length>0){
-					this.moveMeshCenterHandle(obj,type);
 				}
 			},
-            // 绘制空间-即地板
-            async loadSpace(){
-				this.spaceList = [];
-				this.wallIds = [];
-				if(!this.curHouseObj){//减少重复请求
-					console.warn("***数据错误***")
-					return false
-				}
-                if(this.curHouseObj){
-                    const spaceDetail = this.curHouseObj;
-                    const spaceList = spaceDetail.houseJson;
-                    // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
-                    for (let index = 0; index < spaceList.length; index++) {
-                        var element = spaceList[index];
-                        // const centerX = JSON.parse(JSON.stringify(element.centerX))
-                        // element.centerX = element.centerY;
-                        // element.centerY = centerX;
-						// 计算观察点向量（相对中心点）
-						let _actorLoaction = element.actorLocation.split(',');//x y z
-						let _x = parseInt(_actorLoaction[1]) || element.centerX;//观察点 X轴坐标 
-						let _z = (parseInt(_actorLoaction[0])) || element.centerY;//观察点 Z轴坐标
-						let _presentX = (_x - element.centerX)/((element.spaceWidth/2) - 5);//5是墙壁厚度的一半-单位cm
-						let _presentY = (_z - element.centerY)/((element.spaceHeight/2) - 5);
-						element.presentX = _presentX;//观察点跟空间中心原点的距离比例
-						element.presentY = _presentY;
-						element.wallMoveValue = "[0,0,0,0]"
-                        this.spaceList.push(element);
-                        this.wallIds.push(element.wallId);
-						if(element.wallList){
-							this.wallList.push(JSON.parse(element.wallList));
-						}
-						if(element.isSelected){ // 默认选中空间
-						    this.curSpaceObj = element;
-						}
-                    }
-					if(!this.curSpaceObj && this.spaceList.length > 0){
-					    this.curSpaceObj = this.spaceList[0];
-					}
-                }
-                console.log("该户型空间数据:", this.spaceList);
-				console.log("当前选中的空间:", this.curSpaceObj);
-				this.loaderSpaceArr(this.spaceList);
-                // 获取墙体数据并且绘制墙体
-                this.getHouseTypeSpaceWalls();
-            },
-            // 获取墙体数据
-            async getHouseTypeSpaceWalls(){
-                // let data = {id:this.wallIds}
-                // const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
-                // console.log("墙体数据:", res.list)
-                // let wallList = [];
-                // if(res.success){
-                //     wallList = this.wallList = res.list;
-                // }
-				let wallList = [];
-				if(this.wallList && this.wallList.length>0){
-					wallList = this.wallList;
-				}else{
-					let data = {id:this.wallIds}
-					const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
-					console.log("墙体数据:", res.list)
-					if(res.success){
-					    wallList = this.wallList = res.list;
-					}
-				}
-                let wallArr = []
-                for (let index = 0; index < wallList.length; index++) {//每个空间对应一个数据
-                    let element = JSON.parse(wallList[index].wallJson);
-					let space = this.spaceList.find(space=>space.spaceId==element.spaceId);
-					this.computeWallHandleOld(space,element);//提前计算
-                    for (let i = 0; i < element.wallData.length; i ++) {//对应空间里面的4个方向的墙壁数据
-                        let wallData = element.wallData[i];
-						//对应方向的墙壁的墙体模型数据列表，每一面墙可能有多个模型
-                        for (let j = 0; j < wallData.wallModelData.length; j ++) {
-                            let wallModelData = wallData.wallModelData[j];
-                            wallArr.push({spaceId:element.spaceId, wallModelData:wallModelData, wallDirection:wallData.wallDirection})
-                        }
-                    }
-                }
-                this.loadSpaceObjWalls(wallArr, wallList);
-				this.getOverallArrangementDetailsList(2);
-            },
-			// 加载单个空间墙体资源
-            async loadSpaceObjWalls(wallArr, wallList){
-                // 加载远程墙体模型资源
-				let startTime = new Date().getTime();
-                // console.log("wallArr:", wallArr)
-				let promise_list = [];
-				let realWallArr = this.preWallData(wallArr);
-				let arrLength = realWallArr.length;
-				realWallArr && realWallArr.forEach((item,index) => {
-					promise_list.push(
-						new Promise((resolve, reject) => {
-							this.loadWallModels(item, wallList, arrLength , resolve);
-						})
-					)
-				});
-				Promise.all(promise_list).then(()=>{
-					let endTime = new Date().getTime();
-					console.log("模型全部加载完成，时间：",endTime - startTime);
-					this.$nextTick(()=>{
-						this.moveMeshCenter(this.curSpaceObj);
-						this.progress = 100;
-						// this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
-						this.$store.state.loadingMsg="加载中..." + this.progress + '%';
-						this.$nextTick(()=>{
-							this.myLoadingStatus = false;
-							// this.$refs.myLoading.hideLoading();
-							setTimeout(()=>{
-								this.addWordLabel(); // 添加文字标签
-							}, 610);
-						})
-					})
-				})
-            },
         }
     }
 </script>

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.html

@@ -23,5 +23,5 @@
 	<!-- AI结果覆盖层 -->
 	<viewMask ref="viewMask" style="z-index: 13;"></viewMask>
 	<!-- 生成截屏的画布对象 -->
-	<canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px','top':'100vh'}"></canvas>
+	<!-- <canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px','top':'100vh'}"></canvas> -->
 </div>

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -60,6 +60,7 @@
 			}
 			let unit = screenWidth / 750;//单位rpm 对应 px 的值
 			this.canvasHeight = screenHeight - (600 * unit) + (40 * unit);
+			// webglCom.setHeight(this.canvasHeight);
 		},
 		// computed: {
 		// 	curHouseObj() {
@@ -85,7 +86,7 @@
 				}
 			},
 			clearHandle(){
-				this.clearEvent();
+				// webglCom.clearEvent();
 			},
 			save(){
 				this.$refs.viewMask.save();//下载

src/pages/webgl_rxdz_test/webgl_rxdz_test.html

@@ -1,9 +1,7 @@
-<div class="map" style="position: absolute;width: 100%;height: 100%;z-index: 1;">
+<div class="map" style="position: absolute;width: 100%;height: 100%;">
 	<mynavbar :barData='navbar'/>
 	<!-- 提交按钮 -->
-	<!-- <div class="submit-btn" @click="submitHouse" v-if="styleType==1">提交</div> -->
-	<div class="area-view">
-		<!-- <div>总面积：{{layoutArea}}<span style="font-weight: 700;">㎡</span></div> -->
+	<!-- <div class="area-view">
 		<div class="rows style1">
 			<div v-if="changeArea" class="reduce">
 				<div>{{changeArea < 0 ? '减少':'增加'}}</div>
@@ -19,19 +17,13 @@
 	<canvas id="glcanvas" width="100vw" height="100vh" ref="glcanvas"
 	 :style="{'height':canvasHeight+'px'}">
 		你的浏览器似乎不支持或者禁用了 HTML5 <code>&lt;canvas&gt;</code> 元素。
-	</canvas>
+	</canvas> -->
 	<!-- 主要操作视图 -->
-	<viewShell ref="viewShell" pageType="1" :overChange="overChange" :houseObj="curHouseObj" 
-	@curSpaceChange="curSpaceChange"></viewShell>
+	<viewShell ref="viewShell" pageType="1" :curHouseObj="curHouseObj"></viewShell>
 	<!-- @click="goRoam(gltf)" -->
-	<div v-show="showLables && gltf.text.length>0 && gltf.transform" v-for="(gltf,index) in lableItem" :key="index" class="word-view"
+	<!-- <div v-show="showLables && gltf.text.length>0 && gltf.transform" v-for="(gltf,index) in lableItem" :key="index" class="word-view"
 	:style="{'transform':gltf.transform}" >
 		<div @click="selectSpaceHandle(gltf)" v-if="styleType==2" user-select="false" :class="['number-view ',(index+1)>9?'number-more':'',currentChangeSpaceId==gltf.spaceId?' active':'']">{{gltf.spaceIndex+1}}</div>
 		<div @click="selectSpaceHandle(gltf)" v-else user-select="false" class="word" :class="currentChangeSpaceId==gltf.spaceId?'active':''">{{gltf.text}}></div>
-		<!-- 更改功能按钮 -->
-		<!-- <div class="change-view rows justify-center" @click="enterPlot(gltf)" v-if="selectSpace && selectSpace.spaceId==gltf.spaceId">更改功能</div> -->
-	</div>
-	<!-- <div id="labels"></div> -->
-	<!-- 左侧操作区域 -->
-	<!-- <left-operate-comp @operateHandle="operateHandle"></left-operate-comp> -->
+	</div> -->
 </div>