优化

src/App.vue

@@ -13,7 +13,7 @@
 				<div class="loadingMsg">{{loadingMsg}}</div>
 			</div>
 		</div>
-		<webglCom ref="webglCom"></webglCom>
+		<webglCom ref="webglCom" v-if="webglShow"></webglCom>
 	</div>
 </template>
 
@@ -33,6 +33,41 @@
 		// 		reload: this.reload,
 		// 	};
 		// },
+		computed: {
+			loading() {
+				return this.$store.state.loading;
+			},
+			loadingMsg() {
+				if (this.$store.state.loadingMsg) {
+					return this.$store.state.loadingMsg;
+				} else {
+					return "正在查询，请耐心等待";
+				}
+			},
+			webglShow() {
+				return this.$store.state.webglShow;
+			},
+		},
+		watch: {
+			loading: {
+				handler(newVal) {
+					if (!newVal) {
+						this.$store.state.loadingMsg = ''
+					}
+				}
+			},
+			webglShow: {
+				handler(newVal) {
+					console.warn("****webglShow**",newVal)
+					if(newVal){
+						setTimeout(()=>{
+							window.webglCom = this.$refs.webglCom;//定义全局webgl对象
+							console.warn("****webglShow1**",newVal,window.webglCom)
+						},30)
+					}
+				}
+			},
+		},
 		data() {
 			return {
 				themeColor: "rgba(0,97,232,1)",
@@ -80,28 +115,6 @@
 			// window.onerror = function(message,source,line,column,error) {
 			// };
 		},
-		watch: {
-			loading: {
-				handler(newVal) {
-					if (!newVal) {
-						this.$store.state.loadingMsg = ''
-					}
-				}
-			},
-			
-		},
-		computed: {
-			loading() {
-				return this.$store.state.loading;
-			},
-			loadingMsg() {
-				if (this.$store.state.loadingMsg) {
-					return this.$store.state.loadingMsg;
-				} else {
-					return "正在查询，请耐心等待";
-				}
-			}
-		},
 		mounted() {
 			// 禁止图片单机事件，防止出现图片点击浏览器自动预览功能
 			document.body.addEventListener("click", function(e) {

src/components/newBottomCom/viewCareful/viewCareful.vue

@@ -21,12 +21,6 @@
 			}
 		},
 		props:{
-			curHouseObj: {//当前展示的户型
-				type: Object,
-				default: () => {
-					return null
-				}
-			},
 		},
 		watch: {
 			curHouseObj: {
@@ -57,6 +51,9 @@
 			overChange() {
 				return this.$store.state.overChange;
 			},
+			curHouseObj() {
+				return this.$store.state.curHouseObj;
+			},
 		},
 		mixins: [],
 		async mounted() {//组件挂载时事件
@@ -77,7 +74,7 @@
 				this.carefulList = [];
 				this.lastCareList = [];
 				const spaceDetail = this.curHouseObj;
-				const spaceList = JSON.parse(spaceDetail.houseJson);
+				const spaceList = typeof(spaceDetail.houseJson)=="string" ? JSON.parse(spaceDetail.houseJson) : spaceDetail.houseJson;
 				let result = 0;
 				spaceList && spaceList.forEach((item,index)=>{
 					let minArea = 0;

src/components/newBottomCom/viewMask/viewMask.vue

@@ -195,17 +195,9 @@
 		watch: {
 			curHouseObj: {
 				handler(newVal,oldVal) {
+					console.warn("***curHouseObj-CHANGE-viewMask***", newVal)
 					if (newVal) {
-						console.warn("***curHouseObj-CHANGE-viewMask***", newVal)
-						let spaceDetail = newVal;
-						let spaceList = JSON.parse(spaceDetail.houseJson);
-						this.spaceList = spaceList;
-						this.datalist = [];
-						spaceList.forEach(it=>{
-							if(it.spaceName && !it.isSizeLock){
-								this.datalist.push(it);
-							}
-						})
+						this.initData(newVal);
 					}
 				},
 				immediate: true
@@ -213,11 +205,14 @@
 			curSpaceId: {
 				handler(newVal,oldVal) {
 					if (newVal) {
-						console.warn("***curSpaceId-CHANGE-viewMask***", newVal,oldVal)
-						// this.initData();
-						const spaceDetail = this.spaceList.find(it=>it.spaceId == newVal);
-						this.spaceObj = spaceDetail;
-						this.getAiBeautyFamily();
+						console.warn("***curSpaceId-CHANGE-viewMask***", newVal,oldVal,this.spaceList)
+						if(!this.spaceList){
+							this.initData(webglCom.curHouseObj,newVal);
+						}else{
+							const spaceDetail = this.spaceList.find(it=>it.spaceId == newVal);
+							this.spaceObj = spaceDetail;
+							this.getAiBeautyFamily();
+						}
 					}
 				},
 				immediate: true
@@ -240,23 +235,6 @@
 		// 	},
 		},
 		mounted() {//组件挂载时事件
-			// console.warn("***mounted-nav***",this.seedItem)
-			// if(this.seedItem){
-			// 	this.title = this.seedItem.seedText;
-			// }
-			// wx.checkJsApi({
-			// 	jsApiList: ['previewImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
-			// 	success: function(res) {
-			// 		// 以键值对的形式返回，可用的api值true，不可用为false
-			// 		// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
-			// 		console.warn("checkJsApi",res)
-			// 		// alert('su'+ JSON.stringify(res))
-			// 	},
-			// 	fail:(err)=>{
-			// 		console.warn("checkJsApi-err",err)
-			// 		// alert('err'+ JSON.stringify(err) )
-			// 	}
-			// })
 			this.screenWidth = window.screen.width;
 			this.screenHeight = window.screen.height;
 			if(window.innerWidth && window.screen.width){
@@ -271,6 +249,21 @@
 			this.stopInterval();
 		},
 		methods:{
+			initData(data,spaceId=''){
+				let spaceDetail = data || webglCom.curHouseObj;
+				let spaceList = typeof(spaceDetail.houseJson)=="string" ? JSON.parse(spaceDetail.houseJson) : spaceDetail.houseJson;
+				this.spaceList = spaceList;
+				this.datalist = [];
+				spaceList.forEach(it=>{
+					if(it.spaceName && !it.isSizeLock){
+						this.datalist.push(it);
+					}
+				})
+				if(spaceId){
+					this.spaceObj = this.spaceList.find(it=>it.spaceId == spaceId);
+					this.getAiBeautyFamily();
+				}
+			},
 			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
 			updataLable(){
 				let list = this.arrFrunList;
@@ -974,9 +967,9 @@
 				}
 				this.aiImagesList.push(_data);
 				this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
-				if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
-					this.$parent.clearHandle();
-				}
+				// if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
+				// 	this.$parent.clearHandle();
+				// }
 				let cpAiData = JSON.parse(JSON.stringify(this.aiData)) || []
 				if(cpAiData && this.curHouseObj && this.curHouseObj.houseFloor){//给上一个页面回传生成的数据
 					let space = cpAiData.find(it=>{
@@ -1014,7 +1007,7 @@
 			},
 			//空间数据整理
 			spaceAIHandle(){
-				let curHouseObj = webglCom.curHouseObj;//当前户型数据对象
+				let curHouseObj = this.curHouseObj;//当前户型数据对象
 				let aiImagesList = this.aiImagesList;//AI生成图数据对象
 				let wallList = webglCom.wallList;//当前户型墙体数据列表对象
 				let spaceList =  JSON.parse(curHouseObj.houseJson);
@@ -1050,7 +1043,7 @@
 				console.warn("***shottingImg***",shottingImg);
 				let userId = this.userId ? this.userId : '';
 				let curLayoutStruct = JSON.parse(getStorage('curLayoutStruct')) ;//获取楼层的数据-户型数组
-				let curHouseObj = webglCom.curHouseObj;//当前户型数据对象
+				let curHouseObj = this.curHouseObj;//当前户型数据对象
 				let curHouseType = getStorage('curHouseType');//把楼层的数据存入缓存中
 				let curHouseName = getStorage('curHouseName');//把楼层的数据存入缓存中
 				let param = {

src/components/newBottomCom/viewShell/viewShell.vue

@@ -93,6 +93,9 @@
 							webglCom.gradientResize(1,_starHeight,_endHeight);
 							webglCom.styleType = newVal;//变更为展开状态
 						}
+						if(window.currentPage){
+							window.currentPage.styleType = newVal;
+						}
 					}
 				},
 			},

src/components/newBottomCom/viewlayout/viewlayout.vue

@@ -62,9 +62,6 @@
 				handler(newVal,oldVal) {
 					if (newVal) {
 						console.warn("***curHouseObj-CHANGE-layout***", newVal)
-						// if((oldVal && oldVal.id != newVal.id) || !oldVal){
-						// 	this.initSpanceData();
-						// }
 						const spaceDetail = newVal;
 						this.spaceList = JSON.parse(spaceDetail.houseJson);
 					}
@@ -74,9 +71,6 @@
 				handler(newVal,oldVal) {
 					if (newVal) {
 						console.warn("***curSpaceId-CHANGE-layout***", newVal)
-						// if((oldVal && oldVal.id != newVal.id) || !oldVal){
-						// 	this.initSpanceData();
-						// }
 						let space = this.spaceList.find(it=>it.spaceId==this.curSpaceId);
 						if(space && space.spaceType==15){//X空间
 							this.showX = true;
@@ -107,42 +101,7 @@
 			console.warn("***detached-hide***")
 		},
 		methods: {
-			initSpanceData(){
-				this.carefulList = [];
-				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				const spaceDetail = this.curHouseObj;
-				const spaceList = JSON.parse(spaceDetail.houseJson);
-				spaceList && spaceList.forEach(async (item,index)=>{
-					let curSpaceArea = parseFloat(
-						(item.spaceWidth * item.spaceHeight) / 10000
-					).toFixed(1);
-					let minArea = 0;
-					let maxArea = 100;
-					if(item.hasOwnProperty('spaceWidthMin') && item.hasOwnProperty('spaceHeightMin')){
-						minArea = parseFloat((item.spaceWidthMin * item.spaceHeightMin) / 10000).toFixed(1);
-					}
-					if(item.hasOwnProperty('spaceWidthMax') && item.hasOwnProperty('spaceHeightMax')){
-						maxArea = parseFloat((item.spaceWidthMax * item.spaceHeightMax) / 10000).toFixed(1);
-					}
-					let text = item.spaceName;
-					if(text && !item.isSizeLock){
-						// let res = await requestConfig("chineseToPinyin", {chinese:text},true);
-						// let pinyin = res.single;
-						let data = {
-							spaceId:item.spaceId,
-							index:this.carefulList.length,
-							name:text,
-							namePY:'',
-							area:curSpaceArea,
-							percent:null,
-							minArea:minArea,	//最小面积
-							maxArea:maxArea,	//最大面积
-						}
-						this.carefulList.push(data)
-					}
-				})
-				console.warn("***viewlayout-init***", this.carefulList)
-			},
+			
 			//打开布局
 			openLayout(style) {
 				console.warn("***openLayout***",style)
@@ -180,313 +139,6 @@
 				// webglCom.goRoam1(this.curSpaceId);
 				this.$parent.$parent.goRoam1(this.curSpaceId);//向父页面通知空间被选中了
 			},
-			//获取录音权限
-			getRecordAuth: function() {
-				uni.getSetting({
-					success(res) {
-						console.log("succ")
-						console.log(res)
-						if (!res.authSetting['scope.record']) {
-							uni.authorize({
-								scope: 'scope.record',
-								success() {
-									// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
-									console.log("succ auth")
-								},
-								fail() {
-									console.log("fail auth")
-								}
-							})
-						} else {
-							console.log("record has been authed")
-						}
-					},
-					fail(res) {
-						console.log("fail")
-						console.log(res)
-					}
-				})
-			},
-			//求最长公共子集
-			findSubStr(str1, str2){
-			    if (str1.length > str2.length) {
-			      var temp = str1;
-			      str1 = str2;
-			      str2 = temp;
-			    }
-			    let len1 = str1.length;
-			    let len2 = str2.length;
-			    for (var j = len1; j > 0; j--) {
-			      for (var i = 0; i < len1 - j; i++) {
-			        var current = str1.substr(i, j);
-			        if (str2.indexOf(current) >= 0) {
-			          return current;
-			        }
-			      }
-			    }
-			    return "";
-			},
-			//声音变化
-			async textChange(text) {
-				if(webglCom.overChange){
-					uni.showToast({
-						title: '请慢一点',
-						icon: 'none',
-						duration: 2000
-					})
-					return false;
-				}
-				let res = await requestConfig("chineseToPinyin", {chinese:text});
-				let pinyin = res.single;
-				console.warn("****pinyin***",pinyin)
-				text = pinyin;
-				//全匹配轮一遍
-				let curSpace = this.carefulList.find(space=>{
-					return text.includes(space.namePY)
-				})
-				if(!curSpace){
-					let list = this.carefulList.map((space,index)=>{
-						let comStr = this.findSubStr(text, space.namePY + ' ');
-						return {
-							spaceId:space.spaceId,
-							namePY:space.namePY,
-							name:space.name,
-							comStr,
-							index,
-						}
-					})
-					//寻找5个字符串以上的
-					let tmpList = list.filter(it=>{
-						return it.comStr.length > 5;
-					})
-					if(tmpList && tmpList.length>0){
-						tmpList.sort((a, b) => a.comStr.length - b.comStr.length);
-						let index = tmpList[tmpList.length-1].index;//最大值在carefulList的序号
-						curSpace = this.carefulList[index];//
-					}else{
-						curSpace = this.lastSpace;
-					}
-				}
-				
-				//没有找到语音操作对象
-				if(!curSpace){
-					uni.showToast({
-						title: '请再说一次',
-						icon: 'none',
-						duration: 2000
-					})
-					return false;
-				}
-				this.lastSpace = curSpace;
-				
-				console.log("textChange：", curSpace,this.carefulList,text,this.bigWordPY,this.smaillWordPY);
-				
-				let biglist = this.bigWordPY.split(',').map(word=>{
-					return text.lastIndexOf(word)
-				})
-				let smalllist = this.smaillWordPY.split(',').map(word=>{
-					return text.lastIndexOf(word)
-				})
-				let a = Math.max(...biglist);
-				let b = Math.max(...smalllist);
-				let big = false;
-				if(a==-1 && b==-1){//都没命中
-					uni.showToast({
-						title: '请再说一次',
-						icon: 'none',
-						duration: 2000
-					})
-					return false;
-				}else if(a>-1 && b>-1){//两个都命中了
-					if(a > b){//放大靠后-命中靠后
-						big = true;
-					}else{
-						big = false;
-					}
-				}else if(a>-1){
-					big = true;
-				}
-				let _area = parseFloat(curSpace.area) * this.changeRate;
-				let data = {
-					spaceId:curSpace.spaceId,
-					area:_area,
-					isZoomIn:big,//true 放大 false 缩放
-				}
-				console.log("viewlayout-发送消息-空间变化: ",data,curSpace.area,big);
-				uni.showToast({
-					title: '正在变化，请稍后',
-					icon: 'none',
-					duration: 2000
-				})
-				// this.sendMessageAction(JSON.stringify(parmas));
-				this.$emit("curSpaceChange",data);//通知父组件-当前已经选中了户型大类
-			},
-			/**
-			 * 初始化语音识别回调
-			 * 绑定语音播放开始事件
-			 */
-			initRecord: function() {
-				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				//有新的识别内容返回，则会调用此事件
-				manager.onRecognize = (res) => {
-					let currentData = Object.assign({}, this.currentTranslate, {
-						text: res.result,
-					})
-					this.currentTranslate = currentData;
-					console.warn("***manager-正在录音***",this.currentTranslate)
-				}
-				// 识别结束事件
-				manager.onStop = (res) => {
-					console.warn("***manager-识别结束0***",this.recording,res)
-					// this.textChange("客厅大一点");
-					if(this.recording==false){//已经强制结束识别了
-						return false;//不识别
-					}
-					let text = res.result
-					if (text == '') {//识别内容为空时的反馈
-						this.showRecordEmptyTip()
-						return
-					}
-					console.warn("***manager-识别结束***",text);
-					let param = {
-						type: 'CLK', //埋点类型
-						clkId: 'clk_2cmina_23080407', //点击ID
-						clkName: 'voice_clk', //点击前往的页面名称
-						clkParams: {
-							locusName: "语音调整",
-							text:text
-						}
-					};
-					// util.trackRequest(param);
-					text = text.replaceAll(/，|。/ig, "");
-					this.textChange(text);
-					this.stopRecordHandle();
-					//翻译
-					// this.translateText(currentData, this.dialogList.length)
-				}
-
-				// 识别错误事件
-				manager.onError = (res) => {
-					console.warn("***manager-识别错误***",this.recording,res)
-					if(this.recording == false){
-						return false;
-					}
-					this.stopRecordHandle();
-					uni.showToast({
-						title: '请再说一次',
-						icon: 'none',
-						duration: 2000
-					})
-				}
-				// 语音播放开始事件
-				uni.onBackgroundAudioPlay(res => {
-					const backgroundAudioManager = uni.getBackgroundAudioManager()
-					let src = backgroundAudioManager.src
-					
-					this.currentTranslateVoice = src;
-				})
-			},
-			//执行停止录音的方法
-			stopRecordHandle(){
-				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				this.recording = false;
-				this.$emit("streamRecordEnd");//通知父组件
-				// currPage.voiceMaskChange(false);//关闭蒙层
-			},
-			//用户语音为空
-			showRecordEmptyTip(){
-				this.stopRecordHandle();
-				uni.showToast({
-					title: '告诉我您的想法',
-					icon: 'none',
-					duration: 2000
-				})
-			},
-			catchTapEvent:function(){
-				return false;
-			},
-			/**
-			 * 按住按钮开始语音识别
-			 */
-			streamRecord: function(e) {
-				// this.getRecordAuth();//获取录音权限
-				console.warn("streamrecord", e)
-				let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				// let buttonItem = detail.buttonItem || {}
-				manager.start({
-					lang: language[0].lang_content,
-				})
-				// this.recordStatus = 0;
-				this.clientX = 0;
-				this.clientY = 0;
-				this.startX = e.changedTouches[0].clientX;
-				this.startY = e.changedTouches[0].clientY;
-				this.recording = true;//录音中
-				currPage.voiceMaskChange(true);//显示蒙层
-				this.$emit("streamRecord");
-			},
-			mytouchmove(e) {
-				let startX = this.startX // 开始x坐标 
-				let startY = this.startY //开始y坐标
-				let touchMoveX = e.changedTouches[0].clientx //滑动变化坐标 
-				let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标 
-				this.clientX = touchMoveX - startX;
-				this.clientY = touchMoveY - startY;
-			},
-			angle(start,end){
-				let _X = end.X - start.X;
-				let _Y = end.Y - start.Y;
-				if(_X == 0) return 90;
-				return 360 * Math.atan((_Y / _X) / (2*Math.PI))
-			},
-			/**
-			 * 松开按钮结束语音识别
-			 */
-			streamRecordEnd: function(e) {
-				console.warn("streamRecordEnd" ,this.recording,e)
-				// let detail = e.detail || {} // 自定义组件触发事件时提供的detail对象
-				// let buttonItem = detail.buttonItem || {}
-
-				// 防止重复触发stop函数
-				if (this.recording==false) {
-					console.warn("has finished!")
-					return
-				}
-				let startX = this.startX; // 开始x坐标
-				let startY = this.startY; //开始y坐标
-				let touchMoveX = e.changedTouches[0].clientX; //滑动变化坐标 
-				let touchMoveY = e.changedTouches[0].clientY; //滑动变化坐标 
-				let angle = this.angle(
-				{
-					X: startX,
-					Y: startY
-				}, {
-					X: touchMoveX,
-					Y: touchMoveY
-				})
-				//滑动角度超过45retrun
-				// console.log(Math.abs(angle), "Math.abs(angle)")
-				if (Math.abs(angle) > 45){//上下滑动
-					if (startY > touchMoveY && (startY - touchMoveY)>20) { //上滑
-						console.warn("***touchend-上滑***",startY - touchMoveY);
-						this.stopRecordHandle();//停止录音了
-						manager.stop()
-						uni.showToast({
-							title: '识别已取消!',
-							icon: 'none',
-							duration: 2000
-						})
-					}else{
-						this.stopRecordHandle();//停止录音了
-						manager.stop()
-						console.warn("streamRecordEnd-stop1" ,this.recording)
-					}
-				}else{
-					this.stopRecordHandle();//停止录音了
-					manager.stop();
-					console.warn("streamRecordEnd-stop2" ,this.recording)
-				}
-			},
 		}
 	}
 </script>

src/components/newQCCom/viewMask/viewMask.vue

@@ -165,55 +165,69 @@
 				// dialogVisible: false,
 				// dialogAIVisible: false,
 				datalist:[],
+				spaceList:[],
+				spaceObj:null,
 				connectUsImg:'',
-				curSpaceId:'',
 			}
 		},
 		props:{
-			spaceObj: {
-				type: Object,
-				default: null,
+		},
+		computed:{
+			curSpaceId() {
+				return this.$store.state.curSpaceId;
+			},
+			curHouseObj() {
+				return this.$store.state.curHouseObj;
 			},
-			spaceList: {
-				type: [Array ,Object],
-				default: [],
+			arrFrunList() {
+				return webglCom.arrFrunList;
+			},
+			aiData() {
+				return this.$store.state.aiData;
+			},
+			userId() {
+				return this.$store.state.userId;
 			},
-			layoutList:{
-				type: [Array ,Object],
-				default: [],
-			}
 		},
 		watch: {
-			spaceObj(newVal, oldVal) {
-				if (newVal == null) {
-					return;
-				}
-				console.log("当前空间数据view-mark-watch:", newVal,newVal.layoutSpaceName,newVal.layoutSpaceType);
-				this.getAiBeautyFamily();
-				// this.curSpaceArea = parseFloat(
-				// 	(newVal.spaceWidth * newVal.spaceHeight) / 10000
-				// ).toFixed(2);
-				// this.getOverallArrangementDetailsList();
+			curHouseObj: {
+				handler(newVal,oldVal) {
+					if (newVal) {
+						console.warn("***curHouseObj-CHANGE-viewMask***", newVal)
+						let spaceDetail = newVal;
+						let spaceList = JSON.parse(spaceDetail.houseJson);
+						this.spaceList = spaceList;
+						this.datalist = [];
+						spaceList.forEach(it=>{
+							if(it.spaceName && !it.isSizeLock){
+								this.datalist.push(it);
+							}
+						})
+					}
+				},
+				immediate: true
 			},
-			spaceList(newVal, oldVal) {
-				if (newVal == null) {
-					return;
-				}
-				console.log("当前空间数据spaceList-watch:", newVal);
-				if(newVal && newVal.length>0){
-					this.datalist = [];
-					newVal.forEach(it=>{
-						if(it.spaceName && !it.isSizeLock){
-							this.datalist.push(it);
-						}
-					})
-				}
+			curSpaceId: {
+				handler(newVal,oldVal) {
+					if (newVal) {
+						console.warn("***curSpaceId-CHANGE-viewMask***", newVal,oldVal)
+						// this.initData();
+						const spaceDetail = this.spaceList.find(it=>it.spaceId == newVal);
+						this.spaceObj = spaceDetail;
+						this.getAiBeautyFamily();
+					}
+				},
+				immediate: true
 			},
-			layoutList(newVal, oldVal) {
-				if (newVal == null) {
-					return;
-				}
-				this.updataLable();
+			arrFrunList: {
+				handler(newVal,oldVal) {
+					console.warn("***arrFrunList-CHANGE-viewMask***", newVal,oldVal)
+					if (newVal == null) {
+						return;
+					}
+					this.updataLable();
+				},
+				immediate: true
 			},
 		},
 		filters:{
@@ -223,23 +237,6 @@
 		// 	},
 		},
 		mounted() {//组件挂载时事件
-			// console.warn("***mounted-nav***",this.seedItem)
-			// if(this.seedItem){
-			// 	this.title = this.seedItem.seedText;
-			// }
-			// wx.checkJsApi({
-			// 	jsApiList: ['previewImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
-			// 	success: function(res) {
-			// 		// 以键值对的形式返回，可用的api值true，不可用为false
-			// 		// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
-			// 		console.warn("checkJsApi",res)
-			// 		// alert('su'+ JSON.stringify(res))
-			// 	},
-			// 	fail:(err)=>{
-			// 		console.warn("checkJsApi-err",err)
-			// 		// alert('err'+ JSON.stringify(err) )
-			// 	}
-			// })
 			this.screenWidth = window.screen.width;
 			this.screenHeight = window.screen.height;
 			if(window.innerWidth && window.screen.width){
@@ -258,18 +255,10 @@
 			console.warn("***beforeDestroy***");//更新到页面上的数据
 			this.stopInterval();
 		},
-		computed: {
-			aiData() {
-				return this.$store.state.aiData;
-			},
-			curHouseObj() {
-				return this.$store.state.curHouseObj;
-			},
-		},
 		methods:{
 			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
 			updataLable(){
-				let list = this.layoutList;
+				let list = this.arrFrunList;
 				this.datalist.forEach(lable=>{
 					if(lable.spaceType==15){
 						let layoutId = lable.layoutId;
@@ -293,7 +282,11 @@
 			},
 			//切换空间
 			changeSpace(item){
-				this.$parent.changeSpace(item.spaceId);
+				if(item.spaceId == this.spaceObj.spaceId){
+					return false
+				}
+				webglCom.changeSpace(item.spaceId);
+				this.spaceObj = item;
 				let param = {
 					type: 'CLK', //埋点类型
 					clkId: 'clk_2cmina_23080417', //点击ID
@@ -307,24 +300,6 @@
 				};
 				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;
@@ -486,7 +461,6 @@
 			},
 			mynavigateFuc(e) {
 				if (e) {
-					// this.$parent.clearHandle();
 					let param = {
 						type: 'CLK', //埋点类型
 						clkId: 'clk_2cmina_23080408', //点击ID
@@ -558,15 +532,13 @@
 				
 				// this.inputBase64Url = await this.shottingAction(2);//开始截图-返回的是base64的数据
 				// this.startServer();
-				// let base64 = await this.$parent.shottingAction(2);//开始截图-返回的是base64
-				let shottingImg = await this.$parent.shottingAction();//开始截图-返回的是图片地址
+				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";//压缩图片
 				this.shottingImg = shottingImg;
 				this.changeImg2Base64(this.shottingImg, false);
 				console.warn("***shottingImg***",this.shottingImg)
@@ -1011,9 +983,9 @@
 				}
 				this.aiImagesList.push(_data);
 				this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
-				if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
-					this.$parent.clearHandle();
-				}
+				// if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
+				// 	this.$parent.clearHandle();
+				// }
 				this.stopInterval();
 				if(this.aiImagesList.length>1){
 					setTimeout(()=>{
@@ -1023,9 +995,9 @@
 			},
 			//空间数据整理
 			spaceAIHandle(){
-				let curHouseObj = this.$parent.curHouseObj;//当前户型数据对象
+				let curHouseObj = this.curHouseObj;//当前户型数据对象
 				let aiImagesList = this.aiImagesList;//AI生成图数据对象
-				let wallList = this.$parent.wallList;//当前户型墙体数据列表对象
+				let wallList = webglCom.wallList;//当前户型墙体数据列表对象
 				let spaceList =  JSON.parse(curHouseObj.houseJson);
 				
 				//遍历当前户型下的每一个空间

src/components/newQCCom/viewShell/viewShell.vue

@@ -96,6 +96,9 @@
 							webglCom.gradientResize(1,_starHeight,_endHeight);
 							webglCom.styleType = newVal;//变更为展开状态
 						}
+						if(window.currentPage){
+							window.currentPage.styleType = newVal;
+						}
 					}
 				},
 			},

src/components/newQCCom/viewlayout/viewlayout.vue

@@ -46,12 +46,6 @@
 			}
 		},
 		props: {
-			// houseList: {//当前户型所有的户型详情，可以切换
-			// 	type: Array,
-			// 	default: () => {
-			// 		return []
-			// 	}
-			// },
 			curHouseObj: {//当前展示的户型
 				type: Object,
 				default: () => {
@@ -64,21 +58,10 @@
 			}
 		},
 		watch: {
-			// houseList: {
-			// 	handler(newVal) {
-			// 		if (newVal) {
-			// 			console.warn("***houseList-change***", newVal)
-			// 			this.initData(newVal);
-			// 		}
-			// 	},
-			// },
 			curHouseObj: {
 				handler(newVal,oldVal) {
 					if (newVal) {
 						console.warn("***curHouseObj-CHANGE-layout***", newVal)
-						// if((oldVal && oldVal.id != newVal.id) || !oldVal){
-						// 	this.initSpanceData();
-						// }
 						const spaceDetail = newVal;
 						this.spaceList = JSON.parse(spaceDetail.houseJson);
 					}
@@ -118,85 +101,6 @@
 			console.warn("***detached-hide***")
 		},
 		methods: {
-			initSpanceData(){
-				this.carefulList = [];
-				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				const spaceDetail = this.curHouseObj;
-				const spaceList = JSON.parse(spaceDetail.houseJson);
-				spaceList && spaceList.forEach(async (item,index)=>{
-					let curSpaceArea = parseFloat(
-						(item.spaceWidth * item.spaceHeight) / 10000
-					).toFixed(1);
-					let minArea = 0;
-					let maxArea = 100;
-					if(item.hasOwnProperty('spaceWidthMin') && item.hasOwnProperty('spaceHeightMin')){
-						minArea = parseFloat((item.spaceWidthMin * item.spaceHeightMin) / 10000).toFixed(1);
-					}
-					if(item.hasOwnProperty('spaceWidthMax') && item.hasOwnProperty('spaceHeightMax')){
-						maxArea = parseFloat((item.spaceWidthMax * item.spaceHeightMax) / 10000).toFixed(1);
-					}
-					let text = item.spaceName;
-					if(text && !item.isSizeLock){
-						// let res = await requestConfig("chineseToPinyin", {chinese:text},true);
-						// let pinyin = res.single;
-						let data = {
-							spaceId:item.spaceId,
-							index:this.carefulList.length,
-							name:text,
-							namePY:'',
-							area:curSpaceArea,
-							percent:null,
-							minArea:minArea,	//最小面积
-							maxArea:maxArea,	//最大面积
-						}
-						this.carefulList.push(data)
-					}
-				})
-				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,this.curSpaceId)
@@ -231,7 +135,7 @@
 					}
 				};
 				util.trackRequest(param);
-				webglCom.goRoam1(this.curSpaceId);
+				this.$parent.$parent.goRoam1(this.curSpaceId);//向父页面通知空间被选中了
 			},
 			
 		}

src/components/webglCom/webglCom.html

@@ -2,7 +2,7 @@
 <div class="webgl-view" :class="showWebgl?'show':'hide'">
 	<!-- 户型面积相关视图 -->
 	<div class="area-view" v-if="showArea">
-		<div>总面积：{{layoutArea}}<span style="font-weight: 700;">㎡</span></div>
+		<div v-if="curLayoutStruct">总面积：{{layoutArea}}<span style="font-weight: 700;">㎡</span></div>
 		<div class="rows style1">
 			<div v-if="changeArea" class="reduce">
 				<div>{{changeArea < 0 ? '减少':'增加'}}</div>
@@ -14,13 +14,16 @@
 			</div>
 		</div>
 	</div>
-	<div id="mapDiv" ref="webgl"></div>
-	<canvas id="glcanvas" width="100vw" height="100vh" ref="glcanvas"
-	 :style="{'height':canvasHeight+'px'}">
-		你的浏览器似乎不支持或者禁用了 HTML5 <code>&lt;canvas&gt;</code> 元素。
-	</canvas>
+	<div id="mapDiv" ref="webgl">
+		<canvas id="glcanvas" width="100vw" height="100vh" ref="glcanvas"
+		 :style="{'height':canvasHeight+'px'}">
+			你的浏览器似乎不支持或者禁用了 HTML5 <code>&lt;canvas&gt;</code> 元素。
+		</canvas>
+	</div>
+	
 	<!-- 空间悬浮文字说明 -->
-	<div v-show="showLables && gltf.text.length>0 && gltf.transform" v-for="(gltf,index) in lableItem" :key="index" 
+	<div v-show="showLables && gltf && gltf.text && gltf.text.length>0 && gltf.transform" 
+		v-for="(gltf,index) in lableItem" :key="index" 
 		class="word-view"
 		:style="{'transform':gltf.transform}" @click="selectSpaceHandle(gltf)">
 		<div v-if="styleType==2" user-select="false" :class="['number-view ',(index+1)>9?'number-more':'',currentChangeSpaceId==gltf.spaceId?' active':'']">{{gltf.spaceIndex+1}}</div>

src/components/webglCom/webglCom.vue

@@ -165,7 +165,7 @@
 			this.starRender = starRender;//对外暴露启动渲染的方法
 			this.stopRender = stopRender;//对外暴露停止渲染的方法
 			this.cameraInit = cameraInit;
-			this.resetControl = resetControl;
+			// this.resetControl = resetControl;
 			this.setHeight = setHeight;
 			
 			this.enterRoom = enterRoom;
@@ -243,7 +243,7 @@
 				attendEvent();	//注册监听事件
 				starRender();	//启动渲染
 				cameraInit();	//初始化摄像头
-				controls.saveState();//保存当前控制器的状态
+				// controls.saveState();//保存当前控制器的状态
 			}
 			function saveState(){
 				controls.saveState();//保存当前控制器的状态
@@ -259,17 +259,17 @@
 					name:name,
 					position:position,
 				}
-				// webglStatus
 			}
 			//初始化相机位置
 			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);
+				controls.target.set(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
 			}
 			//初始状态-
-			function resetControl(){
-				controls.reset();
-			}
+			// function resetControl(){
+			// 	controls.reset();
+			// }
 			function onWindowResize() {
 			    camera.aspect = screenWidth / that.canvasHeight;
 			    camera.updateProjectionMatrix();
@@ -297,13 +297,16 @@
 				renderer && renderer.domElement && renderer.domElement.addEventListener('touchstart', onPointerStart, false);
 				renderer && renderer.domElement && renderer.domElement.addEventListener('touchend', onPointerUp, false);
 			}
-			function leaveRoom(){//取消监听的事件
+			function leaveRoom(type=true){//取消监听的事件
 				raycaster = null;
 				that.circleGroup = null;
-				that.canvasHeight = that.lastCanvasHeight;//还原回去之前的高度
-				camera.aspect = screenWidth / that.canvasHeight;
-				camera.updateProjectionMatrix();
-				renderer.setSize(screenWidth, that.canvasHeight);
+				if(that.lastCanvasHeight&&type){
+					that.canvasHeight = that.lastCanvasHeight;//还原回去之前的高度
+					camera.aspect = screenWidth / that.canvasHeight;
+					camera.updateProjectionMatrix();
+					renderer.setSize(screenWidth, that.canvasHeight);
+				}
+				console.warn("leaveRoom",that.lastCanvasHeight,type);
 				controls.removeEventListener('change', onControlChange,false);
 				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart, false);
 				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp, false);
@@ -629,10 +632,10 @@
 			function moveMeshCenterHandle(mesh = null,noChangeColor = true){
 				if(mesh){//如果传入了模型，则取模型
 					let spaceId = mesh.spaceId;//空间id
-					if(chooseMesh && spaceId == chooseMesh.spaceId){
-						console.warn("**moveMeshCenterHandle-重复选中了***")
-						return false;
-					}
+					// if(chooseMesh && spaceId == chooseMesh.spaceId){
+					// 	console.warn("**moveMeshCenterHandle-重复选中了***")
+					// 	return false;
+					// }
 					chooseMesh = mesh;
 				}
 				if(!chooseMesh){
@@ -662,7 +665,8 @@
 					oldUp = camera.up;//俯视状态
 					newUp = camera.up;
 				}
-				console.warn("**moveMeshCenter***",isUserContorl,spaceObj,JSON.stringify(camera.position),JSON.stringify(controls.target)
+				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,1000);
 				setTimeout(()=>{
@@ -729,7 +733,10 @@
 				let _jisua = that.canvasHeight;
 				let lastHeight = _jisua + (_height * unit);//动画结束时的高度值； 单位 px
 				that.canvasHeight = lastHeight;//触发css动画
-				console.warn("***gradientResize***",lastHeight,_jisua,startHeight,endHeight)
+				console.warn("***gradientResize***",lastHeight,_jisua,startHeight,endHeight);
+				if(window.currentPage){
+					window.currentPage.canvasHeight = endHeight;
+				}
 				// that.showLables = false;
 				var tween = new TWEEN.Tween({
 				    h1: _jisua,
@@ -826,6 +833,7 @@
 			// console.warn("***detached-hide***")
 		},
 		methods: {
+			setHeight(){},
 			positionCamer(){},
 			//户型大类发生了变更-针对多层户型
 			curHouseTypeChange(item){
@@ -840,7 +848,8 @@
 			clearWebGl(){
 				let that = this;
 				let deleList = that.scene && that.scene.children.filter(object=>{
-					if(object.userType=="mesh" || object.userType=="layoutMesh"){
+					//&& (object.userType=="mesh" || object.userType=="layoutMesh")
+					if(object instanceof THREE.Mesh || object instanceof THREE.InstancedMesh){
 						return object
 					}
 				})
@@ -849,13 +858,25 @@
 					that.showLables = false;//隐藏lable
 					that.scene.remove(...deleList);
 				}
+				this.gltfWalls = [];
+				this.gltfSpaces = [];
+				this.gltfSpaceRoofs = [];
+				this.instancedMeshList = [];
+				this.instancedSpaceMeshList = [];
+				this.instancedFurList = [];
+				this.lableItem = [];
+				this.gltfLayouts = [];
+				this.wallList = [];
+				this.changeArea = 0;
 			},
 			//户型楼层发生了变更-针对多层户型
 			curHouseFloorChange(item){
 				let that = this;
 				this.curHouseFloor = item.houseFloor || 1;//当前选中的户型楼层
 				this.curHouseObj = item;//更新当前具体的户型数据
-				this.$store.dispatch('setCurHouseObj', this.curHouseObj);
+				if(this.$route.name!="webgl_rxdz_look" && this.$route.name!="webgl_rxdz_test_look"){
+					this.$store.dispatch('setCurHouseObj', this.curHouseObj);
+				}
 				// this.id = this.curHouseObj.id;
 				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
 				this.clearWebGl();
@@ -863,18 +884,7 @@
 			},
 			//绘制并且渲染当前户型-初始化
 			houseInit(){
-				this.gltfWalls = [];
-				this.gltfSpaces = [];
-				this.gltfSpaceRoofs = [];
-				this.instancedMeshList = [];
-				this.instancedSpaceMeshList = [];
-				this.lableItem = [];
-				this.gltfLayouts = [];
-				this.instancedFurList = [];
-				this.wallList = [];
-				this.changeArea = 0;
-
-				this.resetControl();
+				// this.reset();
 				setTimeout(()=>{
 					this.loadSpace();//加载户型的空间
 				}, 100);
@@ -884,8 +894,8 @@
 					window.currentPage.navbar.title = "空间定制";
 					document.title = '空间定制';
 				}
-				this.sumArea = this.curHouseObj.houseArea;
-				this.fixedArea = this.curHouseObj.houseArea;
+				this.sumArea = this.curHouseObj.houseArea || '';
+				this.fixedArea = this.curHouseObj.houseArea || '';
 				if(this.curHouseObj.houseArea<=100){//面积小于100平米，则摄像头靠近一点
 					this.cameraStarPosition.y = 20;
 				}else if(this.curHouseObj.houseArea>100){
@@ -893,6 +903,17 @@
 				}
 				this.cameraInit();
 			},
+			moveMeshCenterIm(houseObj){
+				const spaceDetail = houseObj;
+				const spaceList = typeof(spaceDetail.houseJson)=="string" ? JSON.parse(spaceDetail.houseJson) : spaceDetail.houseJson;
+				let element = this.spaceList[0];
+				spaceList.forEach(it=>{
+					if(it.isSelected){ // 默认选中空间
+					    element = it;
+					}
+				})
+				this.moveMeshCenter(element);
+			},
 			// 绘制地板
 			async loadSpace(){
 				this.spaceList = [];
@@ -987,10 +1008,11 @@
 					// this.setSpaceListWallInfo();
 					this.$nextTick(()=>{
 						this.moveMeshCenter(this.curSpaceObj);
-						// this.myLoadingStatus = false;
-						setTimeout(()=>{
-							this.addWordLabel(); // 添加文字标签
-						}, 610);
+						// if(this.$route.name!="webgl_rxdz_look" && this.$route.name!="webgl_rxdz_test_look"){
+							setTimeout(()=>{
+								this.addWordLabel(); // 添加文字标签
+							}, 610);
+						// }
 						// 设置空间数组的墙体信息 
 					})
 				})
@@ -1062,10 +1084,11 @@
 				if(spaceId == this.curSpaceObj.spaceId){
 					return false;
 				}
-				this.curSpaceObj = this.spaceList.find(it=>it.spaceId == spaceId);
-				if(this.isIOS){
-					this.furnSingleSpaceHandle(this.curSpaceObj);
-				}
+				// this.curSpaceObj = this.spaceList.find(it=>it.spaceId == spaceId);
+				// if(this.isIOS){
+				// 	this.furnSingleSpaceHandle(this.curSpaceObj);
+				// }
+				this.curSpaceSelect(spaceId,false);
 				this.positionCamer(this.curSpaceObj,true);
 				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
 				let title =  this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
@@ -1094,7 +1117,9 @@
 				this.curSpaceObj = space;
 				this.currentChangeSpaceId = spaceId;
 				this.$store.state.curSpaceId = spaceId;
-				this.changeSpaceColor(spaceId,1);//设置选中空间的颜色
+				if(window.currentPage.pvCurPageName == 'home_show'){
+					this.changeSpaceColor(spaceId,1);//设置选中空间的颜色
+				}
 				if(moveCenter){
 					this.moveMeshCenter(space);//移动到当前空间
 				}
@@ -1166,10 +1191,10 @@
 				}
 			},
 			//离开具体空间时的处理
-			spaceLeave(){
+			spaceLeave(type=true){
 				this.showArea = true;
 				this.showLables = true;
-				this.leaveRoom();
+				this.leaveRoom(type);
 			}
 		}
 	}

src/mixins/commonPageMethod.js

@@ -23,20 +23,28 @@ export default {
 			util.trackRequest(param);//发送统一PV埋点
 			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()
+				if(this.$route.name=="webgl_rxdz" || this.$route.name=="webgl_rxdz_test"){
+					console.warn("***webgl_rxdz_test***",this.canvasHeight)
+					// window.webglCom.setHeight(this.canvasHeight);
+					// window.webglCom.cameraInit();
+					window.webglCom.styleType = this.styleType;
+					// webglCom.moveMeshCenterIm(this.curHouseObj);
+				}
 			}
-		}else{
-			if(window.webglCom){
-				window.webglCom.showWebgl = false;//隐藏webgl
-				mapVue.$forceUpdate()
+			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(){
@@ -64,49 +72,39 @@ export default {
 		// 在离开当前路由前执行的方法
 		// 例如保存表单数据、清理定时器等操作
 		this.pvCloseHandle();
-		if(window.webglCom && window.webglCom.stopRender && typeof(window.webglCom.stopRender)==='function'){
-			window.webglCom.stopRender();
-			if(from.name=="webgl_rxdz_roam"){//离开具体的空间详情页面，则需要先注销限制条件
-				window.webglCom.spaceLeave();
+		if(window.webglCom){
+			// window.webglCom.stopRender();
+			if(from.name=="webgl_rxdz" || from.name=="webgl_rxdz_test"){//从俯瞰模式页面退出
+				window.webglCom.saveState();//保存当前的控制器状态
 			}
-			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()
+			if(from.name=="webgl_rxdz_roam" || from.name=="webgl_rxdz_test_roam"){//从漫游模式退出
+				window.webglCom.spaceLeave();//执行离开的方法，清空限制空间的处理
 			}
 		}
-		
 		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(window.webglCom){
+			if(to.name=="webgl_rxdz_roam" || to.name=="webgl_rxdz_test_roam"){//进入漫游模式
+				window.webglCom.spaceEnter();//保存当前的控制器状态
+			}
+			if(to.name=="webgl_rxdz" && from.name=="webgl_rxdz_roam"){//从漫游模式返回俯瞰模式
+				// window.webglCom.reset()
+			}
+			if(to.name=="webgl_rxdz_test" && from.name=="webgl_rxdz_test_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(){
-		console.warn("activated:",this.pvId); 
+	activated(options){
+		console.warn("activated:",this.pvId,options); 
 		if(this.pvId && this.$route.meta.keepAlive){
 			window.removeEventListener('beforeunload', this.pvCloseHandle);
 			window.removeEventListener('visibilitychange', this.visibilitychange);
@@ -123,6 +121,27 @@ export default {
 			util.trackRequest(param);//发送统一PV埋点
 			window.addEventListener('beforeunload', this.pvCloseHandle);
 			window.addEventListener('visibilitychange', this.visibilitychange);
+			if(window.webglCom){
+				if(this.$route.name=="webgl_rxdz" || this.$route.name=="webgl_rxdz_test"){
+					console.warn("***webgl_rxdz***",this.canvasHeight)
+					window.webglCom.setHeight(this.canvasHeight);
+					window.webglCom.cameraInit();
+					window.webglCom.styleType = this.styleType;
+					webglCom.moveMeshCenterIm(this.curHouseObj);
+				}
+				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()
+					}
+				}
+			}
 		}
 	},
 	methods: {

src/mixins/wallMethod.js

@@ -1311,6 +1311,7 @@ export default {
 			}
 			setTimeout(() => {
 				// that.updataPageData();
+				webglCom.overChange = false;//变形开始 防止在形变结束前，再次形变
 				that.$store.state.overChange = false;
 				that.callBackFun && that.callBackFun(true);
 				// that.calculateLayoutModelSize(); //重新计算家具位置

src/pages/webgl_rxdz/webgl_rxdz.vue

@@ -45,12 +45,23 @@
 				curHouseObj:null,
 				curHouseType:'',
 				curHouseName:'',
+				canvasHeight:'',
 			}
 		},
 		mounted() {
 			console.log("***onLoad-webgl_rxdz***", this.$route.query);
 			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){
+				screenWidth = Math.min(window.innerWidth,window.screen.width)
+			}
+			if(window.innerHeight && window.screen.height){
+				screenHeight = Math.min(window.innerHeight,window.screen.height)
+			}
+			let unit = screenWidth / 750;//单位rpm 对应 px 的值
+			this.canvasHeight = screenHeight - (200 * unit) + (20 * unit);
 			this.getInitData()
 		},
 		computed:{
@@ -151,6 +162,10 @@
 			},
 			//跳往下一个页面
 			async goRoam1(spaceId){
+				if(webglCom.overChange){
+					this.$message.warning("空间正在调整");
+					return false
+				}
 				let gltf = webglCom.lableItem.find(it=>it.spaceId==spaceId);
 				let shottingImg = await webglCom.creatShotImg();//获取截图
 				setStorage('shottingImg', shottingImg);//把空间选择的数据存入本地缓存里面，方便后续使用
@@ -175,21 +190,19 @@
 					return false;
 				}
 				this.repeatFlag = true;
-				webglCom.saveState();//记录下当前的控制器状态
+				// webglCom.saveState();//记录下当前的控制器状态
 				router.push({
 					name: "webgl_rxdz_roam",
 					query:data
 				});
-				if(this.isIOS){
-					setStorage('curHouseObj', webglCom.curHouseObj);
-					setStorage('wallList', webglCom.wallList);
-				}
+				setStorage('curHouseObj', webglCom.curHouseObj);
+				setStorage('wallList', webglCom.wallList);
 				this.$store.dispatch('setCurHouseObj', webglCom.curHouseObj);
 				this.$store.dispatch('setWallList', webglCom.wallList);
-				// setTimeout(()=> {
+				setTimeout(()=> {
 					this.repeatFlag = false;
-					webglCom.spaceEnter();//通知webgl,页面切换到选中空间的详情页了
-				// }, 1000);
+					// webglCom.spaceEnter();//通知webgl,页面切换到选中空间的详情页了
+				}, 1000);
 			},
 
         }

src/pages/webgl_rxdz_houseList/webgl_rxdz_houseList.scss

@@ -1,7 +1,6 @@
 .container{
 	height: 100%;
 	background: #f2f3f4;
-	
 }
 .title{
 	position: absolute;

src/pages/webgl_rxdz_look/webgl_rxdz_look.html

@@ -1,5 +1,5 @@
 <!-- 模型查看页面 -->
-<div class="main-view">
+<div class="main-view" style="position: absolute;width: 100%;height: 100vh;">
 	<mynavbar :barData='navbar'/>
 	<!-- 楼层 -->
 	<div class="floor-view" v-if="floorList&&floorList.length>1">

src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -5,6 +5,9 @@
 	var requestId = "";
     const util = require('@/utils/util.js');
     const config = require('@/services/urlConfig.js');
+	import {
+		Toast
+	} from 'mint-ui';
 	import commonPageMethod from '@/mixins/commonPageMethod.js';
     // const app = getApp(); //获取应用实例
     export default {
@@ -49,16 +52,15 @@
 		},
         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 = "没有数据~";
+				Toast({
+					message: '没有数据~',
+				});
 			}
 			let screenWidth = window.screen.width;
 			let screenHeight = window.screen.height;
@@ -68,12 +70,10 @@
 			if(window.innerHeight && window.screen.height){
 				this.screenHeight = Math.min(window.innerHeight,window.screen.height)
 			}
+			
 		},
 
 		methods: {
-			clearHandle(){
-				this.clearEvent();
-			},
 			//楼层切换
 			floorChange(item){
 				if(this.floorId==item.layoutId){
@@ -118,16 +118,36 @@
 							houseFloor:item.floor,
 							layoutId:item.layoutId,
 						});
+						item.houseJson = JSON.stringify(item.houseJson);
 					})
 					this.curHouseObj = curData.layoutStruct.find(it=>it.floor==curData.curFloor);
-					console.warn("***curHouseObj***",this.curHouseObj)
+					console.warn("***curHouseObj23***",this.curHouseObj)
 					let select = this.floorList.find(it=>it.houseFloor == curData.curFloor);
 					this.floorId = select ? select.layoutId : this.floorList[0].layoutId;
-					console.warn("***floorList-init***",this.floorList,select)
-					if(webglCom && typeof(webglCom.curHouseFloorChange)==='function'){
-						webglCom.setHeight(this.screenHeight);
-						webglCom.showArea = false;
-						webglCom.curHouseFloorChange(this.curHouseObj);
+					console.warn("***floorList-init***",this.floorList,select,this.screenHeight)
+					if(webglCom){
+						if(webglCom.curHouseObj && webglCom.curHouseObj.id == this.curHouseObj.layoutId){
+							webglCom.showArea = false;
+							webglCom.setHeight(this.screenHeight);
+							webglCom.spaceLeave(false);
+							webglCom.cameraInit();
+							webglCom.styleType = 1;
+							setTimeout(()=>{
+								console.warn("123",this.curHouseObj);
+								webglCom.moveMeshCenterIm(this.curHouseObj);
+							},601)
+						}else{
+							this.$store.state.webglShow = false;
+							setTimeout(()=>{
+								this.$store.state.webglShow = true;
+							},50)
+							setTimeout(()=>{
+								webglCom.showArea = false;
+								webglCom.setHeight(this.screenHeight);
+								webglCom.curHouseFloorChange(this.curHouseObj);
+							},250)
+							console.warn("12345");
+						}
 					}
 				}
 			},

src/pages/webgl_rxdz_test/webgl_rxdz_test.vue

@@ -46,6 +46,13 @@
 				isIOS:false,	//是否ios手机。默认不是
 				curHouseObj: null,
 				changeStatus:false,
+				inter:null,
+			}
+		},
+		beforeDestroy() {
+			if(this.inter){
+				clearInterval(this.inter);
+				this.inter = null
 			}
 		},
 		mounted() {
@@ -60,7 +67,6 @@
 			}else{
 				this.curHouseObj = JSON.parse(JSON.stringify(this.$store.state.curHouseObj));
 			}
-			console.warn("***this.curHouseObj***",this.curHouseObj)
 			let screenWidth = window.screen.width;
 			let screenHeight = window.screen.height;
 			if(window.innerWidth && window.screen.width){
@@ -71,12 +77,28 @@
 			}
 			let unit = screenWidth / 750;//单位rpm 对应 px 的值
 			that.canvasHeight = screenHeight - (200 * unit) + (20 * unit);
+			console.warn("***this.curHouseObj***",this.curHouseObj,that.canvasHeight)
 			if(this.curHouseObj){
 				if(window.webglCom && typeof(window.webglCom.curHouseFloorChange)==='function'){
-					window.webglCom.curHouseFloorChange(this.curHouseObj);
+					webglCom.showArea = true;
+					webglCom.setHeight(that.canvasHeight);
+					this.$nextTick(()=>{
+						webglCom.curHouseFloorChange(this.curHouseObj);
+					})
+				}else{
+					this.inter = setInterval(()=>{
+						if(window.webglCom){
+							webglCom.showArea = true;
+							webglCom.setHeight(that.canvasHeight);
+							this.$nextTick(()=>{
+								webglCom.curHouseFloorChange(this.curHouseObj);
+							})
+							clearInterval(this.inter);
+							this.inter = null
+						}
+					},1000)
 				}
 			}
-			
 		},
 		onShow(){
 			console.warn("---onShow1---",this.pvId)
@@ -101,14 +123,13 @@
 				return false;
 			},
 			async goRoam1(spaceId){
-				if(this.overChange){
+				if(webglCom.overChange){
 					this.$message.warning("空间正在调整");
 					return false
 				}
-				let shottingImg = await this.shottingAction() + "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//开始截图
-				console.warn("***shottingImg***",shottingImg);
+				let gltf = webglCom.lableItem.find(it=>it.spaceId==spaceId);
+				let shottingImg = await webglCom.creatShotImg();//获取截图
 				setStorage('shottingImg', shottingImg);//把空间选择的数据存入本地缓存里面，方便后续使用
-				let gltf = this.lableItem.find(it=>it.spaceId==spaceId);
 				if(gltf){
 					this.goRoam(gltf)
 				}
@@ -119,7 +140,7 @@
 				if(gltf.spaceType==13){//楼梯不能跳转
 					return false
 				}
-				let spaceId = this.selectSpace ? this.selectSpace.spaceId : gltf.spaceId;//具体的空间Id
+				let spaceId = gltf.spaceId;//具体的空间Id
 				let data = {
 					spaceId:spaceId,
 					houseId:this.houseId,
@@ -142,90 +163,7 @@
 					this.repeatFlag = false;
 				}, 1000);
 			},
-			async loadSpace(){
-				this.spaceList = [];
-				this.wallIds = [];
-				this.layoutIds = [];
-				this.gltfSpaces = [];
-				this.curWallArr = [];
-				this.progress = 0;
-				if(!this.curHouseObj){//减少重复请求
-					return false
-				}
-				let type=[];
-                if(this.curHouseObj){
-                    const spaceDetail = this.curHouseObj;
-                    const spaceList = JSON.parse(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;
-						element.wallMoveValue = "[0,0,0,0]"
-                        this.spaceList.push(element);
-                        this.wallIds.push(element.wallId);
-						this.layoutIds.push(element.layoutId);
-						type.push(element.spaceType);
-                        if(element.isSelected){ // 默认选中空间
-                            this.curSpaceObj = element;
-                        }
-                    }
-                    if(!this.curSpaceObj && this.spaceList.length > 0){
-                        this.curSpaceObj = this.spaceList[0];
-                    }
-                }
-                console.log("该户型空间数据:", this.spaceList, this.layoutIds,type);
-                console.log("当前选中的空间:", this.curSpaceObj,this.curHouseObj);
-				this.spaceListBackup = JSON.parse(JSON.stringify(this.spaceList));
-				this.$store.state.curSpaceId = this.curSpaceObj.spaceId;
-				this.loaderSpaceArr(this.spaceList);
-                // 绘制墙体
-                this.getHouseTypeSpaceWalls();
-            },
-			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
-			updataLable(spaceId,layoutObj){
-				let list = this.arrFrunList;
-				let lable = this.lableItem.find(it=>it.spaceId == spaceId);
-				let name = spaceTypes[layoutObj.type - 1];
-				lable.text = name;
-				console.warn("***updataLable***",lable)
-				this.$refs.viewShell.$refs.viewCareful.updataData(spaceId,layoutObj);
-			},
-			// 添加文字标签
-			addWordLabel(){
-				if(!this.gltfSpaces || this.gltfSpaces.length <= 0){
-					return false;
-				}
-				// 方案二
-				this.lableItem = [];
-				this.gltfSpaces.forEach((cube,index) =>{
-					// 给地板加上空间类型标注, 空间为链接空间的不显示
-					if(cube.spaceName && !cube.isSizeLock){
-						let spaceIndex = this.spaceList.filter(it=>it.spaceName && !it.isSizeLock).findIndex(item=>item.spaceId==cube.spaceId);
-						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,
-								spaceType:cube.spaceType,
-								transform:'',
-								spaceIndex:spaceIndex,
-								cubeIndex:index,
-							}
-						)
-					}
-				})
-				this.showLables = true;
-				// this.updateLables();//更新lable
-			}, 
+			
 			
         }
     }

src/pages/webgl_rxdz_test_houseList/webgl_rxdz_test_houseList.scss

@@ -1,7 +1,8 @@
 .container{
+	position: relative;
 	height: 100%;
 	background: #f2f3f4;
-	
+	z-index:1;
 }
 .title{
 	position: absolute;

src/pages/webgl_rxdz_test_look/webgl_rxdz_test_look.html

@@ -1,12 +1,12 @@
 <!-- 模型查看页面 -->
 <div class="main-view">
 	<mynavbar :barData='navbar'/>
-	<div id="mapDiv" ref="webgl"></div>
+	<!-- <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> -->
 	<!-- 楼层 -->
 	<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_test_look/webgl_rxdz_test_look.vue

@@ -2,23 +2,15 @@
 
 </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 {
+		Toast
+	} from 'mint-ui';
 	import commonPageMethod from '@/mixins/commonPageMethod.js';
     // const app = getApp(); //获取应用实例
     export default {
-		mixins:[loadModel,floorMethod,wallMethod,commonPageMethod],
+		mixins:[commonPageMethod],
         /**
          * 页面的初始数据
          */
@@ -43,39 +35,12 @@
 				    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:30, 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: {
@@ -86,375 +51,30 @@
         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_test_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_test_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 = "没有数据~";
+				Toast({
+					message: '没有数据~',
+				});
 			}
 			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 = false;
-				controls.enableDamping = true;
-				controls.minDistance = 1;
-				controls.maxDistance = 400;
-				controls.minPolarAngle = Math.PI / 8;// 默认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) { // 非漫游状态
-					let _juli = camera.position.y * Math.tan(Math.PI / 8);
-					cameraNewPosition = {
-						x:spaceObj.centerX/100,
-						y:camera.position.y, 
-						z:-spaceObj.centerY/100 + _juli,
-					}
-					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为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){
@@ -463,31 +83,9 @@
 				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(){
@@ -502,8 +100,8 @@
 			    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)
 			    }
 			},
 			/**
@@ -526,172 +124,24 @@
 					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];
-							}
+					if(webglCom){
+						webglCom.showArea = false;
+						webglCom.setHeight(this.screenHeight);
+						if(webglCom.curHouseObj && webglCom.curHouseObj.id == this.curHouseObj.layoutId){
+							webglCom.spaceLeave(false);
+							webglCom.cameraInit();
+							webglCom.styleType = 1;
+							setTimeout(()=>{
+								console.warn("123",this.curHouseObj);
+								webglCom.moveMeshCenterIm(this.curHouseObj);
+							},601)
+						}else{
+							webglCom.curHouseFloorChange(this.curHouseObj);
+							console.warn("12345");
 						}
-						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.filter(it=>it.spaceId);
-                    // 交换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];
-					}
-                }
-				if(this.curHouseObj.layoutArea<=100){//面积小于100平米，则摄像头靠近一点
-					this.cameraStarPosition.y = 25;
-				}else if(this.curHouseObj.layoutArea>100){
-					this.cameraStarPosition.y = 35;
-				}
-                console.log("该户型空间数据:", this.spaceList);
-				console.log("当前选中的空间:", this.curSpaceObj);
-				this.cameraInit();
-				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.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.moveMeshCenter(this.curSpaceObj);
-								this.addWordLabel(); // 添加文字标签
-							}, 610);
-						})
-					})
-				})
-            },
         }
     }
 </script>

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

@@ -0,0 +1,948 @@
+<template src="./webgl_rxdz_test_roam.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 TWEEN from 'three/addons/libs/tween.module.js';
+	import {getStorage} from '@/utils/localStorage';
+	var requestId = "";
+    const util = require('@/utils/util.js').default;
+	// import util from '@/utils/util.js';
+    // const config = require('@/services/urlConfig.js');
+    // import requestConfig from '@/static/lib/requestConfig.js';
+	import viewShell from'@/components/newQCCom/viewShell/viewShell.vue';
+	import viewMask from'@/components/newQCCom/viewMask/viewMask.vue';
+
+	// import { RGBELoader } from '@/webgl/jsm/loaders/RGBELoader.js';
+	import screenshot from '@/mixins/screenshot.js';
+	import floorMethod from '@/mixins/floorMethod.js';
+	import loadModel from '@/mixins/loadModel.js';
+	import wallMethod from '@/mixins/wallMethod.js';
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	// import commonPageMethod from '@/common/commonPageMethod.js';
+    // const app = getApp(); //获取应用实例
+    export default {
+		components:{viewShell,viewMask},
+		mixins:[screenshot,loadModel,floorMethod,wallMethod,commonPageMethod],
+        /**
+         * 页面的初始数据
+         */
+        data() {
+            return {
+				pvCurPageName: "room_show",
+				locusBehaviorName: "房间展示",
+				pvCurPageParams: null,
+                houseId: "",
+				pvId: 'p_2cmina_23080402',
+				canvas:null,
+				navbar: {
+				    showCapsule: 1,
+				    title: '客厅',
+				    titleColor: '#000',
+				    navPadding: 0,
+				    navPaddingBg:'transparent',
+				    navBarColor: 'transparent',
+				    navBackColor: 'transparent',
+				    haveCallback: true, // 如果是 true 会接手 navbarBackClk
+				    fromShare: false,
+				    fromProject: 0,
+				    shareToken: "",
+				    pageName: this.pvCurPageName,
+				},
+                id:'',// 户型编号
+                spaceList:[], // 空间列表
+                gltfSpaces:[], // 场景中地板模型数组
+				gltfSpaceRoofs:[],
+                curSpaceObj:null, // 当前选中的空间
+                // curSpaceIndex:-1, // 当前选中的空间索引
+				spaceId:null,
+                wallIds:[], // 空间墙体id
+				// wallList:[], // 墙体数据
+                gltfWalls:[], // 场景中墙体模型数组
+                loader:null,
+                scene:null,
+                // sky:null,
+                camera:null,
+				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
+				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
+				cameraLastPosition: null,		//摄像头上一次移动到的位置
+				controlLastPosition: null,		//观察点上一次移动到的位置
+				canvasHeight:408,	//canvas视图的高度-计算得出
+				chooseMesh:null,//标记鼠标拾取到的mesh
+				shottingImg: [],
+				progress:1,	//进度条
+				myLoadingStatus:false,
+				// textGeoList:[],
+				repeatFlag:false,	//重复点击
+				// skyPlan: null, // 天空盒子
+				instancedMeshList: [],
+				screenshotResolve:null,
+				actors:[],
+				showDownView:true,//默认显示下载按钮
+				currentActor:null,
+				circleGroup:null,//圆形地标
+				isIOS:false,
+				defaulIndex:null,	//默认视角的序号
+				// aiImagesList:[
+				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM01.png",
+				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM02.png",
+				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM03.png",
+				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM04.png",
+				// ]
+            }
+        },
+		beforeDestroy() {
+			cancelAnimationFrame(requestId, this.canvas)
+			this.worker && this.worker.terminate()
+			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()
+			}
+			TWEEN && TWEEN.removeAll();//清除所有的tween;
+			console.warn("***beforeDestroy-webgl_rxdz_roam***");
+		},
+        mounted(options) {
+			var that = this;
+			// alert("JavaScript 堆大小限制: "+performance.memory.jsHeapSizeLimit
+			// +"\n已使用的 JavaScript 堆大小: "+performance.memory.usedJSHeapSize
+			// +"\nJavaScript 堆的总大小: "+performance.memory.totalJSHeapSize);
+			console.warn("***webgl_rxdz_roam-options***",this.$route.query)
+			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+			if(this.isIOS){
+				this.curHouseObj = JSON.parse(getStorage('curHouseObj'));
+				this.wallList = JSON.parse(getStorage('wallList'));
+			}else{
+				this.curHouseObj = 	this.$store.state.curHouseObj;
+				this.wallList = 	this.$store.state.wallList;
+			}
+			// alert("***mounted-webgl_rxdz_roam***"+this.isIOS + this.curHouseObj)
+			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 unit = screenWidth / 750;//单位rpm 对应 px 的值
+			this.canvasHeight = screenHeight - (600 * unit) + (40 * unit);
+			this.houseId = this.$route.query.houseId?this.$route.query.houseId:'';
+			this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
+			let container = this.$refs.webgl;
+            let canvas3d = this.canvas = this.$refs.glcanvas;
+			//uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm
+			
+			let camera = null, renderer = null;
+			let needRender = false;	//是否需要渲染 false表示不需要渲染；true 表示需要渲染
+            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 = true;//是否进入漫游状态-默认是
+			//漫游时变量
+			let onPointerDownMouseX = 0, onPointerDownMouseY = 0,
+			lon = 0;
+			let fingerCount = 0;	//触摸时的手指数目
+			let startTime = 0;	//非漫游时的移动变量
+			let tweenCameraAnma = false;	//表示当前是否处在动画过程中
+			let controls = null,boundary=null;
+			let stats;
+			init();
+			// this.$refs.myLoading.showLoading("加载中...1%")
+			this.$store.state.loadingMsg="加载中...1%";
+			// this.myLoadingStatus = true;
+			this.progress = 1;
+			this.clearEvent = clearEvent;
+			this.attendEvent = attendEvent;
+			// this.meshRoam = meshRoam;
+			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
+			this.switchActor = switchActor;
+			this.starRender = starRender;//对外暴露启动渲染的方法
+			this.stopRender = stopRender;//对外暴露停止渲染的方法
+			this.positionCamer = positionCamer;
+			if(this.curHouseObj && this.curHouseObj.id){
+				this.setHouseDetail(this.curHouseObj);
+			}
+			function init() {
+
+                scene.background = new THREE.Color("#FFFFFF");
+				// scene.environment = new THREE.Color("#F2F2F2");
+				// 创建一个HDR贴图加载器
+				// const rgbeloader = new RGBELoader();
+				// // 加载HDR贴图
+				// rgbeloader.load('https://dm.static.elab-plus.com/miniProgram/environment.hdr', (texture) => {
+				// 	// 将HDR贴图设置为场景的环境贴图
+				// 	texture.mapping = THREE.EquirectangularReflectionMapping;
+				// 	scene.environment = texture;
+				// })
+
+				// 创建相机位置
+				camera = new THREE.PerspectiveCamera(90, screenWidth / that.canvasHeight, 0.1, 10000 );
+				// camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向 {x:0,y:1,z:0}
+				// camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
+				scene.add(camera);
+                that.camera = camera;
+
+                // 环境光会均匀的照亮场景中的所有物体
+				const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3.5);
+				scene.add(ambientLight);
+				//平行光
+				const light = new THREE.DirectionalLight(0xFFF8E5, 2.5);
+				light.position.set(5, 7, 3); //default; light shining from top
+				if(!that.isIOS){
+					light.castShadow = true; // default false
+					// 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域，光源投射方向为通过坐标原点
+					light.shadow.camera.left = -100; // 这个区域内产生阴影
+					light.shadow.camera.right  = 100; // 这个区域内产生阴影
+					light.shadow.camera.top  = 100; // 这个区域内产生阴影
+					light.shadow.camera.bottom  = -100; // 这个区域内产生阴影
+					
+					light.shadow.mapSize.width = 1024; 	// 影响阴影的清晰度
+					light.shadow.mapSize.height = 1024; // 影响阴影的清晰度
+				}
+				
+				scene.add(light);
+				
+				//antialias 这个值得设置为false，不然IOS上截图会失效
+                renderer = that.renderer = new THREE.WebGLRenderer( { 
+					canvas:canvas3d, 
+					alpha: true,
+					antialias:true,
+					preserveDrawingBuffer: 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, that.canvasHeight);
+                container.appendChild( renderer.domElement );
+				
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.enableDamping = true;//启动缓动
+				controls.minDistance = 0.0001;
+				controls.maxDistance = 10;
+				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;//启用摄像机的缩放
+				controls.enablePan = true;//禁用摄像机平移
+				controls.enableRotate = true;//启用摄像机水平或垂直旋转
+				// controls.zoomToCursor = true;
+				
+				// controls.target.copy(camera.position);
+				// controls.update();
+				// 监听相机移动事件-限制只能在当前空间范围内移动
+				controls.addEventListener('change', () => {
+					// 检查相机位置是否超出边界框
+					if (boundary && !boundary.containsPoint(camera.position)) {
+						let clampedPosition = new THREE.Vector3( );
+						boundary.clampPoint(camera.position,clampedPosition);
+						if(clampedPosition){
+							camera.position.copy(clampedPosition);
+							// controls.target.copy(clampedPosition);
+						}
+					}
+				});
+				// controls.target = new THREE.Vector3( );;
+				// camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
+                raycaster = new THREE.Raycaster();
+				// stats = new Stats();
+				// container.appendChild(stats.dom);
+				// stats.domElement.style.top = '100px';
+				attendEvent();//注册监听事件
+				starRender();	//启动渲染
+            }
+			function tweenCameraAnmaChange (value) {
+				tweenCameraAnma = value
+			}
+			function attendEvent () {
+				renderer && renderer.domElement && renderer.domElement.addEventListener('touchstart', onPointerStart, false);
+				renderer && renderer.domElement && renderer.domElement.addEventListener('touchmove', onPointerMove, false);
+				renderer && renderer.domElement && renderer.domElement.addEventListener('touchend', onPointerUp, false);
+			}
+			//取消事件监听-避免二次进入时触发多次事件
+			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){
+				startTime = (new Date()).getTime();
+				fingerCount = event.touches.length;//手指个数
+				console.log('开始触摸事件：',lon,fingerCount,camera.position.y)
+				if (fingerCount === 1) {
+					// 只有一个手指时记录当前点的坐标作为平移起始点
+					onPointerDownMouseX = event.changedTouches[0].clientX;
+					onPointerDownMouseY = event.changedTouches[0].clientY;
+				}
+			}
+			//持续触摸中
+			function onPointerMove( event ) {
+				fingerCount = event.touches.length;//手指个数
+			}
+			//触摸结束
+			function onPointerUp(event) {
+				fingerCount = event.touches.length;//手指个数
+				console.warn("***触摸结束***",fingerCount,startTime)
+				if(fingerCount==0){
+					let now = new Date().getTime()
+					if (Math.abs(event.changedTouches[0].clientX - onPointerDownMouseX) < 10 
+					&& Math.abs(event.changedTouches[0].clientY - onPointerDownMouseY) < 10 
+					&& (now - startTime) < 300 ){
+						checkIntersection(event);
+					}
+				}
+			}
+			//射线检测handle
+			function checkIntersection(event) {
+			    let x = (event.changedTouches[0].clientX / screenWidth) * 2 - 1;
+			    let y = -(event.changedTouches[0].clientY / that.canvasHeight) * 2 + 1;
+			    mouse.x = x;
+			    mouse.y = y;
+			    //更新射线
+			    raycaster.setFromCamera(mouse, camera);
+			    let intersects = raycaster.intersectObjects(scene.children,true);
+				console.warn("***checkIntersection***",intersects.length)
+			    if (intersects.length > 0) {
+					//找到最近的那个网格模型物体
+					let mesh = intersects.find((it) => {
+						if(it.object && it.object.isMesh == true  
+							&& it.object.parent && it.object.parent.name == 'actor'
+							&& it.object.parent.visible == true){
+							return true;
+						}
+					});
+					
+					//拾取到了视角，就不继续拾取了
+					if(mesh){
+						moveActor(mesh.object.parent);
+						return false;
+					}
+					mesh = intersects.find((it) => {
+						if(it.object && it.object.isInstancedMesh
+							&& (it.object.name == '地板' || it.object.name == '花园') && it.object.visible == true){
+							return true;
+						}
+					});
+					//拾取到了地板
+					if(mesh){
+						let floor = mesh.object;
+						let index = mesh.instanceId;//射线相交是的实例序号
+						let spaceId = that.gltfSpaces[index].spaceId;//获取选中实例的空间id
+						if(floor.name == "花园"){//花园
+							return false;
+							let selectMesh = that.gltfSpaces.find(it=>{return it.spaceType==14 && it.instancedMeshIndexList[0].instancedAtIndex==index})
+							spaceId = selectMesh.spaceId;
+						}else{//室内
+							// floor.name = "地板";
+							let selectMesh = that.gltfSpaces.find(it=>{return it.spaceType!=14 && it.instancedMeshIndexList[0].instancedAtIndex==index})
+							spaceId = selectMesh.spaceId;
+						}
+						// let spaceId = that.gltfSpaces[index].spaceId;//获取选中实例的空间id
+						console.warn("***checkIntersection-地板***",floor,index,spaceId,that.spaceId)
+						//当前拾取到的是本空间的底部-意味着用户点击了地板
+						if(floor && spaceId == that.spaceId){
+							moveCarmer(mesh.point);
+							return false;
+						}
+					}
+			    }
+			}
+			//自动切换视角
+			function switchActor (toIndex=null) {
+				if(!that.currentActor){
+					this.$message.warning("没有当前视角!");
+					return false;
+				}
+				if(!that.actors || that.actors.length==0){
+					this.$message.warning("没有视角!");
+					return false;
+				}
+				if(toIndex!=null){//存在要去往的视角
+					moveActor(that.actors[toIndex]);
+				}else{
+					let index = that.currentActor.userIndex;//当前视角的序号
+					let nextIndex = (index + 1) % that.actors.length;
+					//移动到对应的视角去
+					moveActor(that.actors[nextIndex]);
+					that.defaulIndex = nextIndex;//更新下默认视角
+				}
+			}
+			//移动到选中的位置-地板
+			function moveCarmer (point) {
+				//还在动画中，不能点击切换
+				if(tweenCameraAnma == true){
+					return false;
+				}
+				let _x =  point.x - camera.position.x;//x轴移动的距离
+				let _z =  point.z - camera.position.z;//z轴移动的距离
+				let cameraNewPosition = {x:camera.position.x + _x,y:1.5,z:camera.position.z + _z};
+				let targetNewPosition = {x:controls.target.x + _x,y:1.5,z:controls.target.z + _z};
+				let oldUp = {x:0,y:1,z:0};	
+				let newUp = {x:0,y:1,z:0};
+				moveTip(cameraNewPosition)
+				// console.warn("**moveCarmer***",lon,JSON.stringify(cameraNewPosition),JSON.stringify(targetNewPosition))
+				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
+				setTimeout(()=> {
+					that.circleGroup.visible = false;
+				}, 2000);
+			}
+			//创建地标
+			function creatMoveTip(position){
+				if(!that.circleGroup){
+					that.circleGroup = new THREE.Group();
+					let geometry = new THREE.CircleGeometry( 0.2, 32 );
+					let material = new THREE.MeshBasicMaterial( { transparent: true } );
+					let circle = new THREE.Mesh( geometry, material );
+					circle.position.set(position.x,0.01,position.z);
+					circle.rotation.x = -Math.PI / 2;
+					// let geometry1 = new THREE.CircleGeometry( 0.4, 32 );
+					// let circle2 = new THREE.Mesh( geometry1, material );
+					// circle2.position.set(position.x,0.01,position.z);
+					// 使用贴图
+					const textureLoader = new THREE.TextureLoader();
+					textureLoader.load('https://dm.static.elab-plus.com/miniProgram/circlemap1.png', function(texture) {
+						material.map = texture; // 将贴图应用于材质的map属性
+						material.needsUpdate = true; // 更新材质
+					});
+					that.circleGroup.add(circle);
+					scene.add(that.circleGroup);
+					that.circleGroup.visible = false;
+				}
+			}
+			//移动地标
+			function moveTip(position){
+				if(!that.circleGroup){
+					that.circleGroup = new THREE.Group();
+					let geometry = new THREE.CircleGeometry( 0.2, 32 );
+					let material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+					let circle = new THREE.Mesh( geometry, material );
+					circle.position.set(position.x,0.01,position.z);
+					circle.rotation.x = -Math.PI / 2;
+					// let geometry1 = new THREE.CircleGeometry( 0.4, 32 );
+					// let circle2 = new THREE.Mesh( geometry1, material );
+					// circle2.position.set(position.x,0.01,position.z);
+					that.circleGroup.add(circle);
+					scene.add(that.circleGroup);
+				}else{
+					that.circleGroup.visible = true;
+					that.circleGroup.children[0].position.set(position.x,0.01,position.z);
+				}
+			}
+			//移动视角点位
+			function moveActor (obj) {
+				clearEvent();//注销事件监听
+				// console.warn("***moveActor***",obj)
+				that.currentActor = obj;//记录下当前的视角对象 mesh网格模型
+				let cameraNewPosition = obj.position;
+				let targetNewPosition = obj.targetNewPosition;
+				let oldUp = {x:0,y:1,z:0};	//俯视
+				let newUp = {x:0,y:1,z:0};	//正视
+				// moveTip(cameraNewPosition);
+				// console.warn("**moveActor***",JSON.stringify(cameraNewPosition),JSON.stringify(targetNewPosition))
+				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
+				lon = 0;
+				setTimeout(()=> {
+					attendEvent()
+					// that.circleGroup.visible = false;
+				}, 2000);
+			}
+			//初始化点位视角
+			function initActor(){
+				if(!chooseMesh){
+					console.error("[drawActor],没有选中的空间数据")
+					return false;
+				}
+				let spaceObj = chooseMesh;//获取选中的空间模型的相关数据
+				if(!spaceObj.actors){
+					return false;
+				}
+				let defaulIndex = spaceObj.actors.findIndex(it=>it.isSelected==true);
+				if(defaulIndex == -1){
+					defaulIndex = 0;
+				}
+				that.defaulIndex = defaulIndex;//记录下默认视角
+				that.actors = [];
+				spaceObj.actors.forEach((actor,index)=>{
+					// let model = gltf.scene; // 获取模型
+					// let cloneModel = model.clone(true);//赋值模型，准备复用
+					// cloneModel.children.map((v,i)=>{
+					// 	if(v.material){
+					// 		v.material = model.children[i].material.clone()
+					// 	}
+					// })
+					// let cube = cloneModel;
+					let cube = {};
+					cube.name = "actor";
+					cube.userType = "mesh";
+					//新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
+					let _actorLoaction = actor.actorLocation.split(',');//x y z
+					let _actorTransform = actor.actorTransform.split(',');//旋转角度，取第三个值
+					let _hd = THREE.MathUtils.degToRad(parseInt(_actorTransform[2]));//将度转化为弧度。
+					let _hdY = THREE.MathUtils.degToRad(parseInt(_actorTransform[1]));//Y轴方向上将度转化为弧度。
+					// if(parseInt(_actorLoaction[1])==0){//X轴
+					// 	_actorLoaction[1] = spaceObj.centerX;
+					// }
+					// if(parseInt(_actorLoaction[0])==0){//Y轴
+					// 	_actorLoaction[0] = spaceObj.centerY;
+					// }
+					let X_C = parseInt(_actorLoaction[0]);//X轴偏移量
+					let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
+					let px = spaceObj.centerX + X_C;
+					let py = -spaceObj.centerY + Y_C;//UE里面的centerY值跟Three.js Y轴相反；获得真实的坐标值
+					let position = {
+						x:(parseInt(px))/100,
+						y:1.5, 
+						z:(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
+					}
+					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.5
+					let targetNewPosition = {
+						x:position.x + Math.sin(_hd),
+						y:1.5 + Math.tan(_hdY),
+						z:(position.z - Math.cos(_hd)),
+					}
+					cube.position = position;
+					cube.userIndex = index;
+					cube.actorEum = index;
+					cube.targetNewPosition = targetNewPosition;
+					// console.warn("*actors*",cube,defaulIndex)
+					that.actors.push(cube);//添加视角
+					if(index == defaulIndex){//隐藏当前视角
+						that.currentActor = cube;//记录下当前的视角对象 mesh网格模型
+						let param = {
+							type: 'CLK', //埋点类型
+							clkId: 'clk_2cmina_23080411', //点击ID
+							clkName: 'visualangle_clk', //点击前往的页面名称
+							clkParams: {
+								locusName: "预制视角",
+								type:that.actors[index].actorEum
+							}
+						};
+						util.trackRequest(param);
+					}
+				})
+			}
+			//计算当前选中空间的平视时的观察点和摄像机的放置点位
+			function roamPositionHandle(lon=''){
+				if(!chooseMesh){
+					console.error("[roamPositionHandle],没有选中的空间数据")
+					return false;
+				}
+				let spaceObj = chooseMesh;//获取选中的空间模型的相关数据
+				//获取视角
+				let defaultActor = null;
+				if(spaceObj.actors && spaceObj.actors.length>0){
+					defaultActor = spaceObj.actors.find(it=>it.isSelected==true);
+					if(!defaultActor){
+						defaultActor = spaceObj.actors[0];
+					}
+				}
+				let _actorLoaction = defaultActor.actorLocation.split(',');//x y z
+				let _actorTransform = defaultActor.actorTransform.split(',');//旋转角度，取第三个值
+				let _hd = THREE.MathUtils.degToRad(parseInt(_actorTransform[2]) + lon);//将度转化为弧度。
+				let _hdY = THREE.MathUtils.degToRad(parseInt(_actorTransform[1]));//Y轴方向上将度转化为弧度。
+				// if(parseInt(_actorLoaction[1])==0){//X轴
+				// 	_actorLoaction[1] = spaceObj.centerX;
+				// }
+				// if(parseInt(_actorLoaction[0])==0){//Y轴
+				// 	_actorLoaction[0] = spaceObj.centerY;
+				// }
+				let X_C = parseInt(_actorLoaction[0]);//X轴偏移量-UE原因
+				let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
+				let px = spaceObj.centerX + X_C;
+				let py = -spaceObj.centerY + Y_C;
+				//新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
+				let cameraNewPosition = {
+					x:(parseInt(px))/100,
+					y:1.5, 
+					z:(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
+				}
+				if(cameraNewPosition){
+					let minX = 0,maxX = 0,minY = 0,maxY = 0;//0.1 是模型墙壁厚度
+					minX = (spaceObj.centerX - (spaceObj.spaceWidth/2))/100 + 0.1;
+					maxX = (spaceObj.centerX + (spaceObj.spaceWidth/2))/100 - 0.1;
+					maxY = ((-spaceObj.centerY + (spaceObj.spaceHeight/2))/100 - 0.1);
+					minY = ((-spaceObj.centerY - (spaceObj.spaceHeight/2))/100 + 0.1);
+					//新的坐标轴不在房间范围内，则不能移动
+					if(cameraNewPosition.x<minX || cameraNewPosition.x>maxX
+					||cameraNewPosition.z<minY || cameraNewPosition.z>maxY){//不在房间范围
+						let _x = ((spaceObj.spaceWidth/2) - 15)*defaultActor.presentX + spaceObj.centerX;
+						let _z = ((spaceObj.spaceHeight/2) - 15)*defaultActor.presentY + (-spaceObj.centerY);
+						cameraNewPosition.x = _x/100;
+						cameraNewPosition.z = _z/100;
+						console.warn("**roamPositionHandle-观察点不在空间范围-强制修正观察点位置****",JSON.stringify(cameraNewPosition))
+					}
+				}
+				//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.5
+				let targetNewPosition = {
+					x:cameraNewPosition.x + Math.sin(_hd),
+					y:1.5 + Math.tan(_hdY),
+					z:(cameraNewPosition.z - Math.cos(_hd)),
+				}
+				let lookPosition = {
+					x:cameraNewPosition.x + (Math.sin(_hd)*0.01),
+					y:1.5 + Math.tan(_hdY),
+					z:(cameraNewPosition.z - (Math.cos(_hd))*0.01),
+				}
+				return {cameraNewPosition,targetNewPosition,lookPosition}
+			}
+			//直接定位到摄像头位置
+			function positionCamer(mesh=null,needAni=false){
+				if(mesh){//如果传入了模型，则取模型
+					chooseMesh = mesh;
+				}
+				if(!chooseMesh){
+					console.error("[positionCamer],没有选中的空间数据")
+					return false;
+				}
+				if(!chooseMesh.actors || chooseMesh.actors.length==0){
+					chooseMesh.actors = [{
+						actorLocation:chooseMesh.actorLocation,
+						actorTransform:chooseMesh.actorTransform,
+						isSelected:true,
+						presentX:chooseMesh.presentX,
+						presentY:chooseMesh.presentY,
+					}]
+				}
+				boundary = new THREE.Box3(
+					new THREE.Vector3(chooseMesh.centerX/100 - chooseMesh.spaceWidth/100/2 + 0.1, 0, -chooseMesh.centerY/100 - chooseMesh.spaceHeight/100/2 + 0.1), // 边界框的最小点
+					new THREE.Vector3(chooseMesh.centerX/100 + chooseMesh.spaceWidth/100/2 - 0.1, 2.7, -chooseMesh.centerY/100 + chooseMesh.spaceHeight/100/2 - 0.1) // 边界框的最大点
+				);
+				initActor();//初始化视角
+				let data = roamPositionHandle();
+				let cameraNewPosition = data.cameraNewPosition;
+				let targetNewPosition = data.targetNewPosition;
+				targetNewPosition.z = targetNewPosition.z;//增加偏差，防止极点翻转问题？不知道为啥会有用
+				let lookPosition = data.lookPosition;
+				creatMoveTip(cameraNewPosition);//创建移动的地标
+				if(needAni){
+					let oldUp = {x:0,y:1,z:0};	//俯视
+					let newUp = {x:0,y:1,z:0};	//正视
+					tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
+				}else{
+					camera.position.set(cameraNewPosition.x, cameraNewPosition.y, cameraNewPosition.z);
+					controls.target.set(lookPosition.x,lookPosition.y,lookPosition.z);
+					// controls.target.set(cameraNewPosition.x,cameraNewPosition.y,cameraNewPosition.z);
+					// controls.target.copy(camera.position);
+					camera.lookAt(targetNewPosition.x,targetNewPosition.y,targetNewPosition.z);
+				}
+			}
+			// 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;
+				}
+				if (!chooseMesh) {
+					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();
+				}).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(newT.x,newT.y,newT.z);
+					tweenCameraAnma = false;
+					that.repeatFlag = false;//放开限制，可以再次点击
+				})
+				// 开始动画
+				tween.start();
+			}
+
+			function stopRender () {
+				needRender = false;
+			}
+			function starRender () {
+				if(needRender==true){//如果已经在渲染中了，则不能再次开启，避免渲染过多
+					false;
+				}
+				needRender = true;
+				render();//开始渲染
+			}
+            function render() {
+				if(needRender==false){
+					return false;
+				}
+                TWEEN && TWEEN.update();
+				// stats.update();
+				renderer.render(scene, camera);//单次渲染
+				requestId = requestAnimationFrame(render, canvas3d);
+				if (that.screenshotResolve) {
+					stopRender();
+					that.screenshotResolve()
+					that.screenshotResolve = null;//释放Promise
+				}
+            }
+
+		},
+		// computed: {
+		// 	curHouseObj() {
+		// 		return this.$store.state.curHouseObj;
+		// 	},
+		// 	wallList() {
+		// 		return this.$store.state.wallList;
+		// 	},
+		// },
+		methods: {
+			navbarBackClk() {
+				if(!this.$refs.viewMask){
+					this.$router.go(-1);
+					return false
+				}
+				if (this.$refs.viewMask.showAIImage) {
+					this.$refs.viewMask.showOrHideWebGl();//隐藏显示的AI生图
+					// if(this.currentActor.userIndex!=this.defaulIndex){//当前不是默认视角了
+						this.switchActor(this.defaulIndex);//切换到默认视角
+					// }
+				} else {
+					this.$router.go(-1);
+				}
+			},
+			switchActor(){},
+			positionCamer(){},
+			clearHandle(){
+				this.clearEvent();
+			},
+			save(){
+				this.$refs.viewMask.save();//下载
+			},
+			/**
+			 * 设置户型详情信息
+			 * @param {Object} data 户型详情
+			 */
+			setHouseDetail(data){
+				if(data){
+					this.id = data.id;
+					this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
+					console.warn("***curHouseObj***",data)
+					// 加载户型
+					this.loadSpace();
+				}else{
+					this.curHouseObj = {}
+				}
+			},
+            // 绘制空间-即地板
+            async loadSpace(){
+				this.spaceList = [];
+				this.wallIds = [];
+				if(!this.curHouseObj || !this.spaceId){//减少重复请求
+					alert("数据错误")
+					console.warn("***数据错误***")
+					return false
+				}
+                if(this.curHouseObj){
+                    const spaceDetail = this.curHouseObj;
+                    const spaceList = JSON.parse(spaceDetail.houseJson);
+                    // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
+                    for (let index = 0; index < spaceList.length; index++) {
+                        var element = spaceList[index];
+                        // const centerX = JSON.parse(JSON.stringify(element.centerX))
+						if(!element.actors || element.actors.length==0){
+							element.actors = [{
+								actorLocation:element.actorLocation,
+								actorTransform:element.actorTransform,
+								isSelected:true,
+							}]
+						}
+						element.actors.forEach(actor=>{
+							let _actorLoaction = actor.actorLocation.split(',');//x y z
+							let X_C = parseInt(_actorLoaction[0]);//X轴偏移量-UE原因
+							let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
+							let _x = element.centerX + X_C;
+							let _z = -element.centerY + Y_C;//centerY 要取反，因为UE里面是反向的
+							
+							// let _x = parseInt(_actorLoaction[1]) || element.centerX;//观察点 X轴坐标 
+							// let _z = parseInt(_actorLoaction[0]) || element.centerY;//观察点 Z轴坐标
+							let _presentX = (_x - element.centerX)/((element.spaceWidth/2) - 10);//10是墙壁厚度-单位cm
+							let _presentY = (_z + element.centerY)/((element.spaceHeight/2) - 10);
+							//注意如果一开始就设置大超过空间大小，则处理成贴近空间边界
+							actor.presentX = Math.abs(_presentX)>1 ? (_presentX>1?1:-1) : _presentX;//观察点跟空间中心原点的距离比例
+							actor.presentY = Math.abs(_presentY)>1 ? (_presentY>1?1:-1) : _presentY;
+						})
+						element.wallMoveValue = "[0,0,0,0]"
+                        this.spaceList.push(element);
+                        this.wallIds.push(element.wallId);
+
+                        if(element.spaceId == this.spaceId){ // 默认选中空间
+                            this.curSpaceObj = element;
+                        }
+                    }
+                    if(!this.curSpaceObj && this.spaceList.length > 0){
+                        this.curSpaceObj = this.spaceList[0];
+                    }
+                }
+				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
+				this.navbar.title = this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
+				document.title = this.navbar.title;
+                console.log("该户型空间数据:", this.spaceList);
+                console.log("当前选中的空间:", this.curSpaceObj);
+				this.positionCamer(this.curSpaceObj);
+				this.loaderSpaceArr(this.spaceList);//绘制地板
+                // 获取墙体数据并且绘制墙体
+                this.getHouseTypeSpaceWalls();
+            },
+			changeSpace(spaceId){
+				console.warn("***changeSpace***",spaceId,this.spaceId)
+				if(spaceId == this.spaceId){
+					return false;
+				}
+				this.spaceId = spaceId;
+				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);
+				this.navbar.title = this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
+				document.title = this.navbar.title;
+			},
+			// 获取墙体数据
+            async getHouseTypeSpaceWalls(){
+				let wallList = [];
+				if(this.wallList){
+					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})
+                            // console.log("wallModelData", element,wallData.wallDirection, wallModelData.wallType );
+                        }
+                    }
+                }
+                this.loadSpaceObjWalls(wallArr, wallList);
+				this.getOverallArrangementDetailsList();//
+            },
+            // 加载单个空间墙体资源
+            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.setSpaceListWallInfo();
+					this.$nextTick(()=>{
+						// this.moveMeshCenter(this.curSpaceObj);
+						this.progress = 100;
+						// this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
+						this.$nextTick(()=>{
+							this.myLoadingStatus = false;
+							// this.$refs.myLoading.hideLoading();
+							// this.meshRoam(this.curSpaceObj);//开始漫游，必须先选中模型
+						})
+					})
+				})
+            },
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    @import "./webgl_rxdz_test_roam.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_test_roam/webgl_rxdz_test_roam.html

