迁移

src/components/newBottomCom/viewCareful/viewCareful.html

@@ -1,33 +1,31 @@
 <!-- 精细调整操作视图 -->
-<view class="careful-view">
+<div class="careful-view">
 	<!-- 精细调整区域 -->
-	<scroll-view enable-flex="true" scroll-y :enhanced="true" :show-scrollbar="false">
-		<view class="careful-list">
-			<view class="careful-item rows rows-between" v-for="(carefulItem,index) in carefulList" :key="carefulItem.spaceId">
-				<view class="columns rows-between" style="width: 570rpx;">
-					<view class="item-top rows rows-between">
-						<view class="rows">
-							<view class="index-view rows justify-center">{{carefulItem.index+1}}</view>
-							<view class="name-view">{{carefulItem.name}}</view>
-						</view>
-						<view class="rows">
-							<view class="area-view">{{carefulItem.area}}㎡</view>
-							<view class="percent-view">{{carefulItem.percent}}%</view>
-						</view>
-					</view>
-					<view class="item-slider">
-						<slider style="margin:20rpx 16rpx" :disabled="overChange" class="moveProgress" :value="carefulItem.area"
-							@change="sliderChange($event,carefulItem)" @changing="sliderChanging($event,carefulItem)"
-							:activeColor="'#FFAD5C'" backgroundColor="#d2e0dd"
-							:block-color="'#FF9B0A'" block-size="16" step="0.1"
-							:min='carefulItem.minArea' :max='carefulItem.maxArea' />
-					</view>
-				</view>
-				<view class="ai-btn rows justify-center" @click="goRoam(carefulItem.spaceId)">
+	<div class="scroll-view">
+		<div class="careful-list">
+			<div class="careful-item rows rows-between" v-for="(carefulItem,index) in carefulList" :key="carefulItem.spaceId">
+				<div class="columns rows-between" style="width: 570rem;">
+					<div class="item-top rows rows-between">
+						<div class="rows">
+							<div class="index-view rows justify-center">{{carefulItem.index+1}}</div>
+							<div class="name-view">{{carefulItem.name}}</div>
+						</div>
+						<div class="rows">
+							<div class="area-view">{{carefulItem.area}}㎡</div>
+							<div class="percent-view">{{carefulItem.percent}}%</div>
+						</div>
+					</div>
+					<div class="item-slider">
+						<el-slider style="margin:20rem 16rem" :disabled="overChange" v-model="carefulItem.area"
+							@change="sliderChange($event,carefulItem)" :step="0.1"
+							:min='carefulItem.minArea' :max='carefulItem.maxArea' ></el-slider>
+					</div>
+				</div>
+				<div class="ai-btn rows justify-center" @click="goRoam(carefulItem.spaceId)">
 					美家
-				</view>
-			</view>
+				</div>
+			</div>
 			
-		</view>
-	</scroll-view>
-</view>
+		</div>
+	</div>
+</div>

src/components/newBottomCom/viewCareful/viewCareful.css

@@ -12,6 +12,9 @@
 .item-top{
 	width: 100%;
 }
+.scroll-view{
+	overflow-y: auto;
+}
 .careful-item .item-top .index-view{
 	width: 40rem;
 	height: 40rem;
@@ -53,4 +56,15 @@
 	font-weight: 400;
 	font-size: 24rem;
 	color: #f59d40;
-}
+}
+/deep/ .el-slider__runway{
+	.el-slider__bar{
+		background-color: #FFAD5C;
+	}
+	.el-slider__button{
+		background: #FF9B0A;
+		border: 2px solid #fff;
+	}
+}
+
+      

src/components/newBottomCom/viewCareful/viewCareful.vue

@@ -15,6 +15,7 @@
 			return {
 				selectItem:null,
 				carefulList:[],
+				value1:1,
 			}
 		},
 		props:{
@@ -41,14 +42,11 @@
 				},
 			},
 		},
-		// components:{
-		// 	bgLoading
-		// },
 		mixins: [],
 		async mounted() {//组件挂载时事件
 			// this.initData();
 			// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-			// currPage.updateCareFul = this.initData;//页面注册变更方法
+			this.$parent.$parent.updateCareFul = this.initData;//页面注册变更方法
 		},
 		// 页面被展示时执行
 		onPageShow: function() {  
@@ -82,10 +80,10 @@
 							spaceId:item.spaceId,
 							index:this.carefulList.length,
 							name:text,
-							area:curSpaceArea,
+							area:parseFloat(curSpaceArea),
 							percent:null,
-							minArea:minArea,	//最小面积
-							maxArea:maxArea,	//最大面积
+							minArea:parseFloat(minArea),	//最小面积
+							maxArea:parseFloat(maxArea),	//最大面积
 						}
 						this.carefulList.push(data)
 					}
@@ -110,7 +108,8 @@
 				// this.curWallMoveValue = Math.abs(this.curWallValue - wallValue);
 			},
 			sliderChange(e,item) {
-				console.log("滑块值：", e.detail.value);
+				let value = e.detail?e.detail.value:e;
+				console.log("滑块值：", value);
 				if(this.overChange){
 					uni.showToast({
 						title: '请慢一点!',
@@ -119,7 +118,7 @@
 					})
 					return false;
 				}
-				let _area = e.detail.value - parseFloat(item.area);
+				let _area = value - parseFloat(item.area);
 				let data = {
 					spaceId:item.spaceId,
 					area:Math.abs(_area),
@@ -146,18 +145,18 @@
 				// util.trackRequest(param);
 				console.log("发送消息-空间变化: ",data, JSON.stringify(item));
 				this.selectItem = item;
-				var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 				// this.sendMessageAction(JSON.stringify(parmas));
-				currPage.callBackFun = this.callBack;//通知回调
+				this.$parent.$parent.callBackFun = this.callBack;//通知回调
 				this.$emit("curSpaceChange",data);//通知父组件-当前已经选中了户型大类
 			},
 			goRoam(spaceId){
-				var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				currPage.goRoam1(spaceId);
+				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				this.$parent.$parent.goRoam1(spaceId);
 			},
 			callBack(type){
 				console.warn("***callBack***",type)
-				var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 				// if(type==false){
 				// 	this.carefulList = [];
				// 	this.$nextTick(()=>{
				// 		this.initData();
				// 	})
 				// }
@@ -165,12 +164,12 @@
 				this.$nextTick(()=>{
 					this.initData();
 				})
-				currPage.callBackFun = null;
+				this.$parent.$parent.callBackFun = null;
 			}
 		}
 	}
 </script>
-<style lang="css" scoped>
-    @import "./viewCareful.css";
+<style lang="scss" scoped>
+    @import "./viewCareful.scss";
 	/* @import "@/common/css/common.css"; */
 </style>

src/components/newBottomCom/viewMask/viewMask.html

@@ -44,15 +44,15 @@
 		<div class="signscoll-block"></div>
 		<!-- 精装修 -->
 		<div class="aiEdit">
-			<scroll-view scroll-x="true" class="aiStyleList" :style="{'height':disableAble?'20rpx':'240rpx'}">
+			<div class="aiStyleList" :style="{'height':disableAble?'20rpx':'240rpx'}">
 				<div class="scrollViewItem" v-for="(item, idx) in styleList" :key="idx" :id="'styleItem'+idx"
 					@click.stop="selectStyle(idx)">
 					<div class="styleItem" :class="{'styleItemSelected':curStyleIndex==idx}">
 						<img class="styleIcon" :src="item.imgUrl" mode="aspectFill"></image>
-						<text class="styleTitle">{{item.styleName}}</text>
+						<span class="styleTitle">{{item.styleName}}</span>
 					</div>
 				</div>
-			</scroll-view>
+			</div>
 			<div class="aiTool">
 				<div class="changeBtn" v-if="showAIFlag" @click.stop="changeAIImg">
 					<span v-if="checked==false" class="iconfont icon-xingzhuang-tuoyuanxing" style="margin-right:10rpx;font-size:36rpx;"></span>

src/components/newBottomCom/viewMask/viewMask.scss

@@ -135,7 +135,6 @@
 			height: 100%;
 			display: flex;
 			flex-direction: column;
-			justify-content: center;
 			align-items: center;
 
 			/* background: red; */

src/components/newBottomCom/viewMask/viewMask.vue

@@ -2,11 +2,11 @@
 
 </template>
 <script>