@@ -9,20 +9,8 @@
 <div class="main-view">
 	<mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" />
 	<!-- 主要操作视图 -->
-	<!-- <viewShell pageType="2" :spaceObj="curSpaceObj" @hideOrShowActor="hideOrShowActor"></viewShell> -->
-	<!-- <my-loading ref="myLoading" :myLoadingStatus="myLoadingStatus"></my-loading>
-	<div id="status" style="position:fixed;top:100px;left:30px;cursor:pointer;opacity:0.9;z-index:10000">
-		<canvas id="FPS" type="2d" style="width:80px;height:48px"></canvas>
-		<canvas id="MS" type="2d" style="width:80px;height:48px"></canvas>
-	</div> -->
-	<div id="mapDiv" ref="webgl"></div>
-	<canvas id="canvas_webgl" type="webgl" ref="glcanvas"
-		 width="100vw" 
-		:style="{'height':canvasHeight+'px'}">
-	</canvas>
 	<!-- AI结果覆盖层 -->
-	<viewMask ref="viewMask" @switchActor="switchActor" style="z-index: 13;"
-	  :spaceObj="curSpaceObj" :spaceList="spaceList" :layoutList="arrFrunList" ></viewMask>
+	<viewMask ref="viewMask"  style="z-index: 13;" ></viewMask>
 	<!-- 生成截屏的画布对象 -->
-	<canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px'}"></canvas>
+	<!-- <canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px'}"></canvas> -->
 </div>

src/pages/webgl_rxdz_test_roam/webgl_rxdz_test_roam.vue

@@ -1,31 +1,14 @@
 <template src="./webgl_rxdz_test_roam.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 TWEEN from 'three/addons/libs/tween.module.js';
 	import {getStorage} from '@/utils/localStorage';
 	var requestId = "";
     const util = require('@/utils/util.js').default;
-	// import util from '@/utils/util.js';
-    // const config = require('@/services/urlConfig.js');
-    // import requestConfig from '@/static/lib/requestConfig.js';
-	import viewShell from'@/components/newQCCom/viewShell/viewShell.vue';
 	import viewMask from'@/components/newQCCom/viewMask/viewMask.vue';
-
-	// import { RGBELoader } from '@/webgl/jsm/loaders/RGBELoader.js';
-	import screenshot from '@/mixins/screenshot.js';
-	import floorMethod from '@/mixins/floorMethod.js';
-	import loadModel from '@/mixins/loadModel.js';
-	import wallMethod from '@/mixins/wallMethod.js';
 	import commonPageMethod from '@/mixins/commonPageMethod.js';
-	// import commonPageMethod from '@/common/commonPageMethod.js';
-    // const app = getApp(); //获取应用实例
     export default {
-		components:{viewShell,viewMask},
-		mixins:[screenshot,loadModel,floorMethod,wallMethod,commonPageMethod],
+		components:{viewMask},
+		mixins:[commonPageMethod],
         /**
          * 页面的初始数据
          */
@@ -52,84 +35,13 @@
 				    pageName: this.pvCurPageName,
 				},
                 id:'',// 户型编号