-	const util = require('@/static/utils/util.js');
-	const config = require('@/static/config.js');
-	import touchHandle from '@/common/mixins/touchHandle.js';
-	import requestConfig from '@/static/lib/requestConfig';
-	const app = getApp(); //获取应用实例
+	const util = require('@/utils/util.js').default;
+	const config = require('@/services/urlConfig.js');
+	import touchHandle from '@/mixins/touchHandle.js';
+	// import requestConfig from '@/static/lib/requestConfig';
+	// const app = getApp(); //获取应用实例
 	export default {
 		mixins: [touchHandle],
 		data: function() {
@@ -14,14 +14,6 @@
 				currentIndex:0,	//当前看到的图片序号
 				showAIImage: false,//是否显示当前AI结果集合 默认不显示，因为没有
 				aiImagesList:[
-					// {
-					// 	image:"https://dm.static.elab-plus.com/miniProgram/plus_IM01.png",
-					// 	checked:false,
-					// },
-					// {
-					// 	image:"https://dm.static.elab-plus.com/miniProgram/plus_IM02.png",
-					// 	checked:false,
-					// }
 				],//AI生成的图片列表
 				
 				styleList: [], //风格列表数据
@@ -159,26 +151,24 @@
 			},
 			//视角切换
 			switchActor(){
-				let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				// currPage.clearHandle()
+				this.$parent.clearHandle()
 				this.$emit('switchActor');
 				this.showAIImage = false;//隐藏AI结果集合-执行切换视角
-				let index = currPage.currentActor.userIndex;//当前视角的序号
-				let nextIndex = (index + 1) % currPage.actors.length;
+				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:currPage.actors[nextIndex].actorEum
+						type:this.$parent.actors[nextIndex].actorEum
 					}
 				};
 				util.trackRequest(param);
 			},
 			showOrHideWebGl(){
-				let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				currPage.clearHandle()
+				this.$parent.clearHandle()
 				this.showAIImage = !this.showAIImage;
 				let param = {
 					type: 'CLK', //埋点类型
@@ -191,9 +181,9 @@
 				util.trackRequest(param);
 				setTimeout(()=> {
 					if(this.showAIImage==true){
-						currPage.clearHandle()
+						this.$parent.clearHandle()
 					}else{
-						currPage.attendEvent()
+						this.$parent.attendEvent()
 					}
 				}, 100);
 			},
@@ -206,11 +196,12 @@
 				var _resultImg = this.aiImagesList[this.currentIndex].image;
 			    //正在选择照片，不能生效
 			    if (!_resultImg || _resultImg.length==0) {
-					uni.showToast({
-					    title: "请选中图片后再试!",
-					    icon: 'none',
-					    duration: 1500,
-					})
+					// uni.showToast({
+					//     title: "请选中图片后再试!",
+					//     icon: 'none',
+					//     duration: 1500,
+					// })
+					this.$store.state.loadingMsg="请选中图片后再试";
 			        return false;
 			    }
 			    let that = this;
@@ -262,12 +253,13 @@
 				    uni.saveImageToPhotosAlbum({
 				        filePath: _resultImg,
 				        success(result) {
-				            uni.hideLoading();
-				            uni.showToast({
-				                title: "保存成功！",
-				                icon: 'success',
-				                duration: 1500,
-				            })
+				            // uni.hideLoading();
+				            // uni.showToast({
+				            //     title: "保存成功！",
+				            //     icon: 'success',
+				            //     duration: 1500,
+				            // })
+							this.$store.state.loadingMsg="保存成功！";
 				        },
 				        fail(err) {
 				            uni.hideLoading();
@@ -281,12 +273,13 @@
 				            uni.saveImageToPhotosAlbum({
 				                filePath: res.tempFilePath,
 				                success(result) {
-				                    uni.hideLoading();
-				                    uni.showToast({
-				                        title: "保存成功！",
-				                        icon: 'success',
-				                        duration: 1500,
-				                    })
+				                    // uni.hideLoading();
+				                    // uni.showToast({
+				                    //     title: "保存成功！",
+				                    //     icon: 'success',
+				                    //     duration: 1500,
+				                    // })
+									this.$store.state.loadingMsg="保存成功！";
 				                },
 				                fail(err) {
 				                    uni.hideLoading();
@@ -302,12 +295,10 @@
 		
 			//选项变更
 			changeAIImg() {
-				// let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 				let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
 				this.checked = !this.checked;//变更选项
 				this.aiImagesList[this.currentIndex].checked = this.checked;
 				console.warn("***changeAIImg***",this.checked)
-				// currPage.aiImagesList[this.currentIndex].checked = this.checked;
 				if(lastPage){//给上一个页面回传生成的数据
 					let space = lastPage.postAIData.find(it=>{
 						return it.spaceId == this.spaceObj.spaceId
@@ -342,10 +333,9 @@
 			},
 			//获取AI风格列表
 			async getAiBeautyFamily() {
-				let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 				// const spaceName = this.spaceTypes[this.spaceObj.spaceType - 1].title;
 				let res = await requestConfig("getHardboundEffects", {
-					"houseId": currPage.houseId,
+					"houseId": this.$route.query.houseId,
 					"spaceType": this.spaceObj.spaceType,
 				});
 				this.styleList = [];
@@ -355,12 +345,11 @@
 				}
 				if(!this.styleList || this.styleList.length==0){
 					this.disableAble = true;//不能点击-没有风格
-					let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 					let unit = app.globalData.systemInfo.screenWidth / 750;//单位rpx 对应 px 的值
-					currPage.canvasHeight = app.globalData.systemInfo.screenHeight - (208 * unit);
-					currPage.camera.aspect = app.globalData.systemInfo.screenWidth / currPage.canvasHeight;
-					currPage.camera.updateProjectionMatrix();
-					currPage.renderer.setSize(app.globalData.systemInfo.screenWidth, currPage.canvasHeight);
+					this.$parent.canvasHeight = app.globalData.systemInfo.screenHeight - (208 * unit);
+					this.$parent.camera.aspect = app.globalData.systemInfo.screenWidth / this.$parent.canvasHeight;
+					this.$parent.camera.updateProjectionMatrix();
+					this.$parent.renderer.setSize(app.globalData.systemInfo.screenWidth, this.$parent.canvasHeight);
 				}else{
 					this.disableAble = false;//可以点击
 				}
@@ -400,7 +389,6 @@
 					return
 				}
 				this.aiFlag = true;
-				let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 				if (this.aiImage == "" || !this.aiImage) {
 					this.aiImage = ""; // https://dm.static.elab-plus.com/CE4/backImg.png
 				}
@@ -408,21 +396,23 @@
 			
 				this.clearInterval();
 				if(!this.showAIImage){
-					uni.showLoading({
-						title: "设计中...",
-					});
+					// uni.showLoading({
+					// 	title: "设计中...",
+					// });
+					this.$store.state.loadingMsg="设计中...";
 				}
 				
 				// this.inputBase64Url = await this.shottingAction(2);//开始截图-返回的是base64的数据
 				// this.startServer();
-				if(type==1){//AI生成时，重新截图，继续生成时，不重新截图
+				// if(type==1){//AI生成时，重新截图，继续生成时，不重新截图
 					this.$emit('hideOrShowActor','hide');//隐藏所有视角
-					let shottingImg = await currPage.shottingAction();//开始截图-返回的是图片
-					shottingImg += "?imageMogr2/auto-orient/format/webp/blur/1x0/quality/75";//压缩图片
-					this.shottingImg = shottingImg;
+					let base64 = await this.$parent.shottingAction(2);//开始截图-返回的是base64
+					// let shottingImg = await this.$parent.shottingAction(2);//开始截图-返回的是base64
+					// shottingImg += "?imageMogr2/auto-orient/format/webp/blur/1x0/quality/75";//压缩图片
+					// this.shottingImg = shottingImg;
 					this.$emit('hideOrShowActor','show');//显示选中的视角
-				}
-				this.changeImg2Base64(this.shottingImg, type==1?false:true);
+				// }
+				this.changeImg2Base64(base64, false);
 				console.warn("***shottingImg***",this.shottingImg)
 				if(type==1){
 					let param = {
@@ -454,24 +444,27 @@
 					util.trackRequest(param);
 				}
 			},
-			changeImg2Base64(url, isRepeat) {
+			changeImg2Base64(Base64Url, isRepeat) {
 				var self = this;
 				if(isRepeat && self.inputBase64Url){//重复使用
 					self.startServer();
 				}else{
-					uni.request({
-						url: url,
-						method: "GET",
-						responseType: "arraybuffer",
-						success: async (res) => {
-							let base64 = wx.arrayBufferToBase64(res.data);
-							let Base64Url = "data:image/jpeg;base64," + base64;
-							// console.log('base64：', Base64Url);
-							self.inputBase64Url = Base64Url;
-							console.log("生成inputBase64Url");
-							self.startServer();
-						},
-					});
+					self.inputBase64Url = Base64Url;
+					console.log("生成inputBase64Url");
+					self.startServer();
+					// uni.request({
+					// 	url: url,
+					// 	method: "GET",
+					// 	responseType: "arraybuffer",
+					// 	success: async (res) => {
+					// 		let base64 = wx.arrayBufferToBase64(res.data);
+					// 		let Base64Url = "data:image/jpeg;base64," + base64;
+					// 		// console.log('base64：', Base64Url);
+					// 		self.inputBase64Url = Base64Url;
+					// 		console.log("生成inputBase64Url");
+					// 		self.startServer();
+					// 	},
+					// });
 				}
 			},
 			//开始图生图流程
@@ -492,12 +485,8 @@
 				}
 				let res1 = await requestConfig("AIuploadImgControlNet", data);
 				if(!res1 || !res1.single){
-					uni.hideLoading();
 					this.aiFlag = false;
-					uni.showToast({
-						icon: "none",
-						title: "渲染失败，请重试",
-					});
+					this.$store.state.loadingMsg="渲染失败，请重试";
 					this.aiImage = "";
 					return false;
 				}
@@ -513,12 +502,8 @@
 				
 				let res2 = await requestConfig("AIuploadImgControlNet", data);
 				if(!res2 || !res2.success){
-					uni.hideLoading();
 					this.aiFlag = false;
-					uni.showToast({
-						icon: "none",
-						title: "渲染失败，请重试",
-					});
+					this.$store.state.loadingMsg="渲染失败，请重试";
 					this.aiImage = "";
 					return false;
 				}
@@ -543,20 +528,20 @@
 				};
 				let res = await requestConfig("generateTaskImgToImgForAliyun", parmas);
 				console.log("图生图结果：", res);
-				let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				if(currPage && currPage.pvCurPageName!="room_show"){//说明用户切换页面了
+				if(this.$parent.pvCurPageName!="room_show"){//说明用户切换页面了
 					console.warn("***用户已经退出页面***")
 					return false;
 				}
 				let that = this;
 				if (res.success && res.single) {
 					if(typeof(res.single)=="object"){
-						uni.showToast({
-							icon: "none",
-							title: `${
-								res.single.queueCount | 0
-							}人排队中，预计等待${Math.round(Math.random() * 20)}秒`,
-						});
+						// uni.showToast({
+						// 	icon: "none",
+						// 	title: `${
+						// 		res.single.queueCount | 0
+						// 	}人排队中，预计等待${Math.round(Math.random() * 20)}秒`,
+						// });
+						this.$store.state.loadingMsg=`${res.single.queueCount | 0 }人排队中，预计等待${Math.round(Math.random() * 20)}秒`;
 						this.aiImage = "";
 						this.aiFlag = false;
 						this.clearInterval();
@@ -572,12 +557,12 @@
 						}, 1000);
 					}
 				}else{
-					uni.hideLoading();
 					this.aiFlag = false;
-					uni.showToast({
-						icon: "none",
-						title: "渲染失败，请重试",
-					});
+					// uni.showToast({
+					// 	icon: "none",
+					// 	title: "渲染失败，请重试",
+					// });
+					this.$store.state.loadingMsg="渲染失败，请重试";
 					this.aiImage = "";
 				}
 			},
@@ -587,7 +572,6 @@
 					id: this.taskId,
 				};
 				let res = await requestConfig("generateProcess", parmas);
-				let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 				let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
 				// console.warn("图生图轮询结果：", res);
 				if (res.success && res.single) {
@@ -607,8 +591,8 @@
 							}
 							this.aiImagesList.push(_data);
 							this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
-							if(currPage && typeof(currPage.clearHandle)=="function" ){
-								currPage.clearHandle();
+							if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
+								this.$parent.clearHandle();
 							}
 							if(lastPage && lastPage.postAIData){//给上一个页面回传生成的数据
 								let space = lastPage.postAIData.find(it=>{
@@ -639,12 +623,13 @@
 							this.clearInterval();
 						} else {
 							if (!res.success) {
-								uni.hideLoading();
+								// uni.hideLoading();
 								this.aiFlag = false;
-								uni.showToast({
-									icon: "none",
-									title: "渲染失败，请重试",
-								});
+								// uni.showToast({
+								// 	icon: "none",
+								// 	title: "渲染失败，请重试",
+								// });
+								this.$store.state.loadingMsg="渲染失败，请重试";
 								this.aiImage = "";
 								this.clearInterval();
 							}else {
@@ -653,22 +638,18 @@
 									this.random = 99;
 								}
 								if(!this.showAIImage){
-									uni.showLoading({
-										icon: 'loading',
-										title: '生成中…' + this.random + '%'
-									})
+									// uni.showLoading({
+									// 	icon: 'loading',
+									// 	title: '生成中…' + this.random + '%'
+									// })
+									this.$store.state.loadingMsg='生成中…' + this.random + '%';
 								}else{
 									uni.hideLoading();
 								}
 							}
 						}
 					} else {
-						uni.showToast({
-							icon: "none",
-							title: `${
-								res.single.queueCount | 0
-							}人排队中，预计等待${Math.round(Math.random() * 20)}秒`,
-						});
+						this.$store.state.loadingMsg=`${res.single.queueCount | 0}人排队中，预计等待${Math.round(Math.random() * 20)}秒`;
 						this.aiImage = "";
 						this.aiFlag = false;
 						this.clearInterval();
@@ -683,5 +664,5 @@
     @import "./viewMask.scss";
 </style>
 <style lang="css" scoped>
-	@import "@/common/css/common.css";
+	/* @import "@/common/css/common.css"; */
 </style>

src/components/newBottomCom/viewShell/viewShell.css

@@ -52,6 +52,7 @@
 .floor-item{
 	height: 60rem;
 	color: #fff;
+	font-size: 28rem;
 }
 .floor-item.active{
 	color: #faa040;

src/components/newBottomCom/viewShell/viewShell.vue

@@ -97,10 +97,10 @@
 							_endHeight = 200;
 						}
 						// let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-						// if(currPage && currPage.hasOwnProperty('canvasHeight')){
-						// 	currPage.gradientResize(1,_starHeight,_endHeight)
-						// }
-						// currPage.styleType = newVal;//变更为展开状态
+						if(this.$parent && this.$parent.hasOwnProperty('canvasHeight')){
+							this.$parent.gradientResize(1,_starHeight,_endHeight)
+						}
+						this.$parent.styleType = newVal;//变更为展开状态
 					}
 				},
 			},

src/components/newBottomCom/viewStyle/viewStyle.vue

@@ -12,7 +12,7 @@
 	const plugin = requirePlugin("WechatSI");
 	// import bgLoading from "@/components/bgLoading/bgLoading.vue"
 	// import { nextTick } from "vue";
-	const app = getApp(); //获取应用实例
+	// const app = getApp(); //获取应用实例
 	// let positions = new Set();
 	export default {
 		data: function() {

src/components/newBottomCom/viewlayout/viewlayout.css

@@ -60,7 +60,8 @@
 	box-sizing: border-box;
 }
 .up{
-	width: 546rem;
+	/* width: 546rem; */
+	width: 690rem;
 	box-shadow: 0 6rem 20rem #f2980233;
 }
 .up1{

src/components/newBottomCom/viewlayout/viewlayout.html

@@ -1,11 +1,12 @@
 <!-- 户型弹出层主操作视图 -->
-<div class="layout-view" @touchend="streamRecordEnd">
+<!-- <div class="layout-view" @touchend="streamRecordEnd"> -->
+<div class="layout-view">
 	<!-- 种子区域 -->
 	<div>
 		<div class="btn-list rows rows-between">
-			<div class="btn voice rows justify-center" :class="recording?'voice2':'voice3'" @touchstart="streamRecord" @touchmove="mytouchmove">
+			<!-- <div class="btn voice rows justify-center" :class="recording?'voice2':'voice3'" @touchstart="streamRecord" @touchmove="mytouchmove">
 				<img class="icon" :src="recording?'https://dm.static.elab-plus.com/miniProgram/iconfont/source.png':'https://dm.static.elab-plus.com/miniProgram/iconfont/source1.png'" mode="widthFix"/>
-			</div>
+			</div> -->
 			<div class="btn rows up justify-center" @click="upCom" :class="styleType==1?'up1':'up2'">精细调整 · 空间大小随心布局</div>
 		</div>
 	</div>

src/components/newBottomCom/viewlayout/viewlayout.vue

@@ -116,13 +116,13 @@
 					}
 					let text = item.spaceName;
 					if(text && !item.isSizeLock){
-						let res = await requestConfig("chineseToPinyin", {chinese:text},true);
-						let pinyin = res.single;
+						// let res = await requestConfig("chineseToPinyin", {chinese:text},true);
+						// let pinyin = res.single;
 						let data = {
 							spaceId:item.spaceId,
 							index:this.carefulList.length,
 							name:text,
-							namePY:pinyin,
+							namePY:'',
 							area:curSpaceArea,
 							percent:null,
 							minArea:minArea,	//最小面积

src/mixins/screenshot.js

@@ -17,9 +17,9 @@ export default {
 	methods: {
 		//触发主页面的截屏动作
 		screenPromiseShot() {
-			let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
+			// let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
 			return new Promise(resolve => {
-				currUniPage.screenshotResolve = resolve
+				this.screenshotResolve = resolve
 			})
 		},
 		//转base64
@@ -69,13 +69,13 @@ export default {
 		 * 截图
 		 */
 		async shottingAction(type=1) {
-			let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
+			// let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
 			//时机合适时-像素存在则触发生成
 			return new Promise(resolve => {
 				this.screenPromiseShot().then((param) => {
 					if(param){
 						this.flip(param[0], param[1], param[2], 4);
-						const canvas = currUniPage.canvas2d;
+						const canvas = this.canvas2d;
 						const ctx = canvas.getContext('2d');
 						//  ImageData 对象，data是像素 一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示
 						const img = canvas.createImageData(param[0], param[1], param[2]);
@@ -97,22 +97,47 @@ export default {
 							},
 							fail: (res)=> {
 								console.warn("***canvasToTempFilePath-fail***", res);
-								if(currUniPage && currUniPage.starRender && typeof(currUniPage.starRender)=='function'){
-									currUniPage.starRender()//启动渲染
+								if(this && this.starRender && typeof(this.starRender)=='function'){
+									this.starRender()//启动渲染
 								}
 								resolve('')
 							}
 						})
 					}else{
+						// let imgBase64 = this.canvas.toDataURL();
+						// this.base64src(imgBase64, (res) => {
+						// 	console.warn('转化后的url：', res)
+						// 	this.upload(res,resolve);
+						// })
+						
+						// let img = new Image();
+						// img.src = this.canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
 						let imgBase64 = this.canvas.toDataURL();
-						this.base64src(imgBase64, (res) => {
-							console.warn('转化后的url：', res)
-							this.upload(res,resolve);
-						})
+						if(type==2){
+							resolve(imgBase64)
+						}else{
+							this.uploadFile(imgBase64,resolve)
+						}
 					}					
 				})
 			})
 		},
+		async uploadFile(file, cb = null) {
+			let data = {
+				"base64Str": file,
+			};
+			let result = await requestConfig("uploadBase64", data);
+			console.log(result, 'gggggg');
+			if (result && result.success) {
+				let shottingImg = result.single.filePath;
+				cb(shottingImg);
+			}else{
+				cb("")
+			}
+			if(this && this.starRender && typeof(this.starRender)=='function'){
+				this.starRender()//截图成功后，启动渲染
+			}
+		},
 		//上传图片
 		async upload(filePath, cb = null) {
 			var fileName = "4DImage/" + util.formatDate(new Date(), "yyyyMMddhhmmss") + '.jpg';
@@ -120,7 +145,7 @@ export default {
 			console.log("tokenObj：", tokenObj);
 			var token = tokenObj.single.token;
 			var resultUrl = tokenObj.single.resultUrl; //上传图片的访问前缀this.resultUrl =
-			let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
+			// let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
 			uni.uploadFile({
 				url: "https://up.qiniup.com",
 				filePath: filePath,
@@ -141,8 +166,8 @@ export default {
 					cb("")
 				},
 				complete(e) {
-					if(currUniPage && currUniPage.starRender && typeof(currUniPage.starRender)=='function'){
-						currUniPage.starRender()//截图成功后，启动渲染
+					if(this && this.starRender && typeof(this.starRender)=='function'){
+						this.starRender()//截图成功后，启动渲染
 					}
 				}
 			});

src/pages/mainView/mainView.html

@@ -9,12 +9,18 @@
 	<div class="submit-btn" @click="submitHouse">提交</div>
 	
     <div id="mapDiv" ref="webgl"></div>
-	<canvas id="glcanvas" width="100vw" height="100vh" ref="glcanvas">
+	<canvas id="glcanvas" width="100vw" height="100vh" ref="glcanvas"
+	 :style="{'height':canvasHeight+'px'}">
 		你的浏览器似乎不支持或者禁用了 HTML5 <code>&lt;canvas&gt;</code> 元素。
 	</canvas>
 	<!-- 主要操作视图 -->
 	<viewShell pageType="1" :overChange="overChange" :houseList="houseList" :houseObj="curHouseObj" :curHouseType="curHouseType" @curSpaceChange="curSpaceChange" @curHouseTypeChange="curHouseTypeChange" @curHouseFloorChange="curHouseFloorChange"></viewShell>
 	
+	<div v-show="showLables && gltf.text.length>0" v-for="(gltf,index) in lableItem" :key="index" class="word-view"
+	:style="{'transform':gltf.transform}" @click="goRoam(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>
+		<div v-else user-select="false" class="word" :class="currentChangeSpaceId==gltf.spaceId?'active':''">{{gltf.text}}></div>
+	</div>
 	<!-- <div id="labels"></div> -->
 	<!-- 左侧操作区域 -->
 	<!-- <left-operate-comp @operateHandle="operateHandle"></left-operate-comp> -->

src/pages/mainView/mainView.scss

@@ -1,7 +1,7 @@
 #mapDiv{
     width: 100%;
     height: 100vh;
-    background: #181C28;
+    background-color: #fff;
 }
 .map {
   position: relative;  /* 作为子元素的相对定位元素 */
@@ -75,39 +75,39 @@ page {
 	z-index: 11;
 	background: rgba(0, 0, 0, 0.5);
 }
-.btn{
-	position:absolute;
-	width:300rem;
-	height:132rem;
-	bottom:60rem;
-	right:30rem;
-	border-radius: 10rem;
-	opacity:1;
-	z-index:10000;
-	color:red;
-	display: flex;
-	flex-direction:row;
-	align-items:center;
-	justify-content:center;
-	background-color: rgba(155, 155, 155, 0.6);
-}
+// .btn{
+// 	position:absolute;
+// 	width:300rem;
+// 	height:132rem;
+// 	bottom:60rem;
+// 	right:30rem;
+// 	border-radius: 10rem;
+// 	opacity:1;
+// 	z-index:10000;
+// 	color:red;
+// 	display: flex;
+// 	flex-direction:row;
+// 	align-items:center;
+// 	justify-content:center;
+// 	background-color: rgba(155, 155, 155, 0.6);
+// }
 
-.changeSizebtn {
-	position:absolute;
-	width:300rem;
-	height:132rem;
-	bottom:60rem;
-	left:30rem;
-	border-radius: 10rem;
-	opacity:1;
-	z-index:10000;
-	color:red;
-	display: flex;
-	flex-direction:row;
-	align-items:center;
-	justify-content:center;
-	background-color: rgba(155, 155, 155, 0.6);
-}
+// .changeSizebtn {
+// 	position:absolute;
+// 	width:300rem;
+// 	height:132rem;
+// 	bottom:60rem;
+// 	left:30rem;
+// 	border-radius: 10rem;
+// 	opacity:1;
+// 	z-index:10000;
+// 	color:red;
+// 	display: flex;
+// 	flex-direction:row;
+// 	align-items:center;
+// 	justify-content:center;
+// 	background-color: rgba(155, 155, 155, 0.6);
+// }
 .canvas-view{
 	position:relative;
 }
@@ -116,12 +116,13 @@ page {
 	width:100vw;
 }
 .word-view{
-	position: absolute;  /* let us position them inside the container
-	left: 0;             /* make their default position the top left of the container */
+	position: absolute; 
+	left: 0;            
 	top: 0;
-	user-select: none;   /* don't let the text get selected */
+	user-select: none;  
 	z-index: 12;
 	text-align: center;
+	border-radius: 5rem;
 }
 .word{
 	font-family: "Verdana";

src/pages/mainView/mainView.vue

@@ -6,7 +6,7 @@
 	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
     import TWEEN from 'three/addons/libs/tween.module.js';
-
+	import router from "@/router";
 	var requestId = "";
 	// const util = require('@/static/utils/util.js');
 	const config = require('@/services/urlConfig.js');
@@ -78,7 +78,7 @@
 				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
 				// cameraLastPosition: null,		//摄像头上一次移动到的位置
 				// controlLastPosition: null,		//观察点上一次移动到的位置
-				// canvasHeight:200,	//canvas视图的高度-计算得出
+				canvasHeight:200,	//canvas视图的高度-计算得出
 				chooseMesh:null,//标记鼠标拾取到的mesh
 				// chooseMeshColor:'',	//拾取到的mesh的原始颜色；
 				chooseWallMeshColor:'', // 拾取墙体原始颜色
@@ -164,13 +164,15 @@
 			}, 0)
 		},
         mounted() {
+			var that = this;
 			this.houseId = '100296';//
 			this.childLayout = '0'
+			let unit = window.screen.width / 750;//单位rpm 对应 px 的值
+			that.canvasHeight = window.screen.height - (200 * unit) + (20 * unit);
 			
-			var that = this;
 			const container = this.$refs.webgl;
             const canvas3d = this.canvas = this.$refs.glcanvas;
-
+			
 			let camera = null, renderer = null, controls=null;
 			// let trackballControls = null;
 			console.warn("***loader0***",this.loader)
@@ -193,6 +195,7 @@
 			this.progress = 1;
 			this.clearEvent = clearEvent;
 			this.attendEvent = attendEvent;
+			this.updateLables = updateLables;
 			this.enableRenderHandle = enableRender;
 			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
 			this.gradientResize = gradientResize;
@@ -204,8 +207,8 @@
                 // scene.environment = new THREE.Color("#F2F2F2");
 
 				// 创建相机位置-投影相机
-				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 10000 );
-				// let aspect = window.innerWidth /  window.innerHeight;
+				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / that.canvasHeight, 0.1, 10000 );
+				// let aspect = window.innerWidth /  that.canvasHeight;
 				// camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0.1,1000);
 				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
 				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
@@ -244,7 +247,7 @@
 				renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
 				
                 renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( window.innerWidth,  window.innerHeight );
+                renderer.setSize( window.innerWidth,  that.canvasHeight );
                 container.appendChild( renderer.domElement );
 				
 				controls = new OrbitControls(camera, renderer.domElement);
@@ -270,15 +273,15 @@
 				window.addEventListener( 'resize', onWindowResize );
             }
 			function onWindowResize() {
-			    camera.aspect = window.innerWidth / window.innerHeight;
+			    camera.aspect = window.innerWidth / that.canvasHeight;
 			    camera.updateProjectionMatrix();
-			    renderer.setSize( window.innerWidth, window.innerHeight );
+			    renderer.setSize( window.innerWidth, that.canvasHeight );
 				console.warn("****onWindowResize**")
 			}
 			function attendEvent () {
-				document.addEventListener('touchstart', onPointerStart, false);
-				document.addEventListener('touchmove', onPointerMove, false);
-				document.addEventListener('touchend', onPointerUp, false);
+				renderer.domElement.addEventListener('touchstart', onPointerStart, false);
+				renderer.domElement.addEventListener('touchmove', onPointerMove, false);
+				renderer.domElement.addEventListener('touchend', onPointerUp, false);
 			}
 			function tweenCameraAnmaChange (value) {
 				tweenCameraAnma = value
@@ -289,9 +292,9 @@
 			//取消事件监听-避免二次进入时触发多次事件
 			function clearEvent(){
 				console.warn("**clearEvent****")
-				document.removeEventListener('touchstart', onPointerStart);
-				document.removeEventListener('touchmove', onPointerMove );
-				document.removeEventListener('touchend', onPointerUp );
+				renderer.domElement.removeEventListener('touchstart', onPointerStart);
+				renderer.domElement.removeEventListener('touchmove', onPointerMove );
+				renderer.domElement.removeEventListener('touchend', onPointerUp );
 			}
 			// 手指移动开始
 			function onPointerStart(event){
@@ -305,8 +308,7 @@
 				if(that.overChange){//形变中，不能相应用户操作
 					return false;
 				}
-				// enableRender();
-				that.showLables = false;
+				// that.showLables = false;
 			}
 			//触摸结束
 			function onPointerUp(event) {
@@ -331,7 +333,7 @@
 					console.warn("**moveMeshCenterHandle-没有数据***")
 					return false;
 				}
-				that.showLables = false;//隐藏
+				// that.showLables = false;//隐藏
 				controls.enable = false;//控制器不响应用户的操作
 			
 				let spaceObj = chooseMesh;//获取空间模型的相关数据
@@ -361,7 +363,6 @@
 				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,600);
 				setTimeout(()=>{
 					that.showLables = true;
-					
 				},601);//动画结束后回复原始状态
 			}
 			
@@ -428,7 +429,10 @@
 			//高度持续变化处理 time 动画持续时间 单位秒
 			function gradientResize (time,startHeight,endHeight) {
 				let _timeStep = 20;//单位 毫秒
-				let unit = app.globalData.systemInfo.screenWidth / 750;//单位rpx 对应 px 的值
+				// let unit = window.screen.width / 750;//单位rpm 对应 px 的值
+				// that.canvasHeight = window.screen.height - (200 * unit) + (20 * unit);
+				
+				let unit = window.screen.width / 750;//单位rpx 对应 px 的值
 				let _height = startHeight - endHeight;//高度变化-单位rpx
 				let _jisua = that.canvasHeight;
 				let lastHeight = _jisua + (_height * unit);//动画结束时的高度值； 单位 px
@@ -491,7 +495,7 @@
 					// console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
 					position.project(camera);
 					const x = (position.x *  .5 + .5) * window.innerWidth;
-					const y = (position.y * -.5 + .5) * window.innerHeight;
+					const y = (position.y * -.5 + .5) * that.canvasHeight;
 					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
 				})
 			}
@@ -514,6 +518,7 @@
 				//不处在动画过程中，则可以处理移动等动作
 				if(tweenCameraAnma==false){
 					controls.update();
+					updateLables();//更新lable
 				}
 				requestId = requestAnimationFrame(render, canvas3d);
 				renderer.render(scene, camera);//单次渲染
@@ -1562,7 +1567,7 @@
 					this.houseList = list;//数据会同步到组件中-进而反馈更新页面数据
 					this.curHouseObj = this.houseList[0].layoutStruct[0];
 					// 加载户型
-					this.loadSpace();
+					// this.loadSpace();
 				}
 			},
 			
@@ -1592,12 +1597,18 @@
 				let spaceId = gltf.spaceId;//具体的空间Id
 				let data = {
 					spaceId:spaceId,
-					curHouseObj:this.curHouseObj,
-				}
-				if(this.repeatFlag){
-					return false;
+					// curHouseObj:this.curHouseObj,
+					houseId:this.houseId,
 				}
-				this.repeatFlag = true;
+				this.$store.dispatch('setCurHouseObj', this.curHouseObj)
+				// if(this.repeatFlag){
+				// 	return false;
+				// }
+				// this.repeatFlag = true;
+				router.push({
+					name: "webgl_rxdz_roam",
+					query:data
+				});
 				// uni.navigateTo({
 				//     url: '/webgl/pages/webgl_rxdz_roam/webgl_rxdz_roam?houseId='+this.houseId,
 				// 	success: (res)=> {
@@ -1685,6 +1696,8 @@
 						)
 					}
 				})