-                spaceList:[], // 空间列表
-                gltfSpaces:[], // 场景中地板模型数组
-				gltfSpaceRoofs:[],
-                curSpaceObj:null, // 当前选中的空间
-                // curSpaceIndex:-1, // 当前选中的空间索引
-				spaceId:null,
-                wallIds:[], // 空间墙体id
-				// wallList:[], // 墙体数据
-                gltfWalls:[], // 场景中墙体模型数组
-                loader:null,
-                scene:null,
-                // sky:null,
-                camera:null,
-				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
-				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
-				cameraLastPosition: null,		//摄像头上一次移动到的位置
-				controlLastPosition: null,		//观察点上一次移动到的位置
-				canvasHeight:408,	//canvas视图的高度-计算得出
-				chooseMesh:null,//标记鼠标拾取到的mesh
-				shottingImg: [],
-				progress:1,	//进度条
-				myLoadingStatus:false,
-				// textGeoList:[],
-				repeatFlag:false,	//重复点击
-				// skyPlan: null, // 天空盒子
-				instancedMeshList: [],
-				screenshotResolve:null,
-				actors:[],
-				showDownView:true,//默认显示下载按钮
-				currentActor:null,
-				circleGroup:null,//圆形地标
+                spaceId:'',
 				isIOS:false,
 				defaulIndex:null,	//默认视角的序号