+				this.showLables = true;
+				// this.updateLables();//更新lable
 			}, 
 			// 获取墙体数据
             async getHouseTypeSpaceWalls(){
@@ -1739,9 +1752,9 @@
 						this.moveMeshCenter(this.curSpaceObj);
 						// this.myLoadingStatus = false;
 						// this.$refs.myLoading.hideLoading();
-						// setTimeout(()=>{
-						// 	this.addWordLabel(); // 添加文字标签
-						// }, 610);
+						setTimeout(()=>{
+							this.addWordLabel(); // 添加文字标签
+						}, 610);
 						// 设置空间数组的墙体信息 
 						// 绘制布局
 						// this.getOverallArrangementDetailsList();

src/pages/webgl_rxdz_customize/webgl_rxdz_customize.html

@@ -0,0 +1,104 @@
+<div class="bookingSheet">
+    <!-- <shareOption @afterUserHandle="afterShareOptionHandle" @optionChange="optionChange" :showShareOptions="showShareOptions"></shareOption> -->
+    <!-- <mynavbar @navbarBackCallback="navbarBackClk" :barData='navbar'/> -->
+	<!-- <authview id="authView" :showPhoneModel="showPhoneModel"></authview> -->
+    <div class="contentBox">
+        <!-- 图片区域 -->
+        <div class="picArea">
+            <div class="master-pic">
+				<swiper :autoplay="false" :circular="false" :duration="500" 
+					:indicator-dots="false"
+					@change="swiperChangeImg" class="master-pic-swiper" 
+					:current="currImgIdx" >
+                    <swiper-item v-for="(img,s) in hardboundEffect" :key="s" :item-id="s" class="master-pic-img">
+                        <img class="master-pic-img" :src="img" mode="aspectFill"></image>
+						<div class="lookHouseView rows justify-center" v-if="tabIndex==0 && (!shareUserId || shareUserId==userId)" @click="toMode">
+							<img class="icon-ai" src="https://dm.static.elab-plus.com/miniProgram/iconfont/icon-ai.png" mode="widthFix"/>
+							查看户型
+						</div>
+                        <!-- <c-img class="master-pic-img" :style="'background-color:#fff'" :src="img" mode="aspectFill"></c-img> -->
+                    </swiper-item>
+                </swiper>
+				<div class="indicator-view rows" v-if="hardboundEffect && hardboundEffect.length > 1">
+					<div class="indicator-item" :class="{'active': currImgIdx == idx}" 
+					v-for="(item, idx) in hardboundEffect" :key="idx"></div>
+				</div>
+            </div>
+            <scroll-view class="tabList rows flex-start" :enable-flex="true" scroll-x :enhanced="true" :show-scrollbar="false">
+				<div @click="changeTab(index)" class="tab-item columns" :class="{'tabActive': tabIndex == index}" 
+					v-for="(tab,index) in tabData" :key="index" >
+					<img class="tab-img" :src="tab.imgUrl" mode="aspectFill"></image>
+					<div class="tab-info rows rows-between">
+						<div class="eslipe">{{tab.name || '-'}}</div>
+						<div class="eslipe" v-if="tab.area">{{tab.area || '-'}}㎡</div>
+					</div>
+				</div>
+            </scroll-view>
+        </div>
+        <!-- 提交信息区域 -->
+        <div class="booking-info" :style="{'color':tabIndex==0?'#000':'#fff'}">
+			<div class="left-line line"></div>
+			<div class="right-line line"></div>
+            <div class="writingBox rows">
+                <img class="writing-img" :src="layoutStruct.houseImg || plotHeadDeafultImg"></image>
+                <div class="wiriting-right" >
+                    <div class="font40 wiriting-text">{{shareUserId&&shareUserId!=userId?'':'我的'}}私人定制</div>
+                    <div class="font52 wiriting-text">{{layoutStruct.houseName || ''}}</div>
+                </div>
+            </div>
+            <!-- 文字信息区域 -->
+            <div class="info-bar">
+                <div class="info-item">
+                    <div class="info-item-label">户型</div>
+                    <div class="info-item-value eslipe">{{form.layoutName || '-'}}</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-item-label">面积<text class="textAbout">约</text></div>
+                    <div class="info-item-value">{{form.layoutArea?(form.layoutArea+'m²'):'-'}}</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-item-label">家庭结构</div>
+                    <div class="info-item-value">{{layoutStruct.spaceName || '-'}}</div>
+                </div>
+                <div class="info-item" v-if="form.style">
+                    <div class="info-item-label">风格</div>
+                    <div class="info-item-value">{{form.style || '-'}}</div>
+                </div>
+            </div>
+        </div>
+		<!-- 底部按钮 -->
+		<div class="bottom-view columns justify-center">
+			<div class="bottom-title" :style="{'color':tabIndex==0?'#1A1A1A':'#fff'}">
+				- 分享我的梦想家 -
+			</div>
+			<div class="bottom-tips" :style="{'color':tabIndex==0?'#1A1A1A':'#fff'}">
+				分享好友可获得私定高额优惠
+			</div>
+			<div class="rows rows-between">
+				<div class="bottom-btn btn-qw rows justify-center" @click="navigateFuc" data-jumplink="客服链接" data-jumptype="50" data-jumpvalue="企业id">
+				    加企微 · 定制服务
+				</div>
+				<div class="bottom-btn btn-share rows justify-center" @click="optionChange(true)">
+					<i class="iconfont icon-Shared" style="color: #ffffff;font-size:32rpx;margin-right:20rpx;"></i>
+				    立即分享
+				</div>
+			</div>
+		    
+		</div>
+		<!-- 高斯背景图 -->
+		<div class="swiper-img-gs-mh" v-if="gsImage" >
+			<img class="img" mode="aspectFill" :src="gsImage" />
+		</div>
+		
+    </div>
+	
+	<!-- 添加企微弹出层 -->
+    <!-- <div class="f-popup-bom-container" @click.stop.prevent="showPopup=false" v-show="showPopup">
+		<div class="f-popup-view">
+            <img class="closeIcon" @click="showPopup = false;" src="https://dm.static.elab-plus.com/mini-program/closeIcon.png" mode="widthFix"></image>
+			<scroll-view scroll-y="true" class="f-popup-bom" @click.stop.prevent="catchEvent" :enhanced="true" :show-scrollbar="false">
+                <img mode="widthFix" :show-menu-by-longpress="true" class="qrCode" :src="enterpriseWechat"></image>
+            </scroll-view>
+		</div>
+	</div> -->
+</div>

src/pages/webgl_rxdz_customize/webgl_rxdz_customize.scss

@@ -0,0 +1,311 @@
+/**newIndex.wxss**/
+
+page {
+}
+
+.font40{
+    font-size: 40rpx;
+    // color: #fff;
+}
+.font52{
+    font-size: 52rpx;
+	font-weight: 700;
+}
+.pointerEvents{
+    pointer-events: none;
+}
+.contentBox{
+    
+	position: relative;
+    width: 100vw;
+    overflow: hidden;
+    box-sizing: border-box;
+    .picArea{
+        position: relative;
+		width: 100%;
+		height:1100rpx;
+        .master-pic{
+            position: relative;
+			width: 100%;
+			height:930rpx;
+            // padding: 10rpx;
+            box-sizing: border-box;
+            // background-color: #171717;
+			.master-pic-swiper{
+				width: 100%;
+				height: 100%;
+			}
+            .master-pic-img{
+                width: 100%;
+                height: 100%;
+                display: block;
+            }
+			.lookHouseView{
+				position: absolute;
+				left:276rpx;
+				bottom:138rpx;
+				width: 200rpx;
+				height: 76rpx;
+				border-radius: 38rpx;
+				background: rgba(0, 0, 0, 0.4);
+				font-family: "Verdana";
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #fff;
+				.icon-ai{
+					width:46rpx;
+					height:46rpx;
+					margin-right:10rpx;
+				}
+			}
+
+			.indicator-view{
+				position: absolute;
+				z-index: 12;
+				bottom: 100rpx;
+				left:50%;
+				transform: translateX(-50%);
+				.indicator-item{
+					width: 12rpx;
+					height: 12rpx;
+					background: #fff;
+					opacity: 0.52;
+					margin-right:6rpx;
+					border-radius: 50%;
+					&.active{
+						opacity:1;
+					}
+					&:last-child{
+						margin-right:0rpx;
+					}
+				}
+			}
+        }
+    }
+    .tabList{
+		position: absolute;
+		width: 100%;
+		height:246rpx;
+		bottom:0rpx;
+        .tab-item{
+			width:196rpx;
+            margin-right: 20rpx;
+            font-family: "Verdana";
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #1d1d1d;
+			text-align:center;
+			padding:2rpx;
+			// border:solid 2rpx #65574933;
+			// box-shadow: 0 4rpx 40rpx #65574933;
+			background: #ededed;
+			filter: drop-shadow(0 4rpx 40rpx #65574933);
+			box-sizing: border-box;
+            &.tabActive{
+                position: relative;
+                font-weight: 700;
+                color: #4d463f;
+				// border:solid 2rpx #65574933;
+				background: rgba(254, 176, 102, 0.5);
+				filter: drop-shadow(0 4rpx 40rpx #65574933);
+            }
+			&:first-child{
+			    margin-left: 30rpx;;
+			}
+            &:last-child{
+                margin-right: 30rpx;
+            }
+			.tab-img{
+				width: 192rpx;
+				height: 200rpx;
+			}
+			.tab-info{
+				width:100%;
+				padding:6rpx 10rpx;
+				box-sizing: border-box;
+			}
+        }
+    }
+    .textAbout{
+        font-family: "DIN Alternate Bold";
+        font-weight: 700;
+        font-size: 20rpx;
+        // color: rgba(255, 255, 255, 0.3);
+		opacity: 0.3;
+		margin-left:10rpx;
+    }
+    .booking-info{
+        margin-left: 30rpx;
+        margin-right: 30rpx;
+        margin-top: 130rpx;
+        margin-bottom: 15rpx;
+        position: relative;
+        border: 2rpx solid rgba(255, 255, 255, 0.5);
+		border-top:none;
+        padding: 90rpx 60rpx 20rpx;
+		box-sizing: border-box;
+		color: #fff;
+		.line{
+			position: absolute;
+			top:0rpx;
+			width: 100rpx;
+			height:2rpx;
+			background-color: rgba(255, 255, 255, 0.5);
+		}
+		.left-line{
+			left:0rpx;
+		}
+		.right-line{
+			right:0rpx;
+		}
+        // .booking-info-bg{
+        //     position: absolute;
+        //     top: 0;
+        //     left: 0;
+        //     width: 100%;
+        //     height: unset;
+        // }
+        .writingBox{
+			padding:0rpx 10rpx;
+            // width: 440rpx;
+            width: max-content;
+            height: 120rpx;
+            position: absolute;
+            // margin-top: -45rpx;
+            // font-family: "STFangsong";
+            font-weight: 400;
+            
+            // color: #fff;
+            top: -60rpx;
+            box-sizing: border-box;
+            left: 50%;
+            transform: translate(-50%,0);
+            // background-color: #FFF;
+			// background-color: transparent;
+			// backdrop-filter: blur(20px);
+            
+            .writing-img{
+                width: 120rpx;
+                height: 120rpx;
+                min-width: 120rpx;
+                filter: drop-shadow(0 3rpx 4rpx #00000029); 
+                box-sizing: border-box;
+                border-radius: 50%;
+                border: 6rpx solid #F5F5F5;
+				margin-right:30rpx;
+            }
+            .wiriting-right{
+                // text-align: right;
+                padding-right: 20rpx;
+                .wiriting-text{
+                    // height: 60rpx;
+                }
+            }
+            
+        }
+        .info-bar{
+            // padding: 80rpx 50rpx 140rpx;
+            display: flex;
+            flex-wrap: wrap;
+            
+            .info-item{
+                // color: #fff;
+                width: 33.33%;
+                
+                margin-bottom: 40rpx;
+                padding-left: 10rpx;
+                box-sizing: border-box;
+                // &:nth-child(3n-1){
+                //     width: 39.66%;
+                // }
+                // &:nth-child(3n-2){
+                //     width: 27%;
+                // }
+                &:nth-child(3n-2){
+                    padding-left: 0;
+                }
+                
+            }
+            .info-item-label{
+                font-family: "Verdana";
+                font-weight: 400;
+                font-size: 28rpx;
+                margin-bottom: 8rpx;
+            }
+            .info-item-value{
+                font-family: "DIN Alternate Bold";
+                font-weight: bold;
+                font-size: 34rpx;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+.swiper-img-gs-mh {
+	width: 100vw;
+	// height: 1102rpx;
+	height: 1327rpx;
+	opacity: 0.85;
+	position: absolute;
+	left: 0;
+	top:930rpx;
+	
+	z-index: -1;
+	overflow: hidden;
+	box-sizing: border-box;
+	.img{
+		width: 100%;
+		height: 100%;
+		filter: blur(20px);
+		transform: scale(1.2);
+	}
+}
+.bottom-view{
+    position: relative;
+    width: 100%;
+	padding-top:128rpx;
+	padding-bottom:300rpx;
+    box-sizing: border-box;
+    .bottom-title{
+		font-family: "DIN Alternate Bold";
+		font-weight: 700;
+		font-size: 28rpx;
+		text-align: center;
+		color: #fff;
+		text-shadow: 0 0 8rpx rgba(0, 0, 0, 0.17);
+	}
+	.bottom-tips{
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 28rpx;
+		line-height: 48rpx;
+		text-align: center;
+		margin-top:8rpx;
+		margin-bottom:40rpx;
+		opacity: 0.6;
+	}
+    .bottom-btn{
+        width: 290rpx;
+        height: 80rpx;
+        border-radius: 40rpx;
+		font-family: "DIN Alternate Bold";
+		font-weight: 700;
+		font-size: 28rpx;
+        .bottom-subtitle{
+            font-family: "DIN Alternate Bold";
+            font-weight: bold;
+            font-size: 30rpx;
+            white-space: nowrap;
+        }
+    }
+	.btn-qw{
+		background: rgba(246, 165, 83, 0.2);
+		color: #f6a553;
+		margin-right:30rpx;
+	}
+    .btn-share{
+        background: #f6a553;
+        box-shadow: 0 6rpx 20rpx rgba(208, 193, 168, 0.31);
+		color: #fff;
+    }
+}

src/pages/webgl_rxdz_customize/webgl_rxdz_customize.vue

@@ -0,0 +1,330 @@
+<template src="./webgl_rxdz_customize.html">
+</template>
+
+<script>
+const util = require('@/utils/util.js');
+const config = require('@/services/urlConfig.js');
+// const app = getApp(); //获取应用实例
+// import requestConfig from '@/static/lib/requestConfig.js';
+// import commonPageMethod from '@/common/commonPageMethod.js';
+// import commonMethod from '@/common/commonMethod.js';
+export default {
+    // mixins: [commonPageMethod,commonMethod],
+    /**
+     * 页面的初始数据
+     */
+    data() {
+        return {
+            pvId: 'p_2cmina_23080403',
+            locusBehaviorName: "提交页面",
+            locusValue: "",
+            locusName: "",
+            pvCurPageName: "submit_ret",
+            pvCurPageParams: null,
+            navbar: {
+                showCapsule: 1,
+                title: '我的定制',
+                titleColor: '#fff',
+                navPadding: 0,
+                navPaddingBg:'transparent',
+                navBarColor: 'transparent',
+                navBackColor: 'transparent',
+                haveCallback: true, // 如果是 true 会接手 navbarBackClk
+                fromShare: false,
+                fromProject: 0,
+                shareToken: "",
+                pageName: this.pvCurPageName,
+            },
+            houseId: config.houseIdHs,
+
+            shareUserId: null, // 分享者ID
+            id: '64def992f65c6237103869a5',//方案库id
+
+            currImgIdx:0,
+            tabIndex: 0,
+            userId: '',
+            // featureImgList: [],
+            hardboundEffect: [],//当前swiper数据列表对象
+            form: {},
+			tabData:[],
+            number: '',
+			plotHeadDeafultImg: 'https://dm.static.elab-plus.com/mini-program/plotHeadDeafultImg.png', // 地块人物默认头像
+			showPhoneModel:false,
+			gsImage:'',
+			layoutStruct:null,
+		}
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    async onLoad(options) {
+        await this.loadPromise;//等待解析分享者参数结束
+        console.log("***onLoad-webgl_rxdz_customize***", options)
+        const that = this;
+        if (options.scene) { //二维码进来
+            const data = JSON.parse(app.globalData.exchangedFromChannel);
+            if (data.houseId) {
+                that.houseId = data.houseId || this.houseId;
+            }
+            if (data.attrs.id) {
+                that.id = data.attrs.id;
+            }
+			if(data.attrs.shareUserId){
+			    this.shareUserId = data.attrs.shareUserId;
+			}
+        }else{
+            if(options.shareUserId){
+                this.shareUserId = options.shareUserId;
+            }
+            if(options.id){
+                this.id = options.id
+            }
+            if(options.houseId){
+                this.houseId = options.houseId
+            }
+        }
+		if(!this.id){
+			uni.showToast({
+				icon: "none",
+				title: "没有数据！",
+			});
+			return false;
+		}else{
+			this.getIdData();
+		}
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+		// #ifdef MP-WEIXIN
+		wx.showShareMenu({
+		    menus: ['shareAppMessage', 'shareTimeline']
+		});
+		// #endif
+    },
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+        app.login(async ()=>{
+            let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+            if (this.houseId || app.globalData.houseId || (currPage ? currPage.houseId : '')) {
+                this.houseId = this.houseId || app.globalData.houseId || (currPage ? currPage.houseId : '');
+            }
+            if (this.userId || app.globalData.single && app.globalData.single.id) {
+                this.userId = this.userId || app.globalData.single && app.globalData.single.id
+            }
+        });
+    },
+    methods: {
+		//返回处理-不同的小程序这里很可能不一样，需要注意
+		navbarBackClk() {
+            //上一个页面
+			let lastPage = getCurrentPages()[getCurrentPages().length-2] ? getCurrentPages()[getCurrentPages().length-2].$vm : null;
+			let _pvLastPagePath = lastPage ? (lastPage.route || lastPage.__route__) : '';//上一页面路径
+            //存在上一个页面，则返回上一页
+            if(_pvLastPagePath){
+				uni.navigateBack()
+            } else {
+				if(this.houseId){
+					//返回首页
+					uni.reLaunch({
+						url: '/pages/index/index',
+						success: function() {},
+						fail: function(res) {
+							console.log(res)
+						},
+					})
+				}else{
+					uni.reLaunch({
+						url: '/pages/index/index',
+						success: function() {},
+						fail: function(res) {
+							console.log(res)
+						},
+					})
+				}
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_23080424', //点击ID
+					clkName: 'homepage_clk', //点击前往的页面名称
+					clkParams: {
+						locusName: "返回项目首页",
+					}
+				};
+				util.trackRequest(param);
+            }
+		},
+        swiperChangeImg(e){
+            console.log("***swiperChangeImg***",e);
+			this.currImgIdx = e.detail.current;
+			this.gsImage =  this.hardboundEffect[this.currImgIdx];//获取高斯模糊的图片
+        },
+        
+        async getIdData(){
+			let userId = (app.globalData.single && app.globalData.single.id) ? app.globalData.single.id : '';
+            let params = {
+                id: this.id,
+                brandId: config.brandId,
+				houseId:this.houseId,
+				userId,
+            };
+			if(this.shareUserId){//分享时 不带用户id
+				delete params.userId
+			}
+            // params.userId = this.userId;
+            const res = await requestConfig('getCustomizedRecord', params);
+            if (res.success ) {
+                let single = res.list[0];
+				this.layoutStruct = JSON.parse(JSON.stringify(single));
+                // this.number = single.landCode
+                this.form = single.layoutStruct.find(it=>it.floor==single.curFloor);
+
+                this.hardboundEffect = this.form.layoutImgCustomized? [this.form.layoutImgCustomized] : [];//赋值轮播图
+				this.tabIndex = 0;//表明是户型首图
+				this.tabData = [];
+				let data = {
+					name : this.form.layoutName,
+					imgUrl : this.form.layoutImgCustomized,
+					area:'',
+				}
+                this.tabData.push(data);
+				this.form.houseJson = this.form.houseJson.filter((item)=>{
+					return item.spaceName && item.spaceName.length>0 && item.spaceType!=11 && item.hardboundEffect && item.hardboundEffect[0]
+				})
+				this.form.houseJson.sort(function(a,b){return parseFloat((b.spaceWidth * b.spaceHeight) / 10000) -parseFloat((a.spaceWidth * a.spaceHeight) / 10000)});
+				this.form.houseJson.forEach((item,index)=>{
+					//获取面积
+					let curSpaceArea = parseFloat((item.spaceWidth * item.spaceHeight) / 10000).toFixed(1);
+					let data = {
+						name : item.spaceName,
+						imgUrl : item.hardboundEffect[0],
+						area:curSpaceArea,
+					}
+					this.tabData.push(data);
+				})
+				this.gsImage = this.form.layoutImgCustomized;//获取高斯模糊的图片
+            }
+        },
+        changeTab(id){
+            if(id == this.tabIndex){
+                return
+            }
+            this.tabIndex = id;
+            this.currImgIdx = 0;
+			if(id>0){//提取空间轮播图
+				this.hardboundEffect = this.form.houseJson[id - 1].hardboundEffect;//赋值轮播图
+				this.gsImage = this.hardboundEffect[0];//获取高斯模糊的图片
+			}else{
+				this.hardboundEffect = this.form.layoutImgCustomized? [this.form.layoutImgCustomized] : [];//赋值轮播图
+				this.gsImage = this.form.layoutImgCustomized;//获取高斯模糊的图片
+			}
+            let param = {
+                type: 'CLK', //埋点类型
+                clkId: 'clk_2cmina_23080421', //点击ID
+                clkName: 'roomretpic_clk', //点击前往的页面名称
+                clkParams: {
+                    type: this.tabData[this.tabIndex].name,
+                    locusName: "房间名称",
+                }
+            };
+            util.trackRequest(param);
+        },
+        
+        catchTouchMove: function() {
+            return false;
+        },
+        
+        toMode(){
+            uni.navigateTo({
+                url: '/webgl/pages/webgl_rxdz_look/webgl_rxdz_look?houseId='+this.houseId,
+				success: (res)=> {
+					// 通过eventChannel向被打开页面传送数据
+					res.eventChannel.emit('acceptDataFromOpenerPage', {
+						layoutStruct:this.layoutStruct,
+					})
+				},
+				fail: function(res) {
+				    console.log(res)
+				},
+            })
+			let param = {
+				type: 'CLK', //埋点类型
+				clkId: 'clk_2cmina_23080420', //点击ID
+				clkName: 'checkroom_clk', //点击前往的页面名称
+				clkParams: {
+					locusName: "查看户型",
+				}
+			};
+			util.trackRequest(param);
+		},
+        async afterShareOptionHandle(e) {
+            let sign = await app.setShareToken({
+                subtype: 'project',
+                houseId: this.houseId,
+                attrs: {
+                    shareType: 'qrcode',
+                    fromProject: app.globalData.projectShare,
+                    id: this.id,
+					shareUserId:this.shareUserId,
+                }
+            });
+			let shareImg = this.gsImage;
+            let obj = {
+                type: 8,
+                path: '/webgl/pages/webgl_rxdz_customize/webgl_rxdz_customize',
+                shareToken: sign || app.globalData.shareToken,
+                houseId: (this.houseId || ''),
+                logo: app.globalData.houseProject.logo || "",
+                gpName: app.globalData.houseProject.projectName || '',
+				mountHuangXcx:true,
+            };
+            if(shareImg){
+                obj.defaultImage = shareImg
+            }
+            app.globalData.shareCardData = JSON.stringify(obj);
+            uni.navigateTo({
+                url: '/pages/shareCard/shareCard?houseId=' + (this.houseId || ''),
+            })
+        },
+        /**
+         * 用户点击右上角分享
+         */
+        onShareAppMessage(options) {
+            let param = {
+                type: 'CLK', //埋点类型
+                clkId: 'clk_2cmina_18', //点击ID
+                clkName: 'system-share', //点击前往的页面名称
+                clkParams: {
+                    from: options.from
+                }
+            };
+            util.trackRequest(param);
+            let sharePath = this.shareInitPath();
+            let shareUserParam = "";
+            shareUserParam = ('&shareUserId='+((app.globalData.single && app.globalData.single.id) ? app.globalData.single.id : ''));
+            if(app.globalData.executeToHelpShare){//帮好友转发分享
+                shareUserParam = ('&shareUserId='+this.shareUserId);
+            }
+            app.globalData.executeToHelpShare = false;
+            let path = '/webgl/pages/webgl_rxdz_customize/webgl_rxdz_customize?' + sharePath + shareUserParam + '&id=' + this.id;
+            console.log(path)
+            let shareImg = this.gsImage;
+            return {
+                imageUrl: shareImg || app.globalData.shareImage || '',
+                title: app.globalData.projectName || '',
+                path: path
+            }
+        },
+    }
+    
+}
+</script>
+<style lang="scss" scoped>
+	@import "./webgl_rxdz_customize.scss";
+</style>
+<style lang="css" scoped>
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_look/webgl_rxdz_look.css

@@ -0,0 +1,57 @@
+canvas { width:100vw; height:100vh;z-index: 10; }
+
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+#canvas_webgl{
+	/* background: url(resources/images/daikanyama.jpg) no-repeat center center; */
+	/* background:#6d0909;
+	background-size: cover; */
+}
+.lable-view{
+	position:absolute;
+	width:100vw;
+}
+.word-view{
+	position: absolute;  /* let us position them inside the container
+	left: 0;             /* make their default position the top left of the container */
+	top: 0;
+	/* cursor: pointer; */
+	font-family: "Verdana";
+	font-weight: 400;
+	color: #1d1d1d;
+	user-select: none;   /* don't let the text get selected */
+	z-index: 12;
+	font-size:26rpx;
+	/* pointer-events:none; */
+	line-height: 40rpx;
+	/* width: 90rpx; */
+	height: 40rpx;
+	padding:0rpx 10rpx;
+	border-radius: 20rpx;
+	background: #fff;
+	text-align: center;
+}
+.floor-view{
+	position: absolute;
+	left:30rpx;
+	bottom:60rpx;
+	width: 72rpx;
+	border-radius: 12rpx;
+	background: rgba(0, 0, 0, 0.4);
+	overflow: hidden;
+	z-index: 11;
+}
+.floor-item{
+	height: 60rpx;
+	color: #fff;
+}
+.floor-item.active{
+	color: #faa040;
+	background: #fff;
+}

src/pages/webgl_rxdz_look/webgl_rxdz_look.html

@@ -0,0 +1,24 @@
+
+<div>
+	<!-- <mynavbar :barData='navbar'/> -->
+	<!-- <my-loading ref="myLoading" :myLoadingStatus="myLoadingStatus"></my-loading> -->
+	<canvas id="canvas_webgl" type="webgl"
+		:disable-scroll="true"
+		@touchstart.prevent="webgl_touch"
+		@touchmove.prevent="webgl_touch"
+		@touchend.prevent="webgl_touch"
+		@touchcancel.prevent="webgl_touch">
+	</canvas>
+	<div v-show="showLables && gltf.text.length>0" v-for="(gltf,index) in lableItem" :key="index" class="word-view"
+	:style="{'transform':gltf.transform}">
+		<text user-select="false">{{gltf.text}}</text>
+	</div>
+	<!-- 楼层 -->
+	<div class="floor-view" v-if="floorList&&floorList.length>1">
+		<div class="floor-item rows justify-center" :class="floorId==floor.layoutId?'active':''" 
+			v-for="(floor,index) in floorList" :key="index" @click="floorChange(floor)">
+			{{floor.houseFloor?floor.houseFloor+'F':''}}
+		</div>
+	</div>
+
+</div>

src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -0,0 +1,733 @@
+<template src="./webgl_rxdz_look.html">
+
+</template>
+<script>
+	import * as THREE from 'three';
+	import Stats from 'three/addons/libs/stats.module.js';
+	// import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+	
+	import TWEEN from 'three/addons/libs/tween.module.js';
+
+	var requestId = "";
+    const util = require('@/utils/util.js');
+    const config = require('@/services/urlConfig.js');
+    // import requestConfig from '@/static/lib/requestConfig.js';
+	import loadModel from '@/mixins/loadModel.js';
+	import wallMethod from '@/mixins/wallMethod.js';
+	import floorMethod from '@/mixins/floorMethod.js';
+	// import commonPageMethod from '@/common/commonPageMethod.js';
+    // const app = getApp(); //获取应用实例
+    export default {
+		mixins:[loadModel,floorMethod,wallMethod],
+        /**
+         * 页面的初始数据
+         */
+        data() {
+            return {
+				pvCurPageName: "webgl_rxdz_look",
+				pvCurPageParams: null,
+                houseId: "",
+				pvId: 'p_2cmina_01043',
+				navbar: {
+				    showCapsule: 1,
+				    title: '查看户型',
+				    titleColor: '#fff',
+				    navPadding: 0,
+				    navPaddingBg:'transparent',
+				    navBarColor: 'transparent',
+				    navBackColor: 'transparent',
+				    haveCallback: true, // 如果是 true 会接手 navbarBackClk
+				    fromShare: false,
+				    fromProject: 0,
+				    shareToken: "",
+				    pageName: this.pvCurPageName,
+				},
+				canvas:null,
+                id:'',// 户型编号
+                spaceList:[], // 空间列表
+                gltfSpaces:[], // 场景中地板模型数组
+				spaceId:null,
+                wallIds:[], // 空间墙体id
+				wallList:[], // 墙体数据
+                gltfWalls:[], // 场景中墙体模型数组
+                loader:null,
+                scene:null,
+                // sky:null,
+                camera:null,
+                controls:null,
+				curHouseObj: null,
+				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
+				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
+				// cameraLastPosition: null,		//摄像头上一次移动到的位置
+				// controlLastPosition: null,		//观察点上一次移动到的位置
+				canvasHeight:430,	//canvas视图的高度-计算得出
+				chooseMesh:null,//标记鼠标拾取到的mesh
+				progress:1,	//进度条
+				myLoadingStatus:false,
+				repeatFlag:false,	//重复点击
+				instancedFloorMesh:null,
+				instancedMeshList: [],
+				lableItem:[],
+				showLables:false,
+				floorList:[],
+				floorId:null,
+				curData:null,	//上一个页面传来的数据
+				curSpaceObj:null,	//当前应该定位到的空间
+            }
+        },
+        watch:{
+
+        },
+		onUnload() {
+			cancelAnimationFrame(requestId, this.canvas)
+			this.worker && this.worker.terminate()
+			setTimeout(() => {
+				if (this.renderer instanceof THREE.WebGLRenderer) {
+					this.renderer.dispose()
+					this.renderer.forceContextLoss()
+					this.renderer.context = null
+					this.renderer.domElement = null
+					this.renderer = null;
+					this.clearHandle()
+				}
+			}, 0)
+			this.gltfWalls = [];
+			this.instancedMeshList = [];
+			this.instancedSpaceMeshList = [];
+			this.lableItem = [];
+			this.gltfLayouts = [];
+			this.instancedFurList = [];
+			TWEEN && TWEEN.removeAll();//清除所有的tween;
+		},
+        async onLoad(options) {
+			uni.hideShareMenu && uni.hideShareMenu();
+			var that = this;
+			let unit = app.globalData.systemInfo.screenWidth / 750;//单位rpx 对应 px 的值
+			that.canvasHeight = window.innerHeight;
+			
+            const canvas3d = this.canvas = await document.createElementAsync("canvas","webgl")
+			//uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm
+			let curent = getCurrentPages()[getCurrentPages().length - 1];
+			let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
+			curent = Object.assign(curent,currUniPage);
+			let container = null, clock = null, controls = {target:{}};
+			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 scaleCameraStarPY = 0;
+
+			let TouchContact = 0;	//滑动时上一次的手指数目
+			let fingerCount = 0;	//触摸时的手指数目
+			let touchStart = {		//
+				clientX: 0,
+				clientY: 0,
+				distance:0,
+			};
+			let  startTime = 0, cameraPositionY = 0;	//非漫游时的移动变量
+
+			let tweenCameraAnma = false;	//表示当前是否处在动画过程中
+
+			
+			let spherical = new THREE.Spherical();
+			let sphericalDelta = new THREE.Spherical();
+			// let panOffset = new THREE.Vector3();
+			let quat = null;
+			let quatInverse = null;//倒置的
+			let rotateStart = new THREE.Vector2();
+			let rotateEnd = new THREE.Vector2();
+			let rotateDelta = new THREE.Vector2();
+			let minPolarAngle = 0;// 默认0
+			let maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到撒旦视角。
+
+			init();
+			this.$refs.myLoading.showLoading("加载中...1%")
+			this.myLoadingStatus = true;
+			this.progress = 1;
+			this.clearEvent = clearEvent;
+			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
+			this.updateLables = updateLables;
+			this.moveMeshCenterHandle = moveMeshCenterHandle;
+			function init() {
+				container = document.getElementById( 'container' );
+
+                scene.background = new THREE.Color("#F2F2F2");
+                scene.environment = new THREE.Color("#F2F2F2");
+
+				// 创建相机位置
+				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / that.canvasHeight, 0.1, 10000 );
+				// camera.up.set(0, 0, -1);//俯视状态，将相机的up向量设置为z轴负方向
+				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
+				scene.add(camera);
+                that.camera = camera;
+                // 时间
+                clock = new THREE.Clock();
+				// 辅助方格
+				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
+				// gridHelper.position.y = 0;
+				// gridHelper.position.x = 0;
+				// scene.add(gridHelper);
+
+                // 环境光会均匀的照亮场景中的所有物体
+                const ambientLight = new THREE.AmbientLight(0xFFEFE0, 1.48 );
+                scene.add( ambientLight );
+                //平行光
+                const light = new THREE.DirectionalLight(0xFFF8E5, 1.96 );
+                light.position.set(-14.8, 9.188, -7.448); //default; light shining from top
+                scene.add(light);
+				//antialias 这个值得设置为false，不然IOS上截图会失效
+                renderer = that.renderer = new THREE.WebGLRenderer( { canvas:canvas3d, alpha: true,
+					// 如果想保存three.js canvas画布上的信息，注意设置preserveDrawingBuffer
+					preserveDrawingBuffer: true, } );
+                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( window.innerWidth, that.canvasHeight );
+                container.appendChild( renderer.domElement );
+				
+
+				controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
+				that.controls = controls;
+				camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
+                // 监听
+                // window.addEventListener( 'resize', onWindowResize );
+                // raycaster = new THREE.Raycaster();
+				document.addEventListener('touchstart', onPointerStart, false);
+				document.addEventListener('touchmove', onPointerMove, false);
+				document.addEventListener('touchend', onPointerUp, false);
+				render();//重启渲染
+            }
+			function tweenCameraAnmaChange (value) {
+				tweenCameraAnma = value
+			}
+			//取消事件监听-避免二次进入时触发多次事件
+			function clearEvent(){
+				console.warn("**clearEvent****")
+				document.removeEventListener('touchstart', onPointerStart);
+				document.removeEventListener('touchmove', onPointerMove );
+				document.removeEventListener('touchend', onPointerUp );
+			}
+			function rotateLeft( angle ) {
+				sphericalDelta.theta -= angle;
+			}
+			
+			function rotateUp( angle ) {
+				sphericalDelta.phi -= angle;
+			}
+			//更新球坐标 这里的up向量影响到了水平滑动的效果，需要仔细研究
+			function update() {
+				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
+				const offset = new THREE.Vector3();
+				quat = new THREE.Quaternion().setFromUnitVectors( camera.up, new THREE.Vector3( 0, 1, 0 ) );
+				quatInverse = quat.clone().invert();//翻转该四元数
+				const position = camera.position;
+				// console.warn("***camera-info0***",JSON.stringify(camera.up),JSON.stringify(camera.position),JSON.stringify(quat))
+				offset.copy( position ).sub( controls.target );
+				// rotate offset to "y-axis-is-up" space
+				offset.applyQuaternion( quat );
+				// 设置球坐标的radius、phi和theta值
+				spherical.setFromVector3( offset );// 以上是构建当前状态下的摄像机和观测点之间的球坐标
+				spherical.theta += sphericalDelta.theta;
+				if(camera.isPerspectiveCamera){//透视相机
+					spherical.phi += sphericalDelta.phi;
+					// restrict phi to be between desired limits
+					spherical.phi = Math.max( minPolarAngle, Math.min( maxPolarAngle, spherical.phi ) );
+				}
+				spherical.makeSafe();
+				// spherical.radius *= 1;
+				// restrict radius to be between desired limits
+				// spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
+				// controls.target.add( panOffset );
+				//以上是根据条件更新球坐标的值，然后从球坐标当中获取位置等信息
+				offset.setFromSpherical( spherical );
+				offset.applyQuaternion( quatInverse );
+				position.copy( controls.target ).add( offset );
+				camera.lookAt( controls.target );
+			
+				sphericalDelta.set( 0, 0, 0 );
+			};
+			//更新初始点
+			function touchOne(touches,event) {
+				// 只有一个手指时记录当前点的坐标作为平移起始点
+				if (isUserContorl === false) {// 非漫游状态
+					rotateStart.set( event.clientX, event.clientY );
+				}
+			}
+			// 手指移动开始
+			function onPointerStart(event){
+				startTime = (new Date()).getTime();
+				fingerCount = event.touches.length;//手指个数
+				console.log('开始触摸事件：',fingerCount,tweenCameraAnma,isUserContorl,camera.position.y,event,event.touches)
+				if (fingerCount === 1) {
+					// 只有一个手指时记录当前点的坐标作为平移起始点
+					if (isUserContorl === false) {//非漫游模式
+						touchOne(event.touches[0],event);
+					}
+				} else {
+					// 有两个手指时记录两个点的距离和中点作为缩放起始点
+					let xMove = event.touches[1].clientX - event.touches[0].clientX;
+					let yMove = event.touches[1].clientY - event.touches[0].clientY;
+					//计算开始触发两个手指坐标的距离
+					let distance = Math.sqrt(xMove * xMove + yMove * yMove);
+					touchStart.distance = distance;
+					scaleCameraStarPY = camera.position.y;
+				}
+			}
+			//持续触摸中
+			function onPointerMove( event ) {
+				fingerCount = event.touches.length;//手指个数
+				that.showLables = false;
+				if(fingerCount==1){
+					// 当触屏，两个手指变成一个手指；此时缩放动作结束,滑动图片开始
+					if (TouchContact == 2) {//上一次滑动的触摸点个数
+					    console.warn('两个手指变成一个手指');
+					    touchOne(event.touches[0],event);
+					}else{
+						if (isUserContorl === false) {// 非漫游状态
+							rotateEnd.set( event.clientX, event.clientY );
+							rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( 1 );
+							const element = renderer.domElement;
+							rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
+							rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
+							rotateStart.copy( rotateEnd );
+							update();
+						}
+					}
+				} else if (fingerCount === 2) {
+					// console.warn(fingerCount,"***onPointerMove-lon***",lon)
+					//双手指运动 x移动后的坐标和y移动后的坐标
+					let xMove = event.touches[1].clientX - event.touches[0].clientX;
+					let yMove = event.touches[1].clientY - event.touches[0].clientY;
+					//双手指运动新的 ditance
+					let distance = Math.sqrt(xMove * xMove + yMove * yMove);
+					//计算移动的过程中实际移动了多少的距离
+					let distanceDiff = distance - touchStart.distance;
+					// 双手滑动得距离
+					cameraPositionY =  0.1 * distanceDiff;
+				}
+				TouchContact = fingerCount;
+			}
+			//触摸结束
+			function onPointerUp(event) {
+				fingerCount = event.touches.length;//手指个数
+				// console.warn(fingerCount,"***onPointerUp***",startTime)
+				if(fingerCount==0){
+					let now = new Date().getTime()
+					if (Math.abs(event.clientX - rotateStart.x) < 10 
+					&& Math.abs(event.clientY - rotateStart.y) < 10 
+					&& (now - startTime) < 300 ){
+						// 点击事件-先注释
+						// checkIntersection(event);
+					}else{
+						if (isUserContorl === false) {// 非漫游状态
+						}
+					}
+					that.showLables = true;
+					updateLables();
+				}
+				else if(fingerCount==1){//双指情况下,松开一指
+					console.warn(fingerCount,"***onPointerUp***",cameraPositionY)
+					cameraPositionY = 0;
+				}
+			}
+			//把摄像机移动的选中模型的正上方，观察点也变更为模型中心点，同时选中模型
+			function moveMeshCenterHandle(mesh = null,noChangeColor = true){
+				if(mesh){//如果传入了模型，则取模型
+					let spaceId = mesh.spaceId;//空间id
+					if(chooseMesh && spaceId == chooseMesh.spaceId){
+						console.warn("**moveMeshCenterHandle-重复选中了***")
+						return false;
+					}
+					chooseMesh = mesh;
+				}
+				if(!chooseMesh){
+					console.warn("**moveMeshCenterHandle-没有数据***")
+					return false;
+				}
+				that.showLables = false;//隐藏
+				controls.enable = false;//控制器不响应用户的操作
+				
+				// let object = chooseMesh;//当前选中的空间模型
+				// let spaceObj = object.userData;//获取空间模型的相关数据
+				
+				let spaceObj = chooseMesh;//获取空间模型的相关数据
+				let cameraNewPosition ={};
+				let targetNewPosition ={};
+				let oldUp = {};
+				let newUp = {};
+				if (isUserContorl === false) { // 非漫游状态
+					cameraNewPosition = {
+						x:spaceObj.centerX/100,
+						y:camera.position.y, 
+						z:-spaceObj.centerY/100,
+					}
+					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为0
+					targetNewPosition = {
+						x:spaceObj.centerX/100,
+						y:0, 
+						z:-spaceObj.centerY/100,
+					}
+					oldUp = camera.up;//俯视状态
+					newUp = camera.up
+					// that.cameraLastPosition = cameraNewPosition;//记录下上一次摄像头位置
+					// that.controlLastPosition = targetNewPosition;//记录下上一次观察点位置
+				}
+				console.warn("**moveMeshCenter***",isUserContorl,spaceObj,JSON.stringify(camera.position),JSON.stringify(controls.target)
+				,cameraNewPosition,targetNewPosition,JSON.stringify(camera.up))
+				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,600);
+				setTimeout(()=>{
+					that.showLables = true;
+					updateLables();
+					controls.enable = true;//控制器不响应用户的操作
+				},601);//动画结束后回复原始状态
+			}
+			
+			// oldP  相机原来的位置
+            // oldT  target原来的位置
+            // newP  相机新的位置
+            // newT  target新的位置
+            function tweenCamera(oldP, oldT, newP, newT, oldUp, newUp, time=1000) {
+				if(JSON.stringify(oldP) == JSON.stringify(newP) && JSON.stringify(oldT) == JSON.stringify(newT)){
+					that.repeatFlag = false;//放开限制，可以再次点击
+					return false;
+				}
+				tweenCameraAnma = true;
+				var tween = new TWEEN.Tween({
+					x1: oldP.x, // 相机x
+					y1: oldP.y, // 相机y
+					z1: oldP.z, // 相机z
+					x2: oldT.x, // 控制点的中心点x
+					y2: oldT.y, // 控制点的中心点y
+					z2: oldT.z,	// 控制点的中心点z
+					x3: oldUp.x, // 控制点的中心点x
+					y3: oldUp.y, // 控制点的中心点y
+					z3: oldUp.z  // 控制点的中心点z
+				})
+				.to({
+			        x1: newP.x,
+					y1: newP.y,
+					z1: newP.z,
+					x2: newT.x,
+					y2: newT.y,
+					z2: newT.z,
+					x3: newUp.x, // up向量
+					y3: newUp.y, // 控制点的中心点y
+					z3: newUp.z  // 控制点的中心点z
+			    }, time)
+				.easing(TWEEN.Easing.Quadratic.InOut)
+				.onUpdate((object)=> {
+					camera.position.x = object.x1;
+					camera.position.y = object.y1;
+					camera.position.z = object.z1;
+					let newTarget = new THREE.Vector3(object.x3,object.y3,object.z3);
+					camera.up.copy(newTarget);
+					camera.lookAt(object.x2,object.y2,object.z2);
+					// controls.target.x = object.x2;
+					// controls.target.y = object.y2;
+					// controls.target.z = object.z2;
+					// controls.update();
+					// console.warn("****onUpdate**",object.x1,object.y1,object.z1,object.x2,object.y2,object.z2)
+				}).onComplete(()=>{
+					controls.target.x = newT.x;
+					controls.target.y = newT.y;
+					controls.target.z = newT.z;
+					//修正最后的视角
+					let up = new THREE.Vector3(newUp.x,newUp.y,newUp.z);
+					camera.up.copy(up);
+					camera.lookAt(controls.target.x,controls.target.y,controls.target.z);
+					tweenCameraAnma = false;
+					that.repeatFlag = false;//放开限制，可以再次点击
+				})
+				// 开始动画
+				tween.start();
+			}
+			function onWindowResize() {
+                camera.aspect = window.innerWidth / that.canvasHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize( window.innerWidth, that.canvasHeight );
+            }
+			//计算漫游时当前选中空间的观察点和摄像机的放置点位
+			//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) * window.innerWidth;
+					const y = (position.y * -.5 + .5) * that.canvasHeight;
+					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
+				})
+			}
+            function render() {
+                TWEEN && TWEEN.update();
+                if (mixer) {
+					let delta = clock.getDelta();
+                    mixer.update(delta);
+                }
+				//不处在动画过程中，则可以处理移动等动作
+				if(tweenCameraAnma==false){
+					if (isUserContorl === false ) { // 非漫游
+						if(fingerCount==2){//双指情况下
+							console.warn("***camera.isPerspectiveCamera***",scaleCameraStarPY,cameraPositionY,JSON.stringify(camera.position))
+							let _cha = scaleCameraStarPY - cameraPositionY;
+							if(_cha < 1.2){
+								_cha = 1.2;
+							}
+							if(camera.position.y!=_cha){//不等才更新camera.position
+								camera.position.set(camera.position.x, _cha, camera.position.z);
+							}
+						}
+					}
+				}
+				renderer.render(scene, camera);//单次渲染
+				requestId = requestAnimationFrame(render, canvas3d);
+            }
+			
+			const eventChannel = this.getOpenerEventChannel();
+			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
+			eventChannel && eventChannel.hasOwnProperty('on') && eventChannel.on('acceptDataFromOpenerPage', (data) => {
+				console.log('监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据',data)
+				this.setHouseDetail(data)
+			})
+			
+		},
+
+		methods: {
+			clearHandle(){
+				this.clearEvent();
+			},
+			//楼层切换
+			floorChange(item){
+				if(this.floorId==item.layoutId){
+					return false;
+				}
+				this.floorId = item.layoutId;
+				
+				this.curHouseObj = this.curData.layoutStruct.find(it=>it.layoutId==item.layoutId);//更新当前具体的户型数据
+				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+				let deleList = this.scene.children.filter(object=>{
+					if(object.userType=="mesh" || object.userType=="layoutMesh"){
+						return object
+					}
+				})
+				// console.warn("***deleList***",deleList)
+				if(deleList && deleList.length>0){
+					this.showLables = false;//隐藏lable
+					this.scene.remove(...deleList);
+				}
+				this.gltfWalls = [];
+				this.gltfSpaces = [];
+				this.instancedMeshList = [];
+				this.instancedSpaceMeshList = [];
+				this.lableItem = [];
+				this.gltfLayouts = [];
+				this.instancedFurList = [];
+				this.wallList = [];
+				//恢复初始视角
+				this.camera.position.set(this.cameraStarPosition.x, this.cameraStarPosition.y, this.cameraStarPosition.z);
+				this.controls.target = new THREE.Vector3( this.controlStarPosition.x, this.controlStarPosition.y, this.controlStarPosition.z );;
+				this.camera.lookAt(this.controlStarPosition.x,this.controlStarPosition.y,this.controlStarPosition.z);
+				
+				setTimeout(()=>{
+					this.loadSpace();
+				}, 100);
+				// this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
+			},
+			/**
+			 * 设置户型详情信息
+			 * @param {Object} data 户型详情
+			 */
+			setHouseDetail(data){
+				if(data && data.layoutStruct){
+					let curData = data.layoutStruct;
+					this.curHouseObj = curData.layoutStruct.find(it=>it.floor==curData.curFloor);;
+					// this.spaceId = this.curHouseObj.spaceId;
+					console.warn("***curHouseObj***",this.curHouseObj)
+					this.floorList = [];
+					curData.layoutStruct && curData.layoutStruct.forEach(item=>{
+						this.floorList.push({
+							houseFloor:item.floor,
+							layoutId:item.layoutId,
+						});
+					})
+					let select = this.floorList.find(it=>it.houseFloor==this.curHouseObj.floor);
+					this.floorId = select ? select.layoutId : this.floorList[0].layoutId;
+					this.curData = curData;
+					console.warn("***floorList-init***",this.floorList,select)
+					// 加载户型
+					this.loadSpace();
+				}else{
+					this.curHouseObj = {}
+				}
+			},
+			// 添加文字标签
+			addWordLabel(){
+				if(!this.gltfSpaces || this.gltfSpaces.length <= 0){
+					return false;
+				}
+				// 方案二
+				this.lableItem = [];
+				this.gltfSpaces.forEach((cube,index) =>{
+					// 给地板加上空间类型标注, 空间为链接空间的不显示
+					if(cube.spaceName && !cube.isSizeLock){
+						this.lableItem.push(
+							{
+								// text:this.spaceTypes[cube.spaceType - 1],
+								text:cube.spaceName,
+								spaceId:cube.spaceId,
+								transform:'',
+								cubeIndex:index,
+							}
+						)
+					}
+				})
+				this.showLables = true;
+				this.updateLables();//更新lable
+			}, 
+			/**
+			 * 返回列表页
+			 */
+			backHouseList(){
+				uni.navigateBack();
+			},
+            webgl_touch(e) {
+                const web_e = Event.fix(e)
+                window.dispatchEvent(web_e)
+				let web_e2 = Object.assign(e,web_e)
+                document.dispatchEvent(web_e2)
+                this.canvas.dispatchEvent(web_e)
+				
+            },
+			//obj 物体对象，type 是否改变颜色
+			moveMeshCenter(obj,type){
+				console.warn("**moveMeshCenter***",obj)
+				if(obj && this.gltfSpaces && this.gltfSpaces.length>0){
+					this.moveMeshCenterHandle(obj,type);
+				}
+			},
+            // 绘制空间-即地板
+            async loadSpace(){
+				this.spaceList = [];
+				this.wallIds = [];
+				if(!this.curHouseObj){//减少重复请求
+					console.warn("***数据错误***")
+					return false
+				}
+                if(this.curHouseObj){
+                    const spaceDetail = this.curHouseObj;
+                    const spaceList =spaceDetail.houseJson;
+                    // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
+                    for (let index = 0; index < spaceList.length; index++) {
+                        var element = spaceList[index];
+                        // const centerX = JSON.parse(JSON.stringify(element.centerX))
+                        // element.centerX = element.centerY;
+                        // element.centerY = centerX;
+						// 计算观察点向量（相对中心点）
+						let _actorLoaction = element.actorLocation.split(',');//x y z
+						let _x = parseInt(_actorLoaction[1]) || element.centerX;//观察点 X轴坐标 
+						let _z = (parseInt(_actorLoaction[0])) || element.centerY;//观察点 Z轴坐标
+						let _presentX = (_x - element.centerX)/((element.spaceWidth/2) - 5);//5是墙壁厚度的一半-单位cm
+						let _presentY = (_z - element.centerY)/((element.spaceHeight/2) - 5);
+						element.presentX = _presentX;//观察点跟空间中心原点的距离比例
+						element.presentY = _presentY;
+						element.wallMoveValue = "[0,0,0,0]"
+                        this.spaceList.push(element);
+                        this.wallIds.push(element.wallId);
+						if(element.isSelected){ // 默认选中空间
+						    this.curSpaceObj = element;
+						}
+                    }
+					if(!this.curSpaceObj && this.spaceList.length > 0){
+					    this.curSpaceObj = this.spaceList[0];
+					}
+                }
+                console.log("该户型空间数据:", this.spaceList);
+				console.log("当前选中的空间:", this.curSpaceObj);
+				this.loaderSpaceArr(this.spaceList);
+                // 获取墙体数据并且绘制墙体
+                this.getHouseTypeSpaceWalls();
+            },
+            // 获取墙体数据
+            async getHouseTypeSpaceWalls(){
+                let data = {id:this.wallIds}
+                const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
+                console.log("墙体数据:", res.list)
+                let wallList = [];
+                if(res.success){
+                    wallList = this.wallList = res.list;
+                }
+                let 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.computeWallHandle(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)
+            },
+			// 加载单个空间墙体资源
+            async loadSpaceObjWalls(wallArr, wallList){
+                // 加载远程墙体模型资源
+				let startTime = new Date().getTime();
+                // console.log("wallArr:", wallArr)
+				let promise_list = [];
+				let realWallArr = this.preWallData(wallArr);
+				let arrLength = realWallArr.length;
+				realWallArr && realWallArr.forEach((item,index) => {
+					promise_list.push(
+						new Promise((resolve, reject) => {
+							this.loadWallModels(item, wallList, arrLength , resolve);
+						})
+					)
+				});
+				Promise.all(promise_list).then(()=>{
+					let endTime = new Date().getTime();
+					console.log("模型全部加载完成，时间：",endTime - startTime);
+					this.$nextTick(()=>{
+						this.moveMeshCenter(this.curSpaceObj);
+						this.progress = 100;
+						this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
+						this.$nextTick(()=>{
+							this.myLoadingStatus = false;
+							this.$refs.myLoading.hideLoading();
+							setTimeout(()=>{
+								this.addWordLabel(); // 添加文字标签
+							}, 610);
+						})
+						// this.getOverallArrangementDetailsList();
+					})
+				})
+            },
+        }
+    }
+</script>
+<style lang="css" scoped>
+    @import "./webgl_rxdz_look.css";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.css

@@ -0,0 +1,64 @@
+canvas { width:100vw; height:calc(100vh - 408rpx);z-index: 10;}
+#mapDiv{
+	background-color: #fff;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+#canvas_webgl{
+	/* background: url(resources/images/daikanyama.jpg) no-repeat center center; */
+	/* background:#6d0909;
+	background-size: cover; */
+}
+/* 生成截屏的画布对象 */
+#canvas {
+	width: 100vw;
+	z-index: -1;
+	position: absolute;
+	left:0rpx;
+}
+/* .btn{
+	position:absolute;
+	width:300rpx;
+	height:132rpx;
+	bottom:60rpx;
+	right:30rpx;
+	border-radius: 10rpx;
+	opacity:1;
+	z-index:10000;
+	color:red;
+	display: flex;
+	flex-direction:row;
+	align-items:center;
+	justify-content:center;
+	background-color: rgba(155, 155, 155, 0.6);
+}
+
+.changeSizebtn {
+	position:absolute;
+	width:300rpx;
+	height:132rpx;
+	bottom:60rpx;
+	left:30rpx;
+	border-radius: 10rpx;
+	opacity:1;
+	z-index:10000;
+	color:red;
+	display: flex;
+	flex-direction:row;
+	align-items:center;
+	justify-content:center;
+	background-color: rgba(155, 155, 155, 0.6);
+} */
+.canvas-view{
+	position:relative;
+}
+.lable-view{
+	position:absolute;
+	width:100vw;
+}

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.html