-				// aiImagesList:[
-				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM01.png",
-				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM02.png",
-				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM03.png",
-				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM04.png",
-				// ]
+				repeatFlag:false,	//重复点击
+				canvasHeight:408,	//canvas视图的高度-计算得出
             }
         },
-		beforeDestroy() {
-			cancelAnimationFrame(requestId, this.canvas)
-			this.worker && this.worker.terminate()
-			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()
-			}
-			TWEEN && TWEEN.removeAll();//清除所有的tween;
-			console.warn("***beforeDestroy-webgl_rxdz_roam***");
-		},
         mounted(options) {
 			var that = this;
 			// alert("JavaScript 堆大小限制: "+performance.memory.jsHeapSizeLimit
@@ -137,13 +49,13 @@
 			// +"\nJavaScript 堆的总大小: "+performance.memory.totalJSHeapSize);
 			console.warn("***webgl_rxdz_roam-options***",this.$route.query)
 			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-			if(this.isIOS){
-				this.curHouseObj = JSON.parse(getStorage('curHouseObj'));
-				this.wallList = JSON.parse(getStorage('wallList'));
-			}else{
-				this.curHouseObj = 	this.$store.state.curHouseObj;
-				this.wallList = 	this.$store.state.wallList;
-			}
+			// if(this.isIOS){
+			// 	this.curHouseObj = JSON.parse(getStorage('curHouseObj'));
+			// 	this.wallList = JSON.parse(getStorage('wallList'));
+			// }else{
+			// 	this.curHouseObj = 	this.$store.state.curHouseObj;
+			// 	this.wallList = 	this.$store.state.wallList;
+			// }
 			// alert("***mounted-webgl_rxdz_roam***"+this.isIOS + this.curHouseObj)
 			let screenWidth = window.screen.width;
 			let screenHeight = window.screen.height;
@@ -157,603 +69,7 @@
 			this.canvasHeight = screenHeight - (600 * unit) + (40 * unit);
 			this.houseId = this.$route.query.houseId?this.$route.query.houseId:'';
 			this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
-			let container = this.$refs.webgl;
-            let canvas3d = this.canvas = this.$refs.glcanvas;
-			//uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm
 			
-			let camera = null, renderer = null;
-			let needRender = false;	//是否需要渲染 false表示不需要渲染；true 表示需要渲染
-            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 = true;//是否进入漫游状态-默认是
-			//漫游时变量
-			let onPointerDownMouseX = 0, onPointerDownMouseY = 0,
-			lon = 0;
-			let fingerCount = 0;	//触摸时的手指数目
-			let startTime = 0;	//非漫游时的移动变量
-			let tweenCameraAnma = false;	//表示当前是否处在动画过程中
-			let controls = null,boundary=null;
-			let stats;
-			init();
-			// this.$refs.myLoading.showLoading("加载中...1%")
-			this.$store.state.loadingMsg="加载中...1%";
-			// this.myLoadingStatus = true;
-			this.progress = 1;
-			this.clearEvent = clearEvent;
-			this.attendEvent = attendEvent;
-			// this.meshRoam = meshRoam;
-			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
-			this.switchActor = switchActor;
-			this.starRender = starRender;//对外暴露启动渲染的方法
-			this.stopRender = stopRender;//对外暴露停止渲染的方法
-			this.positionCamer = positionCamer;
-			if(this.curHouseObj && this.curHouseObj.id){
-				this.setHouseDetail(this.curHouseObj);
-			}
-			function init() {
-
-                scene.background = new THREE.Color("#FFFFFF");
-				// scene.environment = new THREE.Color("#F2F2F2");
-				// 创建一个HDR贴图加载器
-				// const rgbeloader = new RGBELoader();
-				// // 加载HDR贴图
-				// rgbeloader.load('https://dm.static.elab-plus.com/miniProgram/environment.hdr', (texture) => {
-				// 	// 将HDR贴图设置为场景的环境贴图
-				// 	texture.mapping = THREE.EquirectangularReflectionMapping;
-				// 	scene.environment = texture;
-				// })
-
-				// 创建相机位置
-				camera = new THREE.PerspectiveCamera(90, screenWidth / that.canvasHeight, 0.1, 10000 );
-				// camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向 {x:0,y:1,z:0}
-				// camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
-				scene.add(camera);
-                that.camera = camera;
-
-                // 环境光会均匀的照亮场景中的所有物体
-				const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3.5);
-				scene.add(ambientLight);
-				//平行光
-				const light = new THREE.DirectionalLight(0xFFF8E5, 2.5);
-				light.position.set(5, 7, 3); //default; light shining from top
-				if(!that.isIOS){
-					light.castShadow = true; // default false
-					// 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域，光源投射方向为通过坐标原点
-					light.shadow.camera.left = -100; // 这个区域内产生阴影
-					light.shadow.camera.right  = 100; // 这个区域内产生阴影
-					light.shadow.camera.top  = 100; // 这个区域内产生阴影
-					light.shadow.camera.bottom  = -100; // 这个区域内产生阴影
-					
-					light.shadow.mapSize.width = 1024; 	// 影响阴影的清晰度
-					light.shadow.mapSize.height = 1024; // 影响阴影的清晰度
-				}
-				
-				scene.add(light);
-				
-				//antialias 这个值得设置为false，不然IOS上截图会失效
-                renderer = that.renderer = new THREE.WebGLRenderer( { 
-					canvas:canvas3d, 
-					alpha: true,
-					antialias:true,
-					preserveDrawingBuffer: 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, that.canvasHeight);
-                container.appendChild( renderer.domElement );
-				
-				controls = new OrbitControls( camera, renderer.domElement );
-				controls.enableDamping = true;//启动缓动
-				controls.minDistance = 0.0001;
-				controls.maxDistance = 10;
-				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;//启用摄像机的缩放
-				controls.enablePan = true;//禁用摄像机平移
-				controls.enableRotate = true;//启用摄像机水平或垂直旋转
-				// controls.zoomToCursor = true;
-				
-				// controls.target.copy(camera.position);
-				// controls.update();
-				// 监听相机移动事件-限制只能在当前空间范围内移动
-				controls.addEventListener('change', () => {
-					// 检查相机位置是否超出边界框
-					if (boundary && !boundary.containsPoint(camera.position)) {
-						let clampedPosition = new THREE.Vector3( );
-						boundary.clampPoint(camera.position,clampedPosition);
-						if(clampedPosition){
-							camera.position.copy(clampedPosition);
-							// controls.target.copy(clampedPosition);
-						}
-					}
-				});
-				// controls.target = new THREE.Vector3( );;
-				// camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
-                raycaster = new THREE.Raycaster();
-				// stats = new Stats();
-				// container.appendChild(stats.dom);
-				// stats.domElement.style.top = '100px';
-				attendEvent();//注册监听事件
-				starRender();	//启动渲染
-            }
-			function tweenCameraAnmaChange (value) {
-				tweenCameraAnma = value
-			}
-			function attendEvent () {
-				renderer && renderer.domElement && renderer.domElement.addEventListener('touchstart', onPointerStart, false);
-				renderer && renderer.domElement && renderer.domElement.addEventListener('touchmove', onPointerMove, false);
-				renderer && renderer.domElement && renderer.domElement.addEventListener('touchend', onPointerUp, false);
-			}
-			//取消事件监听-避免二次进入时触发多次事件
-			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){
-				startTime = (new Date()).getTime();
-				fingerCount = event.touches.length;//手指个数
-				console.log('开始触摸事件：',lon,fingerCount,camera.position.y)
-				if (fingerCount === 1) {
-					// 只有一个手指时记录当前点的坐标作为平移起始点
-					onPointerDownMouseX = event.changedTouches[0].clientX;
-					onPointerDownMouseY = event.changedTouches[0].clientY;
-				}
-			}
-			//持续触摸中
-			function onPointerMove( event ) {
-				fingerCount = event.touches.length;//手指个数
-			}
-			//触摸结束
-			function onPointerUp(event) {
-				fingerCount = event.touches.length;//手指个数
-				console.warn("***触摸结束***",fingerCount,startTime)
-				if(fingerCount==0){
-					let now = new Date().getTime()
-					if (Math.abs(event.changedTouches[0].clientX - onPointerDownMouseX) < 10 
-					&& Math.abs(event.changedTouches[0].clientY - onPointerDownMouseY) < 10 
-					&& (now - startTime) < 300 ){
-						checkIntersection(event);
-					}
-				}
-			}
-			//射线检测handle
-			function checkIntersection(event) {
-			    let x = (event.changedTouches[0].clientX / screenWidth) * 2 - 1;
-			    let y = -(event.changedTouches[0].clientY / that.canvasHeight) * 2 + 1;
-			    mouse.x = x;
-			    mouse.y = y;
-			    //更新射线
-			    raycaster.setFromCamera(mouse, camera);
-			    let intersects = raycaster.intersectObjects(scene.children,true);
-				console.warn("***checkIntersection***",intersects.length)
-			    if (intersects.length > 0) {
-					//找到最近的那个网格模型物体
-					let mesh = intersects.find((it) => {
-						if(it.object && it.object.isMesh == true  
-							&& it.object.parent && it.object.parent.name == 'actor'
-							&& it.object.parent.visible == true){
-							return true;
-						}
-					});
-					
-					//拾取到了视角，就不继续拾取了
-					if(mesh){
-						moveActor(mesh.object.parent);
-						return false;
-					}
-					mesh = intersects.find((it) => {
-						if(it.object && it.object.isInstancedMesh
-							&& (it.object.name == '地板' || it.object.name == '花园') && it.object.visible == true){
-							return true;
-						}
-					});
-					//拾取到了地板
-					if(mesh){
-						let floor = mesh.object;
-						let index = mesh.instanceId;//射线相交是的实例序号
-						let spaceId = that.gltfSpaces[index].spaceId;//获取选中实例的空间id
-						if(floor.name == "花园"){//花园
-							return false;
-							let selectMesh = that.gltfSpaces.find(it=>{return it.spaceType==14 && it.instancedMeshIndexList[0].instancedAtIndex==index})
-							spaceId = selectMesh.spaceId;
-						}else{//室内
-							// floor.name = "地板";
-							let selectMesh = that.gltfSpaces.find(it=>{return it.spaceType!=14 && it.instancedMeshIndexList[0].instancedAtIndex==index})
-							spaceId = selectMesh.spaceId;
-						}
-						// let spaceId = that.gltfSpaces[index].spaceId;//获取选中实例的空间id
-						console.warn("***checkIntersection-地板***",floor,index,spaceId,that.spaceId)
-						//当前拾取到的是本空间的底部-意味着用户点击了地板
-						if(floor && spaceId == that.spaceId){
-							moveCarmer(mesh.point);
-							return false;
-						}
-					}
-			    }
-			}
-			//自动切换视角
-			function switchActor (toIndex=null) {
-				if(!that.currentActor){
-					this.$message.warning("没有当前视角!");
-					return false;
-				}
-				if(!that.actors || that.actors.length==0){
-					this.$message.warning("没有视角!");
-					return false;
-				}
-				if(toIndex!=null){//存在要去往的视角
-					moveActor(that.actors[toIndex]);
-				}else{
-					let index = that.currentActor.userIndex;//当前视角的序号
-					let nextIndex = (index + 1) % that.actors.length;
-					//移动到对应的视角去
-					moveActor(that.actors[nextIndex]);
-					that.defaulIndex = nextIndex;//更新下默认视角
-				}
-			}
-			//移动到选中的位置-地板
-			function moveCarmer (point) {
-				//还在动画中，不能点击切换
-				if(tweenCameraAnma == true){
-					return false;
-				}
-				let _x =  point.x - camera.position.x;//x轴移动的距离
-				let _z =  point.z - camera.position.z;//z轴移动的距离
-				let cameraNewPosition = {x:camera.position.x + _x,y:1.5,z:camera.position.z + _z};
-				let targetNewPosition = {x:controls.target.x + _x,y:1.5,z:controls.target.z + _z};
-				let oldUp = {x:0,y:1,z:0};	
-				let newUp = {x:0,y:1,z:0};
-				moveTip(cameraNewPosition)
-				// console.warn("**moveCarmer***",lon,JSON.stringify(cameraNewPosition),JSON.stringify(targetNewPosition))
-				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
-				setTimeout(()=> {
-					that.circleGroup.visible = false;
-				}, 2000);
-			}
-			//创建地标
-			function creatMoveTip(position){
-				if(!that.circleGroup){
-					that.circleGroup = new THREE.Group();
-					let geometry = new THREE.CircleGeometry( 0.2, 32 );
-					let material = new THREE.MeshBasicMaterial( { transparent: true } );
-					let circle = new THREE.Mesh( geometry, material );
-					circle.position.set(position.x,0.01,position.z);
-					circle.rotation.x = -Math.PI / 2;
-					// let geometry1 = new THREE.CircleGeometry( 0.4, 32 );
-					// let circle2 = new THREE.Mesh( geometry1, material );
-					// circle2.position.set(position.x,0.01,position.z);
-					// 使用贴图
-					const textureLoader = new THREE.TextureLoader();
-					textureLoader.load('https://dm.static.elab-plus.com/miniProgram/circlemap1.png', function(texture) {
-						material.map = texture; // 将贴图应用于材质的map属性
-						material.needsUpdate = true; // 更新材质
-					});
-					that.circleGroup.add(circle);
-					scene.add(that.circleGroup);
-					that.circleGroup.visible = false;
-				}
-			}
-			//移动地标
-			function moveTip(position){
-				if(!that.circleGroup){
-					that.circleGroup = new THREE.Group();
-					let geometry = new THREE.CircleGeometry( 0.2, 32 );
-					let material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
-					let circle = new THREE.Mesh( geometry, material );
-					circle.position.set(position.x,0.01,position.z);
-					circle.rotation.x = -Math.PI / 2;
-					// let geometry1 = new THREE.CircleGeometry( 0.4, 32 );
-					// let circle2 = new THREE.Mesh( geometry1, material );
-					// circle2.position.set(position.x,0.01,position.z);
-					that.circleGroup.add(circle);
-					scene.add(that.circleGroup);
-				}else{
-					that.circleGroup.visible = true;
-					that.circleGroup.children[0].position.set(position.x,0.01,position.z);
-				}
-			}
-			//移动视角点位
-			function moveActor (obj) {
-				clearEvent();//注销事件监听
-				// console.warn("***moveActor***",obj)
-				that.currentActor = obj;//记录下当前的视角对象 mesh网格模型
-				let cameraNewPosition = obj.position;
-				let targetNewPosition = obj.targetNewPosition;
-				let oldUp = {x:0,y:1,z:0};	//俯视
-				let newUp = {x:0,y:1,z:0};	//正视
-				// moveTip(cameraNewPosition);
-				// console.warn("**moveActor***",JSON.stringify(cameraNewPosition),JSON.stringify(targetNewPosition))
-				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
-				lon = 0;
-				setTimeout(()=> {
-					attendEvent()
-					// that.circleGroup.visible = false;
-				}, 2000);
-			}
-			//初始化点位视角
-			function initActor(){
-				if(!chooseMesh){
-					console.error("[drawActor],没有选中的空间数据")
-					return false;
-				}
-				let spaceObj = chooseMesh;//获取选中的空间模型的相关数据
-				if(!spaceObj.actors){
-					return false;
-				}
-				let defaulIndex = spaceObj.actors.findIndex(it=>it.isSelected==true);
-				if(defaulIndex == -1){
-					defaulIndex = 0;
-				}
-				that.defaulIndex = defaulIndex;//记录下默认视角
-				that.actors = [];
-				spaceObj.actors.forEach((actor,index)=>{
-					// let model = gltf.scene; // 获取模型
-					// let cloneModel = model.clone(true);//赋值模型，准备复用
-					// cloneModel.children.map((v,i)=>{
-					// 	if(v.material){
-					// 		v.material = model.children[i].material.clone()
-					// 	}
-					// })
-					// let cube = cloneModel;
-					let cube = {};
-					cube.name = "actor";
-					cube.userType = "mesh";
-					//新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
-					let _actorLoaction = actor.actorLocation.split(',');//x y z
-					let _actorTransform = actor.actorTransform.split(',');//旋转角度，取第三个值
-					let _hd = THREE.MathUtils.degToRad(parseInt(_actorTransform[2]));//将度转化为弧度。
-					let _hdY = THREE.MathUtils.degToRad(parseInt(_actorTransform[1]));//Y轴方向上将度转化为弧度。
-					// if(parseInt(_actorLoaction[1])==0){//X轴
-					// 	_actorLoaction[1] = spaceObj.centerX;
-					// }
-					// if(parseInt(_actorLoaction[0])==0){//Y轴
-					// 	_actorLoaction[0] = spaceObj.centerY;
-					// }
-					let X_C = parseInt(_actorLoaction[0]);//X轴偏移量
-					let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
-					let px = spaceObj.centerX + X_C;
-					let py = -spaceObj.centerY + Y_C;//UE里面的centerY值跟Three.js Y轴相反；获得真实的坐标值
-					let position = {
-						x:(parseInt(px))/100,
-						y:1.5, 
-						z:(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
-					}
-					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.5
-					let targetNewPosition = {
-						x:position.x + Math.sin(_hd),
-						y:1.5 + Math.tan(_hdY),
-						z:(position.z - Math.cos(_hd)),
-					}
-					cube.position = position;
-					cube.userIndex = index;
-					cube.actorEum = index;
-					cube.targetNewPosition = targetNewPosition;
-					// console.warn("*actors*",cube,defaulIndex)
-					that.actors.push(cube);//添加视角
-					if(index == defaulIndex){//隐藏当前视角
-						that.currentActor = cube;//记录下当前的视角对象 mesh网格模型
-						let param = {
-							type: 'CLK', //埋点类型
-							clkId: 'clk_2cmina_23080411', //点击ID
-							clkName: 'visualangle_clk', //点击前往的页面名称
-							clkParams: {
-								locusName: "预制视角",
-								type:that.actors[index].actorEum
-							}
-						};
-						util.trackRequest(param);
-					}
-				})
-			}
-			//计算当前选中空间的平视时的观察点和摄像机的放置点位
-			function roamPositionHandle(lon=''){
-				if(!chooseMesh){
-					console.error("[roamPositionHandle],没有选中的空间数据")
-					return false;
-				}
-				let spaceObj = chooseMesh;//获取选中的空间模型的相关数据
-				//获取视角
-				let defaultActor = null;
-				if(spaceObj.actors && spaceObj.actors.length>0){
-					defaultActor = spaceObj.actors.find(it=>it.isSelected==true);
-					if(!defaultActor){
-						defaultActor = spaceObj.actors[0];
-					}
-				}
-				let _actorLoaction = defaultActor.actorLocation.split(',');//x y z
-				let _actorTransform = defaultActor.actorTransform.split(',');//旋转角度，取第三个值
-				let _hd = THREE.MathUtils.degToRad(parseInt(_actorTransform[2]) + lon);//将度转化为弧度。
-				let _hdY = THREE.MathUtils.degToRad(parseInt(_actorTransform[1]));//Y轴方向上将度转化为弧度。
-				// if(parseInt(_actorLoaction[1])==0){//X轴
-				// 	_actorLoaction[1] = spaceObj.centerX;
-				// }
-				// if(parseInt(_actorLoaction[0])==0){//Y轴
-				// 	_actorLoaction[0] = spaceObj.centerY;
-				// }
-				let X_C = parseInt(_actorLoaction[0]);//X轴偏移量-UE原因
-				let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
-				let px = spaceObj.centerX + X_C;
-				let py = -spaceObj.centerY + Y_C;
-				//新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
-				let cameraNewPosition = {
-					x:(parseInt(px))/100,
-					y:1.5, 
-					z:(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
-				}
-				if(cameraNewPosition){
-					let minX = 0,maxX = 0,minY = 0,maxY = 0;//0.1 是模型墙壁厚度
-					minX = (spaceObj.centerX - (spaceObj.spaceWidth/2))/100 + 0.1;
-					maxX = (spaceObj.centerX + (spaceObj.spaceWidth/2))/100 - 0.1;
-					maxY = ((-spaceObj.centerY + (spaceObj.spaceHeight/2))/100 - 0.1);
-					minY = ((-spaceObj.centerY - (spaceObj.spaceHeight/2))/100 + 0.1);
-					//新的坐标轴不在房间范围内，则不能移动
-					if(cameraNewPosition.x<minX || cameraNewPosition.x>maxX
-					||cameraNewPosition.z<minY || cameraNewPosition.z>maxY){//不在房间范围
-						let _x = ((spaceObj.spaceWidth/2) - 15)*defaultActor.presentX + spaceObj.centerX;
-						let _z = ((spaceObj.spaceHeight/2) - 15)*defaultActor.presentY + (-spaceObj.centerY);
-						cameraNewPosition.x = _x/100;
-						cameraNewPosition.z = _z/100;
-						console.warn("**roamPositionHandle-观察点不在空间范围-强制修正观察点位置****",JSON.stringify(cameraNewPosition))
-					}
-				}
-				//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.5
-				let targetNewPosition = {
-					x:cameraNewPosition.x + Math.sin(_hd),
-					y:1.5 + Math.tan(_hdY),
-					z:(cameraNewPosition.z - Math.cos(_hd)),
-				}
-				let lookPosition = {
-					x:cameraNewPosition.x + (Math.sin(_hd)*0.01),
-					y:1.5 + Math.tan(_hdY),
-					z:(cameraNewPosition.z - (Math.cos(_hd))*0.01),
-				}
-				return {cameraNewPosition,targetNewPosition,lookPosition}
-			}
-			//直接定位到摄像头位置
-			function positionCamer(mesh=null,needAni=false){
-				if(mesh){//如果传入了模型，则取模型
-					chooseMesh = mesh;
-				}
-				if(!chooseMesh){
-					console.error("[positionCamer],没有选中的空间数据")
-					return false;
-				}
-				if(!chooseMesh.actors || chooseMesh.actors.length==0){
-					chooseMesh.actors = [{
-						actorLocation:chooseMesh.actorLocation,
-						actorTransform:chooseMesh.actorTransform,
-						isSelected:true,
-						presentX:chooseMesh.presentX,
-						presentY:chooseMesh.presentY,
-					}]
-				}
-				boundary = new THREE.Box3(
-					new THREE.Vector3(chooseMesh.centerX/100 - chooseMesh.spaceWidth/100/2 + 0.1, 0, -chooseMesh.centerY/100 - chooseMesh.spaceHeight/100/2 + 0.1), // 边界框的最小点
-					new THREE.Vector3(chooseMesh.centerX/100 + chooseMesh.spaceWidth/100/2 - 0.1, 2.7, -chooseMesh.centerY/100 + chooseMesh.spaceHeight/100/2 - 0.1) // 边界框的最大点
-				);
-				initActor();//初始化视角
-				let data = roamPositionHandle();
-				let cameraNewPosition = data.cameraNewPosition;
-				let targetNewPosition = data.targetNewPosition;
-				targetNewPosition.z = targetNewPosition.z;//增加偏差，防止极点翻转问题？不知道为啥会有用
-				let lookPosition = data.lookPosition;
-				creatMoveTip(cameraNewPosition);//创建移动的地标
-				if(needAni){
-					let oldUp = {x:0,y:1,z:0};	//俯视
-					let newUp = {x:0,y:1,z:0};	//正视
-					tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
-				}else{
-					camera.position.set(cameraNewPosition.x, cameraNewPosition.y, cameraNewPosition.z);
-					controls.target.set(lookPosition.x,lookPosition.y,lookPosition.z);
-					// controls.target.set(cameraNewPosition.x,cameraNewPosition.y,cameraNewPosition.z);
-					// controls.target.copy(camera.position);
-					camera.lookAt(targetNewPosition.x,targetNewPosition.y,targetNewPosition.z);
-				}
-			}
-			// 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;
-				}
-				if (!chooseMesh) {
-					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();
-				}).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(newT.x,newT.y,newT.z);
-					tweenCameraAnma = false;
-					that.repeatFlag = false;//放开限制，可以再次点击
-				})
-				// 开始动画
-				tween.start();
-			}
-
-			function stopRender () {
-				needRender = false;
-			}
-			function starRender () {
-				if(needRender==true){//如果已经在渲染中了，则不能再次开启，避免渲染过多
-					false;
-				}
-				needRender = true;
-				render();//开始渲染
-			}
-            function render() {
-				if(needRender==false){
-					return false;
-				}
-                TWEEN && TWEEN.update();
-				// stats.update();
-				renderer.render(scene, camera);//单次渲染
-				requestId = requestAnimationFrame(render, canvas3d);
-				if (that.screenshotResolve) {
-					stopRender();
-					that.screenshotResolve()
-					that.screenshotResolve = null;//释放Promise
-				}
-            }
-
 		},
 		// computed: {
 		// 	curHouseObj() {
@@ -778,167 +94,12 @@
 					this.$router.go(-1);
 				}
 			},
-			switchActor(){},
-			positionCamer(){},
 			clearHandle(){
-				this.clearEvent();
+				// this.clearEvent();
 			},
 			save(){
 				this.$refs.viewMask.save();//下载
 			},
-			/**
-			 * 设置户型详情信息
-			 * @param {Object} data 户型详情
-			 */
-			setHouseDetail(data){
-				if(data){
-					this.id = data.id;
-					this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
-					console.warn("***curHouseObj***",data)
-					// 加载户型
-					this.loadSpace();
-				}else{
-					this.curHouseObj = {}
-				}
-			},
-            // 绘制空间-即地板
-            async loadSpace(){
-				this.spaceList = [];
-				this.wallIds = [];
-				if(!this.curHouseObj || !this.spaceId){//减少重复请求
-					alert("数据错误")
-					console.warn("***数据错误***")
-					return false
-				}
-                if(this.curHouseObj){
-                    const spaceDetail = this.curHouseObj;
-                    const spaceList = JSON.parse(spaceDetail.houseJson);
-                    // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
-                    for (let index = 0; index < spaceList.length; index++) {
-                        var element = spaceList[index];
-                        // const centerX = JSON.parse(JSON.stringify(element.centerX))
-						if(!element.actors || element.actors.length==0){
-							element.actors = [{
-								actorLocation:element.actorLocation,
-								actorTransform:element.actorTransform,
-								isSelected:true,
-							}]
-						}
-						element.actors.forEach(actor=>{
-							let _actorLoaction = actor.actorLocation.split(',');//x y z
-							let X_C = parseInt(_actorLoaction[0]);//X轴偏移量-UE原因
-							let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
-							let _x = element.centerX + X_C;
-							let _z = -element.centerY + Y_C;//centerY 要取反，因为UE里面是反向的
-							
-							// let _x = parseInt(_actorLoaction[1]) || element.centerX;//观察点 X轴坐标 
-							// let _z = parseInt(_actorLoaction[0]) || element.centerY;//观察点 Z轴坐标
-							let _presentX = (_x - element.centerX)/((element.spaceWidth/2) - 10);//10是墙壁厚度-单位cm
-							let _presentY = (_z + element.centerY)/((element.spaceHeight/2) - 10);
-							//注意如果一开始就设置大超过空间大小，则处理成贴近空间边界
-							actor.presentX = Math.abs(_presentX)>1 ? (_presentX>1?1:-1) : _presentX;//观察点跟空间中心原点的距离比例
-							actor.presentY = Math.abs(_presentY)>1 ? (_presentY>1?1:-1) : _presentY;
-						})
-						element.wallMoveValue = "[0,0,0,0]"
-                        this.spaceList.push(element);
-                        this.wallIds.push(element.wallId);
-
-                        if(element.spaceId == this.spaceId){ // 默认选中空间
-                            this.curSpaceObj = element;
-                        }
-                    }
-                    if(!this.curSpaceObj && this.spaceList.length > 0){
-                        this.curSpaceObj = this.spaceList[0];
-                    }
-                }
-				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
-				this.navbar.title = this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
-				document.title = this.navbar.title;
-                console.log("该户型空间数据:", this.spaceList);
-                console.log("当前选中的空间:", this.curSpaceObj);
-				this.positionCamer(this.curSpaceObj);
-				this.loaderSpaceArr(this.spaceList);//绘制地板
-                // 获取墙体数据并且绘制墙体
-                this.getHouseTypeSpaceWalls();
-            },
-			changeSpace(spaceId){
-				console.warn("***changeSpace***",spaceId,this.spaceId)
-				if(spaceId == this.spaceId){
-					return false;
-				}
-				this.spaceId = spaceId;
-				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);
-				this.navbar.title = this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
-				document.title = this.navbar.title;
-			},
-			// 获取墙体数据
-            async getHouseTypeSpaceWalls(){
-				let wallList = [];
-				if(this.wallList){
-					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})
-                            // console.log("wallModelData", element,wallData.wallDirection, wallModelData.wallType );
-                        }
-                    }
-                }
-                this.loadSpaceObjWalls(wallArr, wallList);
-				this.getOverallArrangementDetailsList();//
-            },
-            // 加载单个空间墙体资源
-            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.setSpaceListWallInfo();
-					this.$nextTick(()=>{
-						// this.moveMeshCenter(this.curSpaceObj);
-						this.progress = 100;
-						// this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
-						this.$nextTick(()=>{
-							this.myLoadingStatus = false;
-							// this.$refs.myLoading.hideLoading();
-							// this.meshRoam(this.curSpaceObj);//开始漫游，必须先选中模型
-						})
-					})
-				})
-            },
         }
     }
 </script>

src/store/state.js

@@ -12,5 +12,6 @@ const state = {
 	curHouseObj:null,
 	curHouseType:null,	//当前选中的户型类型
 	houseList:[],	//当前项目下所有户型数据(以户型类型分组)
+	webglShow:true,
 }
 export default state