@@ -0,0 +1,28 @@
+<!--
+ * @Author: caodongdong caodongdoong@gmail.com
+ * @Date: 2023-05-17 15:46:34
+ * @LastEditors: caodongdong caodongdoong@gmail.com
+ * @LastEditTime: 2023-06-30 16:20:04
+ * @FilePath: \h5-uniApp-miniprogrgm\webgl\pages\webgl_rxdz\webgl_rxdz.html
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<div>
+	<!-- <mynavbar :barData='navbar'/> -->
+	<!-- 主要操作视图 -->
+	<!-- <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" @hideOrShowActor="hideOrShowActor" ></viewMask>
+	<!-- 生成截屏的画布对象 -->
+	<canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px','top':'100vh'}"></canvas>
+</div>

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -0,0 +1,927 @@
+<template src="./webgl_rxdz_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';
+
+	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/newBottomCom/viewShell/viewShell.vue';
+	import viewMask from'@/components/newBottomCom/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 '@/common/commonPageMethod.js';
+    // const app = getApp(); //获取应用实例
+    export default {
+		components:{viewShell,viewMask},
+		mixins:[screenshot,loadModel,floorMethod,wallMethod],
+        /**
+         * 页面的初始数据
+         */
+        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: false, // 如果是 true 会接手 navbarBackClk
+				    fromShare: false,
+				    fromProject: 0,
+				    shareToken: "",
+				    pageName: this.pvCurPageName,
+				},
+                id:'',// 户型编号
+                spaceList:[], // 空间列表
+                gltfSpaces:[], // 场景中地板模型数组
+                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
+				isManyou: false,	//当前是否处在漫游状态
+				shottingImg: [],
+				progress:1,	//进度条
+				myLoadingStatus:false,
+				// textGeoList:[],
+				repeatFlag:false,	//重复点击
+				// skyPlan: null, // 天空盒子
+				instancedMeshList: [],
+				screenshotResolve:null,
+				actors:[],
+				showDownView:true,//默认显示下载按钮
+				currentActor:null,
+				isIos:false,	//是否ios手机。默认不是
+				circleGroup: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",
+				// ]
+            }
+        },
+		onUnload() {
+			cancelAnimationFrame(requestId, this.canvas)
+			this.worker && this.worker.terminate()
+			setTimeout(() => {
+				if (this.renderer instanceof THREE.WebGLRenderer) {
+					this.renderer.dispose()
+					this.renderer.forceContextLoss()
+					this.renderer.context = null
+					this.renderer.domElement = null
+					this.renderer = null;
+					this.clearHandle()
+				}
+				TWEEN && TWEEN.removeAll();//清除所有的tween;
+			}, 0)
+		},
+        mounted(options) {
+			var that = this;
+			console.warn("***webgl_rxdz_roam-options***",this.$route.query)
+
+			let unit = window.screen.width / 750;//单位rpm 对应 px 的值
+			that.canvasHeight = window.screen.height - (408 * unit) + (20 * 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.myLoadingStatus = true;
+			this.progress = 1;
+			this.clearEvent = clearEvent;
+			this.attendEvent = attendEvent;
+			// this.meshRoam = meshRoam;
+			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
+			this.switchActor = switchActor;
+			this.hideOrShowActor = hideOrShowActor;
+			this.starRender = starRender;//对外暴露启动渲染的方法
+			this.positionCamer = positionCamer;
+			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(95, window.innerWidth / 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;
+                // 时间
+                // clock = new THREE.Clock();
+				// 辅助方格
+				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
+				// gridHelper.position.y = 0;
+				// gridHelper.position.x = 0;
+				// scene.add(gridHelper);
+
+                // 环境光会均匀的照亮场景中的所有物体
+				const ambientLight = new THREE.AmbientLight(0xFEFBF6, 1.62);
+				scene.add( ambientLight );
+				
+				//平行光
+				const light = new THREE.DirectionalLight(0xFFFFFF, 1.98);
+				// const helper = new THREE.CameraHelper( light.shadow.camera );
+				// scene.add( helper );
+				light.position.set(-14.8, 30, 18); //default; light shining from top
+				// light.castShadow = true; // default false
+				// // 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域，光源投射方向为通过坐标原点
+				// light.shadow.camera.left = -200; // default
+				// light.shadow.camera.right  = 200; // default
+				// light.shadow.camera.top  = 200; // default
+				// light.shadow.camera.bottom  = -200; // default
+				scene.add(light);
+				
+				//antialias 这个值得设置为false，不然IOS上截图会失效
+                renderer = that.renderer = new THREE.WebGLRenderer( { 
+					canvas:canvas3d, 
+					alpha: false,
+					antialias:false,
+					preserveDrawingBuffer: true,
+				});
+				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( window.innerWidth, that.canvasHeight );
+                container.appendChild( renderer.domElement );
+				
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.screenSpacePanning = true;
+				controls.enableDamping = true;
+				controls.minDistance = 0.5;
+				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 = false;//禁用摄像机平移
+				controls.enableRotate = true;//启用摄像机水平或垂直旋转
+				controls.zoomToCursor = true;
+				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 );
+				attendEvent();//注册监听事件
+				starRender();	//启动渲染
+            }
+			function tweenCameraAnmaChange (value) {
+				tweenCameraAnma = value
+			}
+			function attendEvent () {
+				document.addEventListener('touchstart', onPointerStart, false);
+				document.addEventListener('touchmove', onPointerMove, false);
+				document.addEventListener('touchend', onPointerUp, false);
+			}
+			//取消事件监听-避免二次进入时触发多次事件
+			function clearEvent(){
+				console.warn("**clearEvent****")
+				document.removeEventListener('touchstart', onPointerStart);
+				document.removeEventListener('touchmove', onPointerMove );
+				document.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.clientX;
+					onPointerDownMouseY = event.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.clientX - onPointerDownMouseX) < 10 
+					&& Math.abs(event.clientY - onPointerDownMouseY) < 10 
+					&& (now - startTime) < 300 ){
+						checkIntersection(event);
+					}
+				}
+			}
+			//射线检测handle
+			function checkIntersection(event) {
+			    let x = (event.clientX / window.innerWidth) * (2/window.devicePixelRatio) - 1;
+			    let y = -(event.clientY / that.canvasHeight) * (2/window.devicePixelRatio) + 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 == "花园"){//花园
+							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-地板***",mesh,floor,index,spaceId,that.spaceId)
+						//当前拾取到的是本空间的底部-意味着用户点击了地板
+						if(floor && spaceId == that.spaceId){
+							// console.warn("***checkIntersection-地板***",mesh,floor)
+							moveCarmer(mesh.point);
+							return false;
+						}
+					}
+			    }
+			}
+			//显示当前选中的视角或者隐藏所有视角-因为截图时不能保留视角
+			function hideOrShowActor (type) {
+				console.warn("***hideOrShowActor***",type)
+				if(type=='hide'){
+					that.actors.forEach(it=>{
+						it.visible = false;//隐藏所有的视角的mesh模型
+					})
+				}else{
+					if(!that.currentActor){
+						uni.showToast({
+							icon: "none",
+							title: "没有视角!",
+						});
+						return false;
+					}
+					that.actors.forEach(it=>{
+						if(that.currentActor.userIndex==it.userIndex){
+							it.visible = false;//隐藏即将切换到的视角的mesh模型
+						}else{
+							it.visible = true;//显示其他视角的模型
+						}
+					})
+				}
+			}
+			//自动切换视角
+			function switchActor () {
+				if(!that.currentActor){
+					uni.showToast({
+						icon: "none",
+						title: "没有当前视角!",
+					});
+					return false;
+				}
+				if(!that.actors || that.actors.length==0){
+					uni.showToast({
+						icon: "none",
+						title: "没有视角!",
+					});
+					return false;
+				}
+				let index = that.currentActor.userIndex;//当前视角的序号
+				let nextIndex = (index + 1) % that.actors.length;
+				//移动到对应的视角去
+				moveActor(that.actors[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轴移动的距离
+				// console.warn("***moveCarmer***",_x,_z)
+				let cameraNewPosition = {x:camera.position.x + _x,y:1.2,z:camera.position.z + _z};
+				let targetNewPosition = {x:controls.target.x + _x,y:1.2,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);
+			}
+			//创建地标
+			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);
+				}
+			}
+			//移动地标
+			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.children[0].position.set(position.x,0.01,position.z);
+				}
+			}
+			//移动视角点位
+			function moveActor (obj) {
+				clearEvent();//注销事件监听
+				that.actors.forEach(it=>{
+					if(obj.userIndex==it.userIndex){
+						it.visible = false;//隐藏
+					}else{
+						it.visible = true;//显示其他
+					}
+				})
+				// 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};	//正视
+				console.warn("**moveActor***",JSON.stringify(cameraNewPosition),JSON.stringify(targetNewPosition))
+				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
+				lon = 0;
+				setTimeout(()=> {
+					attendEvent()
+				}, 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.actors = [];
+				that.loader.load("https://dm.static.elab-plus.com/miniProgram/hs/gltf/sxtgltf.gltf",  ( gltf ) => {
+					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;
+						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 = _actorLoaction[0] - spaceObj.centerY;//X轴偏移量
+						let Y_C = _actorLoaction[1] - spaceObj.centerX;//Y轴偏移量
+						let px = spaceObj.centerX + X_C;
+						let py = spaceObj.centerY + Y_C;
+						let position = {
+							x:(parseInt(px))/100,
+							y:1.2, 
+							z:-(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
+						}
+						//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.2
+						let targetNewPosition = {
+							x:position.x + Math.sin(_hd),
+							y:1.2 + Math.tan(_hdY),
+							z:(position.z - Math.cos(_hd)),
+						}
+						cube.position.set(position.x,position.y,position.z)
+						cube.scale.set(2, 2, 2);
+						cube.userIndex = index;
+						cube.actorEum = index;
+						cube.targetNewPosition = targetNewPosition;
+						console.warn("*actors*",cube)
+						scene.add(cube);
+						that.actors.push(cube);//添加视角
+						if(index == defaulIndex){//隐藏当前视角
+							cube.visible = false;
+							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 = _actorLoaction[0] - spaceObj.centerY;//X轴偏移量
+				let Y_C = _actorLoaction[1] - spaceObj.centerX;//Y轴偏移量
+				let px = spaceObj.centerX + X_C;
+				let py = spaceObj.centerY + Y_C;
+				//新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
+				let cameraNewPosition = {
+					x:(parseInt(px))/100,
+					y:1.2, 
+					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);
+					//新的坐标轴不在房间范围内，则不能移动
+					// console.warn("**roamPositionHandle-观察点不在范围中****",JSON.stringify(cameraNewPosition),minX,maxX,minY,maxY)
+					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.2
+				let targetNewPosition = {
+					x:cameraNewPosition.x + Math.sin(_hd),
+					y:1.2 + Math.tan(_hdY),
+					z:(cameraNewPosition.z - Math.cos(_hd)),
+				}
+				return {cameraNewPosition,targetNewPosition}
+			}
+			//直接定位到摄像头位置
+			function positionCamer(mesh=null){
+				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;
+				creatMoveTip(cameraNewPosition);//创建移动的地标
+				camera.position.set(cameraNewPosition.x, cameraNewPosition.y, cameraNewPosition.z);
+				camera.lookAt(targetNewPosition.x,targetNewPosition.y,targetNewPosition.z);
+				controls.target.set(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();
+					// 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 stopRender () {
+				needRender = false;
+			}
+			function starRender () {
+				if(needRender==true){//如果已经在渲染中了，则不能再次开启，避免渲染过多
+					false;
+				}
+				needRender = true;
+				render();//开始渲染
+			}
+            function render() {
+				if(needRender==false){
+					return false;
+				}
+                TWEEN && TWEEN.update();
+				stats.update();
+				//不处在动画过程中，则可以处理移动等动作
+				if(tweenCameraAnma==false){
+					
+				}
+				renderer.render(scene, camera);//单次渲染
+				requestId = requestAnimationFrame(render, canvas3d);
+				if (that.screenshotResolve) {
+					// if(that.isIos){//IOS手机
+						stopRender();
+						that.screenshotResolve()
+						that.screenshotResolve = null;//释放Promise
+					// }else{//安卓手机
+					// 	let gl = renderer.getContext();
+					// 	let frameBuffer = new THREE.Vector2();
+					// 	renderer.getDrawingBufferSize(frameBuffer);
+					// 	let pixelData = new Uint8Array(frameBuffer.x * frameBuffer.y * 4);
+					// 	//参考 Threejs WebGLRenderer.readRenderTargetPixels
+					// 	if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
+					// 		gl.readPixels(0, 0, frameBuffer.x, frameBuffer.y, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
+					// 		// 确保有像素，微信小程序安卓在进入子页面返回本页面后，再一次readPixels稳定无像素
+					// 		if (pixelData.some(i => i !== 0)) {
+					// 			stopRender();
+					// 			console.warn("***screenshotResolve-pixelData***");
+					// 			that.screenshotResolve([pixelData, frameBuffer.x, frameBuffer.y])
+					// 			that.screenshotResolve = null;//释放Promise
+					// 			frameBuffer = null;//清空内存中的数据
+					// 			pixelData = null;//清空内存中的数据
+					// 		}
+					// 	}
+					// }
+				}
+            }
+			
+			// const eventChannel = this.getOpenerEventChannel();
+			// // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
+			// eventChannel && eventChannel.hasOwnProperty('on') && eventChannel.on('acceptDataFromOpenerPage', (data) => {
+			// 	console.log('监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据',data)
+			// 	this.setHouseDetail(data);
+			// })
+			
+		},
+		computed: {
+			curHouseObj() {
+				return this.$store.state.curHouseObj;
+			},
+		},
+		watch: {
+			curHouseObj: {
+				handler(val) {
+					if (val) {
+						setTimeout(()=> {
+							this.setHouseDetail(val);
+						}, 10);
+					}
+				},
+				immediate: true,
+			}
+		},
+		methods: {
+			hideOrShowActor(){
+				
+			},
+			switchActor(){
+				
+			},
+			positionCamer(){},
+			clearHandle(){
+				this.clearEvent();
+			},
+			showOrHideWebGl(){
+				this.$refs.viewMask.showOrHideWebGl();//显示或者隐藏AI
+			},
+			save(){
+				this.$refs.viewMask.save();//下载
+			},
+			/**
+			 * 设置户型详情信息
+			 * @param {Object} data 户型详情
+			 */
+			setHouseDetail(data){
+				if(data){
+					this.id = this.curHouseObj.id;
+					this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
+					console.warn("***curHouseObj***",this.curHouseObj)
+					// 加载户型
+					this.loadSpace();
+				}else{
+					this.curHouseObj = {}
+				}
+			},
+            // 绘制空间-即地板
+            async loadSpace(){
+				this.spaceList = [];
+				this.wallIds = [];
+				if(!this.curHouseObj || !this.spaceId){//减少重复请求
+					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))
+						element.actors.forEach(actor=>{
+							let _actorLoaction = actor.actorLocation.split(',');//x y z
+							let X_C = (parseInt(_actorLoaction[0]) || element.centerY) - element.centerY;//X轴偏移量-UE原因
+							let Y_C = (parseInt(_actorLoaction[1]) || element.centerX) - element.centerX;//Y轴偏移量-向量
+							let _x = element.centerX + X_C;
+							let _z = element.centerY + Y_C;
+							
+							// 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 + "㎡"
+                console.log("该户型空间数据:", this.spaceList);curSpaceArea
+                console.log("当前选中的空间:", this.curSpaceObj);
+				this.positionCamer(this.curSpaceObj);
+				this.loaderSpaceArr(this.spaceList);//绘制地板
+                // 获取墙体数据并且绘制墙体
+                this.getHouseTypeSpaceWalls();
+            },
+			// 获取墙体数据
+            async getHouseTypeSpaceWalls(){
+                let data = {id:this.wallIds}
+                const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
+                console.log("墙体数据:", res.list)
+                let wallList = [];
+                if(res.success){
+                    wallList = this.wallList = res.list;
+                }
+                let 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="css" scoped>
+    @import "./webgl_rxdz_roam.css";
+	/* @import "@/common/css/common.css"; */
+</style>

src/router/index.js

@@ -3,6 +3,9 @@ import Router from 'vue-router'
 
 // import Login from '@/pages/loginView/loginView.vue'
 import mainView from '@/pages/mainView/mainView.vue'
+import webgl_rxdz_roam from '@/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue'
+import webgl_rxdz_look from '@/pages/webgl_rxdz_look/webgl_rxdz_look.vue'
+import webgl_rxdz_customize from '@/pages/webgl_rxdz_customize/webgl_rxdz_customize'
 
 Vue.use(Router)
 const router = new Router({
@@ -17,7 +20,23 @@ const router = new Router({
             path: '/pages/mainView',
             name: 'mainView',
             component: mainView
+        },
+        {
+            path: '/pages/webgl_rxdz_roam',
+            name: 'webgl_rxdz_roam',
+            component: webgl_rxdz_roam
+        },
+		{
+		    path: '/pages/webgl_rxdz_look',
+		    name: 'webgl_rxdz_look',
+		    component: webgl_rxdz_look
+		},
+        {
+            path: '/pages/webgl_rxdz_customize',
+            name: 'webgl_rxdz_customize',
+            component: webgl_rxdz_customize
         }
+		
     ],
 })
 

src/services/requestConfig.js

@@ -5,6 +5,7 @@ var doubleClickList = []; //防连击的数组对象
 const endpoints = {
     upload: 'elab-marketing-system/behavior/brandMiniWeb/upload', //埋点接口
     login: 'elab-marketing-analyse/cockpit/login', //用户登录
+    uploadBase64: 'elab-marketing-file/upload/uploadBase64', //uploadBase64
 	// // webGL接口
 	getHouseTypeSpaceDetailsV2: 'elab-marketing-file/space_generation_background/getHouseTypeSpaceDetails/v2', //V1.1.0-城市首页
 	getHouseTypeSpaceDetails: 'elab-marketing-file/space_generation_background/getHouseTypeSpaceDetails', //V1.1.0-城市首页
@@ -24,7 +25,12 @@ const endpoints = {
 	// generateProcess: "elab-marketing-content/aiBeautyFamily/generateProcess",
 	getUploadToken: "elab-marketing-file/upload/getUploadToken",
 	findSpatialInfoList: "elab-marketing-file/flexible_customization/findSpatialInfoList",
-
+	
+	AIuploadImgControlNet: 'elab-marketing-content/aiGenerateImg/uploadImgControlNet', //ControlNet图片上传
+	saveCustomizedRecord: 'elab-marketing-file/space_vary/saveCustomizedRecord', //用户AI信息上传
+	getCustomizedRecord: 'elab-marketing-file/space_vary/getCustomizedRecord', //获取用户定制记录
+	deleteCustomizedRecord: 'elab-marketing-file/space_vary/deleteCustomizedRecord', //删除用户定制记录
+	chineseToPinyin: 'elab-marketing-file/tools/chineseToPinyin', //汉字转拼音
 };
 window.requestConfig = async(endpoint, options, isHideLoading = false, preventDoubleClick = false, method = 'post') => {
 	if (!endpoints.hasOwnProperty(endpoint)) {

src/store/actions.js

@@ -14,6 +14,11 @@ const actions = {
 	}, account) {
 		commit('SET_ACCOUNT', account)
 	},
+	setCurHouseObj({
+		commit
+	}, obj) {
+		commit('SET_CURHOUSEOBJ', obj)
+	},
 	// setCityListData({
 	// 	commit
 	// }, cityListData) {

src/store/mutations.js

@@ -8,5 +8,8 @@ const mutations = {
 	SET_ACCOUNT(state, account) {
 		state.account = account
 	},
+	SET_CURHOUSEOBJ(state, obj) {
+		state.curHouseObj = obj
+	},
 }
 export default mutations;

src/store/state.js

@@ -3,5 +3,6 @@ const state = {
 	currentProject: null,
 	loadingMsg:"",
 	account:null,	//账号
+	curHouseObj:null,
 }
 export default state

src/utils/rem.js

@@ -2,7 +2,8 @@
 	function resize(){
 		var baseFontSize = 1;
 		var designWidth = 750;
-		var width = window.innerWidth;
+		// var width = window.innerWidth;
+		var width = window.screen.width;
 		var currentFontSize = (width/designWidth)*baseFontSize;
 		document.querySelector('html').style.fontSize = currentFontSize+'px';
 	}

src/utils/util.js

@@ -1,21 +1,5 @@
-
-const util = {
-    setTitle: (title) => {
-        document.title = title;
-
-        (function (t) {
-            document.title = t;
-            var i = document.createElement('iframe');
-            i.src = '/favicon.ico';
-            i.style.display = 'none';
-            i.onload = function () {
-                setTimeout(function () {
-                    i.remove();
-                }, 9)
-            }
-            document.body.appendChild(i);
-        })(title)
-    },
+import { getStorage } from '@/utils/localStorage';
+var util = {
     reformParam(methodName,para) {
         var parameter = {}
         parameter['merchantid'] = '1'
@@ -31,39 +15,7 @@ const util = {
         parameter['context'] = context
         return parameter
     },
-    /**
-     *
-     * @param opt
-     * view:页面名称
-     * action:操作，如点击：click
-     * label:事件描述
-     * value：资源id
-     */
-    trackEvent: (opt) => {
-      //  console.log('trackEvent')
-        if (!opt) {
-            return;
-        }
-
-        opt.view = opt.view || '';
-        opt.action = opt.action || 'click';
-        opt.label = opt.label || '';
-        opt.value = opt.value || '';
 
-        if (_czc && _czc.push) {
-            _czc.push(['_trackEvent', opt.view, opt.action, opt.label, opt.value])
-        }
-    },
-
-    trackPageview: (pathTo, pathFrom) => {
-        if (_czc && _czc.push) {
-            _czc.push(["_trackPageview", pathTo, pathFrom]);
-        }
-    },
-    accountUrl:'skyforest.tencent.TencentController.signature',
-    tokenUrl:'skyforest.mine.MineController.login.v093',
-    adviserListUrl:'skyforest.dynatown.dynatownController.getDynatownList',
-    chatUrl:'skyforest.dynatown.dynatownController.connect',
     dateFormat(date , fmt) {
         let ret
         const opt = {
@@ -140,158 +92,81 @@ const util = {
         var day = parseInt((a2-a1)/ (1000 * 60 * 60 * 24)) + 1;//核心：时间戳相减，然后除以天数
         return day
     },
-	trackRequest(para, app = getApp()) {
+	
+	getUrlParams(url) {
+		url = url == null ? window.location.href : url;
+		var search = url.substring(url.lastIndexOf("?") + 1);
+		var obj = {};
+		var reg = /([^?&=]+)=([^?&=]*)/g;
+		// [^?&=]+表示：除了？、&、=之外的一到多个字符
+		// [^?&=]*表示：除了？、&、=之外的0到多个字符（任意多个）
+		search.replace(reg, function(rs, $1, $2) {
+			var name = decodeURIComponent($1);
+			var val = decodeURIComponent($2);
+			val = String(val);
+			obj[name] = val;
+			return rs;
+		});
+		return obj;
+	},
+	trackRequest(para, app = null ) {
 	    if ((para.type && para.type.includes('Error'))) {
 	        //所有报错埋点以及曝光埋点不再发送至服务器
 	        return
 	    }
 		try {
-			if (JSON.stringify(para.clkParams) === '"{}"' || JSON.stringify(para.clkParams) === "{}") {
-				para.clkParams = '';
-			}
-			if (JSON.stringify(para.expand) === '"{}"' || JSON.stringify(para.expand) === "{}") {
-				para.expand = '';
-			}
-	
-			let _scene = (app.globalData.launchInfo && app.globalData.launchInfo.scene) ? app.globalData.launchInfo.scene : '';
-			// console.log("app.globalData.launchInfo:" + JSON.stringify(app.globalData.launchInfo));
-			let _fromParam = app.globalData.exchangedFromChannel ? JSON.parse(app.globalData.exchangedFromChannel) : {};
-			//上一个页面
-			let lastPage = getCurrentPages()[getCurrentPages().length-2] ? getCurrentPages()[getCurrentPages().length-2].$vm : null;
-			let _pvLastPageName = lastPage ? lastPage.pvCurPageName : '';//上一页面名称
-			let _pvLastPageParams =  (lastPage && lastPage.pvCurPageParams) ? lastPage.pvCurPageParams : '';//上一页面参数
-			let _pvLastPagePath = lastPage ? (lastPage.route || lastPage.__route__) : '';//上一页面路径
-			let currPage;
-			// #ifdef H5
-			if(para.pvId && para.pvId.includes('_close')){
-				currPage = app.globalData.pageData;
-			}
-			else{
-				currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm :null;
-			}
-			// #endif
-			// #ifndef H5
-			currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm :null;
-			// #endif
-			let _route = currPage ? (currPage.route || currPage.__route__) : "";
-			let _pvCurPageName = currPage ? currPage.pvCurPageName : '';//当前页面名称
-			let pvCurPageParams = "";//字符串string对象
-			if(para.pvCurPageParams){//调用的时候传递进来的-先转为对象
-				pvCurPageParams = typeof para.pvCurPageParams === 'object' ? para.pvCurPageParams : JSON.parse(para.pvCurPageParams)
-			}else{
-				let _tmp = (currPage && currPage.pvCurPageParams) ? currPage.pvCurPageParams : '{}';//获取当前页面的参数
-				pvCurPageParams = typeof _tmp === 'string' ? JSON.parse(_tmp) : JSON.parse(JSON.stringify(_tmp))
-			}
-			//在页面参数里面手动添加path参数
-			pvCurPageParams.brandId = config.brandId || "";
-			pvCurPageParams.path = _route;
-			pvCurPageParams.pageId = pvCurPageParams.pageId || currPage.pageId || "";
-			pvCurPageParams.mobile = app.globalData.phone || "";
-			pvCurPageParams.entryPageId = (lastPage && lastPage.pageId) ? lastPage.pageId : "";
-			pvCurPageParams.entryPagePath = _pvLastPagePath;
-			if(currPage && currPage.locusBehaviorName){//行为名称
-				pvCurPageParams.locusBehaviorName = currPage.locusBehaviorName;
-			}
-			
-			pvCurPageParams = JSON.stringify(pvCurPageParams);
-			// if(para.clkId==='clk_2cmina_18'){
-			// 	this.sendScoreShare()
-			// }
-			if (JSON.stringify(pvCurPageParams) === '"{}"' || JSON.stringify(pvCurPageParams) === "{}") {
-				pvCurPageParams = '';
-			}
-			_fromParam["scene"] = _scene;
-			_fromParam["appName"] = app.globalData.systemInfo ? app.globalData.systemInfo.appName : (app.$vm.$options.globalData.systemInfo.appName ||"");
-			_fromParam['eventtime'] = Date.now();
-			let houseID = "";
-			if (currPage && currPage.houseId) {
-				houseID = currPage.houseId;
-			}
-			if (currPage && (currPage.route == 'pages/shareCard/shareCard' || currPage.__route__ ==
-					'pages/shareCard/shareCard')) {
-				let enterPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length -
-						2].$vm :
-					null;
-				if (enterPage && enterPage.houseId) {
-					houseID = enterPage.houseId;
-				}
-			}
-			console.log("houseID:" + houseID);
+			var session = Number(getStorage('sessionNumber')) + 1;
 			let data = {
-				userAgent: '',
-				browserName: '',
-				browserVersion: app.globalData.systemInfo ? app.globalData.systemInfo.SDKVersion : app.$vm.$options.globalData.systemInfo.SDKVersion,
-				platform: 'miniapp', //是否来自小程序的标志
-				fromPlatform: '', //来源平台，需要汤勇提供接口解析fromChannel存放
-				reserve1: app.globalData.terminal, //来源平台，抖音百度微信
-				reserve2: app.globalData.selectCityName || app.globalData.defaultProductCityName, //当前所在城市
-				fromParam: JSON.stringify(_fromParam), //转发者秘钥
-				deviceType: app.globalData.systemInfo ? app.globalData.systemInfo.model : (app.$vm.$options.globalData.systemInfo.SDKVersion || ""), //设备系统信息
-				ip: app.globalData.ip || '', //ip地址
-				cookieId: '',
-				openId: app.globalData.openid || '', //openid
-				customerId: (app.globalData.single && app.globalData.single.id) ? app.globalData.single.id : '', //用户id
-				brandUserId: (app.globalData.single && app.globalData.single.id) ? app.globalData.single.id : '', //用户id
-				createTime: this.formatTime(new Date()), //发送埋点时间
-				uploadTime: this.formatTime(new Date()), //发送埋点时间
-				product: app.globalData.projectName, //当前所在项目中文名称
-				project: houseID, //当前项目id
-				eventId: para.eventId || '', //埋点ID
-				eventName: para.eventName || '', //埋点ID
-				expand: typeof para.expand === 'object' ? JSON.stringify(para.expand) : para.expand, //扩展字段
+				session: '',
+				userAgent: navigator.userAgent.substring(0, 255) || '',
+				browserName: navigator.appName || '',
+				browserVersion: navigator.appVersion.substring(0, 255) || '',
+				platform: location.href.indexOf("shareSign") > -1 ? 'h5' : 'tfb', //iframeUrl代表是顾问分享的外链
+				fromPlatform: util.getUrlParams(location.href).fromPlatform || util.getUrlParams(location.href).fromProduce ||'tfb',
+				deviceType: '' || "",
+				ip: window.ip || '',
+				cookieId: from_cookie || getStorage("cookie_id") || '',
+				openId: util.getUrlParams(location.href).openid,
+				userId: util.getUrlParams(location.href).leavePhoneCustomerId || '',
+				brandUserId: util.getUrlParams(location.href).leavePhoneCustomerId || '',
+				createTime: this.formatTime(new Date()),
+				uploadTime: this.formatTime(new Date()),
+				product: location.href.indexOf("shareSign") > -1 ? 'h5' : 'tfb', //iframeUrl代表是顾问分享的外链
+				project: para.project,
+				brandId: util.getUrlParams(location.href).special_ID || util.getUrlParams(location.href).brandId || null,
+				// expand:typeof para.expand==='object'?JSON.stringify(para.expand):para.expand,//扩展字段
+				expand: JSON.stringify(util.getUrlParams(location.href)), //扩展字段
 				imTalkId: para.imTalkId || '', //IM对话编号
 				imTalkType: para.imTalkType || '', //IM对话类型
 				eventModuleDes: para.eventModuleDes || '', //模块描述信息
 				eventInnerModuleId: para.eventInnerModuleId || '', //事件内部模块信息
+				eventName: para.eventName || '', //事件名称
+				eventId: para.eventId || '', //埋点ID
 				adviserId: para.adviserId || '', //顾问id
-				clkDesPage: para.clkDesPage || _pvCurPageName || '', //点击前往的页面名称
+				clkDesPage: para.clkDesPage || '', //点击前往的页面名称
 				clkId: para.clkId || '', //点击ID
 				clkName: para.clkName || '',
 				pvId: para.pvId || '', //PV埋点ID
 				clkParams: typeof para.clkParams === 'object' ? JSON.stringify(para.clkParams) : para.clkParams, //点击参数
 				pvPageStayTime: para.pvPageStayTime || '',
-				pvCurPageName: para.pvCurPageName || _pvCurPageName || '', //当前页面名称
-				pvCurPageParams: pvCurPageParams, //当前页面参数
-				pvLastPageName: para.pvLastPageName || _pvLastPageName || '', //上一页页面名称
-				pvLastPageParams: para.pvLastPageParams || _pvLastPageParams || '', //上一页页面参数
+				pvCurPageName: para.pvCurPageName || '', //当前页面名称
+				pvCurPageParams: typeof para.pvCurPageParams === 'object' ? JSON.stringify(para.pvCurPageParams) : para.pvCurPageParams ||
+					'', //当前页面参数
+				pvLastPageName: para.pvLastPageName || '', //上一页页面名称
+				pvLastPageParams: para.pvLastPageParams || '', //上一页页面参数
 				pvPageLoadTime: para.pvPageLoadTime || '', //加载时间
 				type: para.type || '', //埋点类型
-				longitude: app.globalData.longitude || '', //经度
-				latitude: app.globalData.latitude || '', //纬度
-				brandId: config.brandId, //集团id,
-				reserve3: para.reserve3 || new Date().getTime(), //埋点触发时的时间戳
-				reserve4: app.globalData.systemInfo ? app.globalData.systemInfo.deviceId : app.$vm.$options.globalData.systemInfo.deviceId,
-			};
-			// // #ifdef H5
-			// data.openId = app.globalData.H5OpenId?app.globalData.H5OpenId:(app.globalData.openid||'');
-			// data.customerId = app.globalData.H5CustomerId?app.globalData.H5CustomerId:((app.globalData.single && app.globalData.single.id) ? app.globalData.single.id : '');
-			// data.brandUserId = data.customerId;
-			// // #endif
-			let timeNow = new Date().getTime();
-			let session = uni.getStorageSync('sessionNumber') || timeNow;//session具体的值
-			sessionTime = sessionTime || timeNow;//上一次发送埋点的时间
-			if(currPage && (currPage.pvCurPageName == 'webviewPage')){//如果进入了H5-则锁定session
-				sessionTime = timeNow;//上一次发送埋点的时间
 			}
-			if(currPage.pvCurPageName != 'liveRoom'){//页面不是直播，则有10分钟刷新逻辑
-				if (timeNow - sessionTime > (10*60*1000)) {//判断当前要发送的埋点跟上次已经发送的埋点之间的时间差距
-					session = timeNow;
-					uni.setStorage({
-						key: "sessionNumber",
-						data: session
-					})
-				} else {//如果 相差不到10分钟，则session不更新，还是原来的session；这里可以加个判断 session不存在才赋值
-					uni.setStorage({
-						key: "sessionNumber",
-						data: session
-					})
-				}
+			let timeNow = new Date().getTime();
+			if (timeNow - sessionTime > 180000 && !from_session) {
+				// session++;
+				getStorage('sessionNumber', session)
 			}
-			sessionTime = timeNow;//记录下当次埋点的发送时间
-			data.session = data.brandUserId + '_' + session;//给当前的埋点加上session
-			// #ifdef H5
-			data.session = data.customerId + '_' + (app.globalData.session||session);//给当前的埋点加上session
-			// #endif
+			session = Number(getStorage('sessionNumber')) + 1;
+			data.session = from_session || getStorage("cookie_id") + "_" + session || '';
+			sessionTime = timeNow
+			console.log(data.session)
+			// return data;
 			// app.globalData.session_id = data.session
 			// app.globalData.sessionTime = timeNow;
 			requestConfig('upload', data, true);
@@ -321,3 +196,4 @@ const util = {
 };
 
 export default util;
+// module.exports = util;