h5-webgl-program/src/components/webglCom/webglCom.vue

<template src="./webglCom.html">

</template>
<script>
	import * as THREE from 'three';
	// import Stats from 'three/addons/libs/stats.module.js';
	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
	import spaceTypes from '@/static/spaceTypesIE.js';
	import TWEEN from 'three/addons/libs/tween.module.js';
	import router from "@/router";
	import {setStorage,getStorage} from '@/utils/localStorage';
	import wallType from '@/static/wallData.js';
	import screenshot from '@/mixins/screenshot.js';
	import floorMethod from '@/mixins/floorMethod.js';
	import wallMethod from '@/mixins/wallMethod.js';
	import loadModel from '@/mixins/loadModel.js';
	// import commonPageMethod from '@/mixins/commonPageMethod.js';
	// import viewShell from'@/components/newBottomCom/viewShell/viewShell.vue';
	var requestId = "";
	const util = require('@/utils/util.js').default;

	export default {
		name:"webglComponent",
		mixins:[screenshot,floorMethod,wallMethod,loadModel],
		data: function() {
			return {
				spaceList:[], 		// 空间列表
				spaceListBackup:[], // 空间列表原始尺寸备份，用于墙体比例计算
				tempSpaceList:[],	// 全部空间临时数组,寻找关联空间，递归使用
				gltfSpaces:[], 		// 场景中地板模型数组
				gltfSpaceRoofs:[], 	// 屋顶模型数组
				curSpaceObj:null, 	// 当前选中的空间
				curWallDirection:"", // 当前选中的墙面
				curWallValue:0, 		// 当前墙面的滑动值
				curWallMaxValue:300,	// 当前墙体形变的最大值
				curWallHidden:false, 	// 当前墙面的状态
				
				
				wallIds:[], 	// 当前户型下所有空间墙体id的数组
				wallList:[], 	// 当前户型下所有空间的墙体数据
				gltfWalls:[], 	// 当前户型下所有空间的墙体模型(webgl几何体模型)数组
				gltfAutoWalls:[],// 空间自动补墙模型数组
				layoutIds:[], // 当前户型下所有空间的布局id数组
				
				leftSpaces:[], // 移动空间左边数组
				rightSpaces:[],// 移动空间右边数组
				changeSpaces:[],// 尺寸变化涉及到的全部空间
				spaces1 : [],	//相对核心点的四个象限数组对象
				spaces2 : [],	//相对核心点的四个象限数组对象
				spaces3 : [],	//相对核心点的四个象限数组对象
				spaces4 : [],	//相对核心点的四个象限数组对象
				
				loader:null,	//webgl相关对象
				scene:null,
				sky:null,
				camera:null,
				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
				canvas:null,		//webgl的画布对象
				lastCanvasHeight:200,
				canvasHeight:200,	//canvas视图的高度-计算得出
				chooseMesh:null,	//标记鼠标拾取到的空间模型对象-webgl几何体mesh
				instancedMeshList: [],	// webgl墙体模型的实例化数组对象-相同mesh只会实例化一个
				instancedSpaceMeshList: [],// webgl空间模型的实例化数组对象-相同mesh只会实例化一个
				
				curLayoutStruct:null,//当前户型大类下所有楼层数据-户型存在多层结构时使用
				// houseList:[],		//当前项目下所有户型数据(以户型类型分组)-户型存在多层结构时使用
				// curHouseType: null,	//当前选中的户型类型-户型存在多层结构时使用 数字 1、2、3等区分
				// curHouseName:'',	//当前选中的户型类型名称-户型存在多层结构时使用 例如：大平层、大庭院
				curHouseFloor: null,//当前选中的户型楼层数-户型存在多层结构时使用 1F等
				curHouseObj: null,	//当前选中的户型具体楼层的数据对象-户型存在多层结构时使用
				
				gltfLayouts:[], // 场景中家具模型的对象数组
				
				shottingImg: '',	//截图
				progress:1,	//进度条
				repeatFlag:false,	//防止重复点击
				lableItem:[],		//空间悬浮tips数组
				showLables:false,	//是否显示空间悬浮tips
				screenshotResolve:null,//截图条件成熟后的异步回调
				overChange:false,	//是否形变中,true 表示空间正在形变中
				currentChangeSpaceId:null,	//当前变化中的空间id-页面依据这个有细微提示或者变化
				isIOS:false,	//是否ios手机。默认不是
				styleType:1,	//页面状态-本组件不需要用到这个状态
				sumArea:0,		//总面积
				changeArea:0,	//当次变化的面积
				fixedArea:0,	//初始面积值
				layoutArea:0,	//总面积
				houseId:'',
				
				showArea:true,	//显示面积
				circleGroup:null,//圆形地标
				showWebgl:true,
			}
		},
		props: {

		},
		watch:{
			curSpaceObj(newVal, oldVal) {
				console.log("当前空间数据webglCom-watch:", newVal);
				if (newVal == null) {
					return;
				}
			},
		},
		computed: {
			aiData() {
				return this.$store.state.aiData;
			},
			userId() {
				return this.$store.state.userId;
			},
		},
		async mounted() {
			console.warn("***webglCom***",this.$route.query,this.$route.name);
			if(this.$route.name=="webgl_rxdz" || this.$route.name=="webgl_rxdz_roam" || this.$route.name=="webgl_rxdz_look"
			 || this.$route.name=="webgl_rxdz_test" || this.$route.name=="webgl_rxdz_test_roam" || this.$route.name=="webgl_rxdz_test_look"){//去往其他页面
				this.showWebgl = true;//隐藏webgl
			}else{
				this.showWebgl = false;//隐藏webgl
			}
			var that = this;
			let isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			this.isIOS = isIOS;
			this.houseId = this.$store.state.houseId || '';
			let screenWidth = window.screen.width;
			let screenHeight = window.screen.height;
			if(window.innerWidth && window.screen.width){
				screenWidth = Math.min(window.innerWidth,window.screen.width)
			}
			if(window.innerHeight && window.screen.height){
				screenHeight = Math.min(window.innerHeight,window.screen.height)
			}
			let unit = screenWidth / 750;//单位rpm 对应 px 的值
			this.canvasHeight = screenHeight - (200 * unit) + (20 * unit);
			this.lastCanvasHeight = this.canvasHeight;
			let container = that.$refs.webgl;
			let canvas3d = that.canvas = that.$refs.glcanvas;
			
			let camera = null, renderer = null, controls= null;
			let loader = that.loader = new GLTFLoader();
			let scene = that.scene = new THREE.Scene();
			let chooseMesh = that.chooseMesh;//标记鼠标拾取到的mesh
			let isUserContorl = false;		//是否漫游状态 false不是
			let tweenCameraAnma = false;	//表示当前是否处在动画过程中
			let needRender = false;	//是否需要渲染 false表示不需要渲染；true 表示需要渲染
			let frustumSize = 30;//正交相机的视窗宽度距离
			let stats;//安卓时的资源情况
			let raycaster = null;
			let mouse = new THREE.Vector2();
			//空间漫游时变量
			let onPointerDownMouseX = 0, onPointerDownMouseY = 0,lon = 0,startTime = 0,boundary=null;
			let light = null;//平行光的
			// let lastPosition = null;
			this.progress = 1;
			this.clearEvent = clearEvent;
			this.attendEvent = attendEvent;
			this.updateLables = updateLables;
			// this.enableRenderHandle = enableRender;
			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
			this.gradientResize = gradientResize;
			this.moveMeshCenterHandle = moveMeshCenterHandle;
			this.starRender = starRender;//对外暴露启动渲染的方法
			this.stopRender = stopRender;//对外暴露停止渲染的方法
			this.cameraInit = cameraInit;
			// this.resetControl = resetControl;
			this.setHeight = setHeight;
			
			this.enterRoom = enterRoom;
			this.leaveRoom = leaveRoom;
			this.positionCamer = positionCamer;
			this.saveState = saveState;
			this.reset = reset;
			init();
			function init(){
				scene.background = new THREE.Color("#FFFFFF");
				// scene.environment = new THREE.Color("#F2F2F2");
				
				// 创建相机位置-投影相机
				camera = new THREE.PerspectiveCamera( 80, screenWidth / that.canvasHeight, 0.1, 10000 );
				// let aspect = screenWidth /  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轴负方向
				scene.add(camera);
				that.camera = camera;
				
				// 环境光会均匀的照亮场景中的所有物体
				const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3);
				scene.add(ambientLight);
				//平行光
				light = new THREE.DirectionalLight(0xFFF8E5, 3);
				light.position.set(-3, 9, 3); //default; light shining from top
				if(!that.isIOS){
					light.castShadow = true; // default false
					// 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域，光源投射方向为通过坐标原点
					light.shadow.camera.left = -100; // 这个区域内产生阴影
					light.shadow.camera.right  = 100; // 这个区域内产生阴影
					light.shadow.camera.top  = 100; // 这个区域内产生阴影
					light.shadow.camera.bottom  = -100; // 这个区域内产生阴影
					
					light.shadow.mapSize.width = 8192; 	// 影响阴影的清晰度
					light.shadow.mapSize.height = 8192; // 影响阴影的清晰度
				}
				scene.add(light);
				
				//antialias 这个值得设置为false，不然IOS上截图会失效
				renderer = that.renderer = new THREE.WebGLRenderer({ 
					canvas:canvas3d, 
					alpha: true, 
					antialias:false,
					// 如果想保存three.js canvas画布上的信息，注意设置preserveDrawingBuffer
					preserveDrawingBuffer: true,
				});
				if(!that.isIOS){
					renderer.shadowMap.enabled = true;//产生阴影
					renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影属性
				}
				renderer.outputEncoding = THREE.sRGBEncoding;
				renderer.outputColorSpace = THREE.SRGBColorSpace;
				// renderer.toneMappingExposure = 0.1;//色调映射的曝光级别。默认是1
				renderer.toneMapping = THREE.NoToneMapping;//色调映射
				renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
				
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( screenWidth,  that.canvasHeight );
				container.appendChild( renderer.domElement );
				
				controls = new OrbitControls(camera, renderer.domElement);
				controls.screenSpacePanning = false;//设置为false，则双指平移时是不会翻转垂直的
				controls.enableDamping = true;
				controls.minDistance = 1;
				controls.maxDistance = 400;
				controls.minPolarAngle = 0;// 默认0
				controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
				controls.target.set(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
				controls.enableZoom = true;//启用摄像机的缩放
				
				// stats = new Stats();
				// container.appendChild(stats.dom);
				// stats.domElement.style.top = '100px';
				attendEvent();	//注册监听事件
				starRender();	//启动渲染
				cameraInit();	//初始化摄像头
				// controls.saveState();//保存当前控制器的状态
			}
			function saveState(){
				controls.saveState();//保存当前控制器的状态
			}
			function reset(){
				controls.reset();//保存当前控制器的状态
			}
			//添加状态位置
			function addStatus(name){
				let position = new THREE.Vector3();
				position.copy(camera.position);
				let _data = {
					name:name,
					position:position,
				}
			}
			//初始化相机位置
			function cameraInit(){
				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
				camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
				controls.target.set(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
			}
			//初始状态-
			// function resetControl(){
			// 	controls.reset();
			// }
			function onWindowResize() {
			    camera.aspect = screenWidth / that.canvasHeight;
			    camera.updateProjectionMatrix();
			    renderer.setSize( screenWidth, that.canvasHeight );
				console.warn("****onWindowResize**")
			}
			function attendEvent () {
				window.addEventListener('resize', onWindowResize);
			}
			function setHeight(height){
				that.canvasHeight = height;//变更canvas的高度
				camera.aspect = screenWidth / that.canvasHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(screenWidth, that.canvasHeight);
			}
			function enterRoom(){
				// 监听相机移动事件-限制只能在当前空间范围内移动
				that.lastCanvasHeight = that.canvasHeight;//记录下当前的canvas的高度
				that.canvasHeight = screenHeight - (600 * unit) + (40 * unit);//变更canvas的高度
				camera.aspect = screenWidth / that.canvasHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(screenWidth, that.canvasHeight);
				raycaster = new THREE.Raycaster();
				controls.addEventListener('change', onControlChange,false);
				renderer && renderer.domElement && renderer.domElement.addEventListener('touchstart', onPointerStart, false);
				renderer && renderer.domElement && renderer.domElement.addEventListener('touchend', onPointerUp, false);
			}
			function leaveRoom(type=true){//取消监听的事件
				raycaster = null;
				that.circleGroup = null;
				if(that.lastCanvasHeight&&type){
					that.canvasHeight = that.lastCanvasHeight;//还原回去之前的高度
					camera.aspect = screenWidth / that.canvasHeight;
					camera.updateProjectionMatrix();
					renderer.setSize(screenWidth, that.canvasHeight);
				}
				console.warn("leaveRoom",that.lastCanvasHeight,type);
				controls.removeEventListener('change', onControlChange,false);
				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart, false);
				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp, false);
			}
			function onControlChange(){
				// 检查相机位置是否超出边界框
				if (boundary && !boundary.containsPoint(camera.position)) {
					let clampedPosition = new THREE.Vector3( );
					boundary.clampPoint(camera.position,clampedPosition);
					if(clampedPosition){
						camera.position.copy(clampedPosition);
					}
				}
			}
			// 手指移动开始
			function onPointerStart(event){
				startTime = (new Date()).getTime();
				let fingerCount = event.touches.length;//手指个数
				console.log('开始触摸事件：',lon,fingerCount,camera.position.y)
				if (fingerCount === 1) {
					// 只有一个手指时记录当前点的坐标作为平移起始点
					onPointerDownMouseX = event.changedTouches[0].clientX;
					onPointerDownMouseY = event.changedTouches[0].clientY;
				}
			}
			//触摸结束
			function onPointerUp(event) {
				let fingerCount = event.touches.length;//手指个数
				console.warn("***触摸结束***",fingerCount,startTime)
				if(fingerCount==0){
					let now = new Date().getTime()
					if (Math.abs(event.changedTouches[0].clientX - onPointerDownMouseX) < 10 
					&& Math.abs(event.changedTouches[0].clientY - onPointerDownMouseY) < 10 
					&& (now - startTime) < 300 ){
						checkIntersection(event);
					}
				}
			}
			//射线检测handle
			function checkIntersection(event) {
			    let x = (event.changedTouches[0].clientX / screenWidth) * 2 - 1;
			    let y = -(event.changedTouches[0].clientY / that.canvasHeight) * 2 + 1;
			    mouse.x = x;
			    mouse.y = y;
			    //更新射线
			    raycaster.setFromCamera(mouse, camera);
			    let intersects = raycaster.intersectObjects(scene.children,true);
				console.warn("***checkIntersection***",intersects.length)
			    if (intersects.length > 0) {
					//找到最近的那个网格模型物体
					let mesh = intersects.find((it) => {
						if(it.object && it.object.isMesh == true  
							&& it.object.parent && it.object.parent.name == 'actor'
							&& it.object.parent.visible == true){
							return true;
						}
					});
					
					//拾取到了视角，就不继续拾取了
					if(mesh){
						// moveActor(mesh.object.parent);
						return false;
					}
					mesh = intersects.find((it) => {
						if(it.object && it.object.isInstancedMesh
							&& (it.object.name == '地板' || it.object.name == '花园') && it.object.visible == true){
							return true;
						}
					});
					//拾取到了地板
					if(mesh){
						let floor = mesh.object;
						let index = mesh.instanceId;//射线相交是的实例序号
						let spaceId = that.gltfSpaces[index].spaceId;//获取选中实例的空间id
						if(floor.name == "花园"){//花园
							return false;
							let selectMesh = that.gltfSpaces.find(it=>{return it.spaceType==14 && it.instancedMeshIndexList[0].instancedAtIndex==index})
							spaceId = selectMesh.spaceId;
						}else{//室内
							// floor.name = "地板";
							let selectMesh = that.gltfSpaces.find(it=>{return it.spaceType!=14 && it.instancedMeshIndexList[0].instancedAtIndex==index})
							spaceId = selectMesh.spaceId;
						}
						// let spaceId = that.gltfSpaces[index].spaceId;//获取选中实例的空间id
						console.warn("***checkIntersection-地板***",floor,index,spaceId,that.curSpaceObj.spaceId)
						//当前拾取到的是本空间的底部-意味着用户点击了地板
						if(floor && spaceId == that.curSpaceObj.spaceId){
							moveCarmer(mesh.point);
							return false;
						}
					}
			    }
			}
			
			function tweenCameraAnmaChange (value) {
				tweenCameraAnma = value
			}
			//开启渲染-帧率优化，不触发时停止渲染
			// function enableRender() {
			// }
			//取消事件监听-避免二次进入时触发多次事件
			function clearEvent(){
				console.warn("**clearEvent****")
			}
			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;
					// 使用贴图
					const textureLoader = new THREE.TextureLoader();
					textureLoader.load('https://dm.static.elab-plus.com/miniProgram/circlemap1.png', function(texture) {
						material.map = texture; // 将贴图应用于材质的map属性
						material.needsUpdate = true; // 更新材质
					});
					that.circleGroup.add(circle);
					scene.add(that.circleGroup);
					that.circleGroup.visible = false;
				}
			}
			//移动地标
			function moveTip(position){
				if(!that.circleGroup){
					that.circleGroup = new THREE.Group();
					let geometry = new THREE.CircleGeometry( 0.2, 32 );
					let material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
					let circle = new THREE.Mesh( geometry, material );
					circle.position.set(position.x,0.01,position.z);
					circle.rotation.x = -Math.PI / 2;
					// let geometry1 = new THREE.CircleGeometry( 0.4, 32 );
					// let circle2 = new THREE.Mesh( geometry1, material );
					// circle2.position.set(position.x,0.01,position.z);
					that.circleGroup.add(circle);
					scene.add(that.circleGroup);
				}else{
					that.circleGroup.visible = true;
					that.circleGroup.children[0].position.set(position.x,0.01,position.z);
				}
			}
			//初始化点位视角
			function 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 = [];
				spaceObj.actors.forEach((actor,index)=>{
					let cube = {};
					cube.name = "actor";
					cube.userType = "mesh";
					//新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
					let _actorLoaction = actor.actorLocation.split(',');//x y z
					let _actorTransform = actor.actorTransform.split(',');//旋转角度，取第三个值
					let _hd = THREE.MathUtils.degToRad(parseInt(_actorTransform[2]));//将度转化为弧度。
					let _hdY = THREE.MathUtils.degToRad(parseInt(_actorTransform[1]));//Y轴方向上将度转化为弧度。

					let X_C = parseInt(_actorLoaction[0]);//X轴偏移量
					let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
					let px = spaceObj.centerX + X_C;
					let py = -spaceObj.centerY + Y_C;//UE里面的centerY值跟Three.js Y轴相反；获得真实的坐标值
					let position = {
						x:(parseInt(px))/100,
						y:1.5, 
						z:(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
					}
					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.5
					let targetNewPosition = {
						x:position.x + Math.sin(_hd),
						y:1.5 + Math.tan(_hdY),
						z:(position.z - Math.cos(_hd)),
					}
					cube.position = position;
					cube.userIndex = index;
					cube.actorEum = index;
					cube.targetNewPosition = targetNewPosition;
					// console.warn("*actors*",cube,defaulIndex)
					// that.actors.push(cube);//添加视角
					if(index == defaulIndex){//隐藏当前视角
						// that.currentActor = cube;//记录下当前的视角对象 mesh网格模型
						let param = {
							type: 'CLK', //埋点类型
							clkId: 'clk_2cmina_23080411', //点击ID
							clkName: 'visualangle_clk', //点击前往的页面名称
							clkParams: {
								locusName: "预制视角",
								type:cube.actorEum
							}
						};
						util.trackRequest(param);
					}
				})
			}
			//移动到选中的位置-地板
			function moveCarmer (point) {
				//还在动画中，不能点击切换
				if(tweenCameraAnma == true){
					return false;
				}
				let _x =  point.x - camera.position.x;//x轴移动的距离
				let _z =  point.z - camera.position.z;//z轴移动的距离
				let cameraNewPosition = {x:camera.position.x + _x,y:1.5,z:camera.position.z + _z};
				let targetNewPosition = {x:controls.target.x + _x,y:1.5,z:controls.target.z + _z};
				let oldUp = {x:0,y:1,z:0};	
				let newUp = {x:0,y:1,z:0};
				moveTip(cameraNewPosition)
				// console.warn("**moveCarmer***",lon,JSON.stringify(cameraNewPosition),JSON.stringify(targetNewPosition))
				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
				setTimeout(()=> {
					that.circleGroup.visible = false;
				}, 2000);
			}
			//计算当前选中空间的平视时的观察点和摄像机的放置点位
			function 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轴方向上将度转化为弧度。
				let X_C = parseInt(_actorLoaction[0]);//X轴偏移量-UE原因
				let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
				let px = spaceObj.centerX + X_C;
				let py = -spaceObj.centerY + Y_C;
				//新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
				let cameraNewPosition = {
					x:(parseInt(px))/100,
					y:1.5, 
					z:(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
				}
				if(cameraNewPosition){
					let minX = 0,maxX = 0,minY = 0,maxY = 0;//0.1 是模型墙壁厚度
					minX = (spaceObj.centerX - (spaceObj.spaceWidth/2))/100 + 0.1;
					maxX = (spaceObj.centerX + (spaceObj.spaceWidth/2))/100 - 0.1;
					maxY = ((-spaceObj.centerY + (spaceObj.spaceHeight/2))/100 - 0.1);
					minY = ((-spaceObj.centerY - (spaceObj.spaceHeight/2))/100 + 0.1);
					//新的坐标轴不在房间范围内，则不能移动
					if(cameraNewPosition.x<minX || cameraNewPosition.x>maxX
					||cameraNewPosition.z<minY || cameraNewPosition.z>maxY){//不在房间范围
						let _x = ((spaceObj.spaceWidth/2) - 15)*defaultActor.presentX + spaceObj.centerX;
						let _z = ((spaceObj.spaceHeight/2) - 15)*defaultActor.presentY + (-spaceObj.centerY);
						cameraNewPosition.x = _x/100;
						cameraNewPosition.z = _z/100;
						console.warn("**roamPositionHandle-观察点不在空间范围-强制修正观察点位置****",JSON.stringify(cameraNewPosition))
					}
				}
				//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.5
				let targetNewPosition = {
					x:cameraNewPosition.x + Math.sin(_hd),
					y:1.5 + Math.tan(_hdY),
					z:(cameraNewPosition.z - Math.cos(_hd)),
				}
				let lookPosition = {
					x:cameraNewPosition.x + (Math.sin(_hd)*0.01),
					y:1.5 + Math.tan(_hdY),
					z:(cameraNewPosition.z - (Math.cos(_hd))*0.01),
				}
				return {cameraNewPosition,targetNewPosition,lookPosition}
			}
			//直接定位到摄像头位置
			function positionCamer(mesh=null,needAni=false){
				if(mesh){//如果传入了模型，则取模型
					chooseMesh = mesh;
				}
				if(!chooseMesh){
					console.error("[positionCamer],没有选中的空间数据")
					return false;
				}
				if(!chooseMesh.actors || chooseMesh.actors.length==0){
					chooseMesh.actors = [{
						actorLocation:chooseMesh.actorLocation,
						actorTransform:chooseMesh.actorTransform,
						isSelected:true,
						presentX:chooseMesh.presentX,
						presentY:chooseMesh.presentY,
					}]
				}
				boundary = new THREE.Box3(
					new THREE.Vector3(chooseMesh.centerX/100 - chooseMesh.spaceWidth/100/2 + 0.1, 0, -chooseMesh.centerY/100 - chooseMesh.spaceHeight/100/2 + 0.1), // 边界框的最小点
					new THREE.Vector3(chooseMesh.centerX/100 + chooseMesh.spaceWidth/100/2 - 0.1, 2.7, -chooseMesh.centerY/100 + chooseMesh.spaceHeight/100/2 - 0.1) // 边界框的最大点
				);
				initActor();//初始化空间的视角
				let data = roamPositionHandle();
				let cameraNewPosition = data.cameraNewPosition;
				let targetNewPosition = data.targetNewPosition;
				targetNewPosition.z = targetNewPosition.z;//增加偏差，防止极点翻转问题？不知道为啥会有用
				let lookPosition = data.lookPosition;
				creatMoveTip(cameraNewPosition);//创建移动的地标
				if(needAni){
					let oldUp = {x:0,y:1,z:0};	//俯视
					let newUp = {x:0,y:1,z:0};	//正视
					tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
				}else{
					camera.position.set(cameraNewPosition.x, cameraNewPosition.y, cameraNewPosition.z);
					controls.target.set(lookPosition.x,lookPosition.y,lookPosition.z);
					// controls.target.set(cameraNewPosition.x,cameraNewPosition.y,cameraNewPosition.z);
					// controls.target.copy(camera.position);
					camera.lookAt(targetNewPosition.x,targetNewPosition.y,targetNewPosition.z);
				}
			}
			//把摄像机移动的选中模型的正上方，观察点也变更为模型中心点，同时选中模型
			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 spaceObj = chooseMesh;//获取空间模型的相关数据
				// controls.panTo(spaceObj.centerX/100, camera.position.y, -spaceObj.centerY/100);
				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.5,//增加偏差，防止极点翻转问题？不知道为啥会有用
					}
					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为0
					targetNewPosition = {
						x:spaceObj.centerX/100,
						y:0, 
						z:-spaceObj.centerY/100,
					}
					oldUp = camera.up;//俯视状态
					newUp = camera.up;
				}
				console.warn("**moveMeshCenter***",isUserContorl,spaceObj,
				JSON.stringify(camera.position),JSON.stringify(controls.target)
				,cameraNewPosition,targetNewPosition,JSON.stringify(camera.up))
				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,1000);
				setTimeout(()=>{
					that.showLables = true;
					// camera.up = new THREE.Vector3(0,1,0);
					// updateLables();
				},1001);//动画结束后回复原始状态
			}
			// 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)){
					return false;
				}
				if (!chooseMesh) {
					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.set(object.x1, object.y1, 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);
				}).onComplete(()=>{
					controls.target.set(newT.x,newT.y,newT.z);
					//修正最后的视角
					let up = new THREE.Vector3(newUp.x,newUp.y,newUp.z);
					camera.up.copy(up);
					camera.lookAt(newT.x,newT.y,newT.z);
					tweenCameraAnma = false;
				})
				// 开始动画
				tween.start();
			}
			//高度持续变化处理 time 动画持续时间 单位秒
			function gradientResize (time,startHeight,endHeight) {
				let unit = screenWidth / 750;//单位rpx 对应 px 的值
				let _height = startHeight - endHeight;//高度变化-单位rpx
				let _jisua = that.canvasHeight;
				let lastHeight = _jisua + (_height * unit);//动画结束时的高度值； 单位 px
				that.canvasHeight = lastHeight;//触发css动画
				console.warn("***gradientResize***",lastHeight,_jisua,startHeight,endHeight);
				if(window.currentPage){
					window.currentPage.canvasHeight = endHeight;
				}
				// that.showLables = false;
				var tween = new TWEEN.Tween({
				    h1: _jisua,
				})
				.to({
				    h1: lastHeight,
				}, 1000)
				.easing(TWEEN.Easing.Linear.None)
				.onUpdate((object)=> {
					if(camera.isOrthographicCamera){//正交相机
						let aspect = screenWidth / object.h1;
						camera.left = frustumSize * aspect / - 2;
						camera.right  = frustumSize * aspect / 2;
						camera.top  = frustumSize / 2;
						camera.bottom  = frustumSize / -2;
						camera.updateProjectionMatrix();
						// that.canvasHeight = object.h1;
					}
					else if(camera.isPerspectiveCamera){//透视相机
						camera.aspect = screenWidth / object.h1;
						camera.updateProjectionMatrix();
						renderer.setSize( screenWidth, object.h1 );
						// that.canvasHeight = object.h1;
					}
				}).onComplete(()=>{
					camera.aspect = screenWidth / that.canvasHeight;
					camera.updateProjectionMatrix();
					renderer.setSize( screenWidth, that.canvasHeight );
					tweenCameraAnma = false;
				});
				// 开始动画
				tween.start();
				tweenCameraAnma = true;
			}
			//更新lables
			function updateLables(){
				if(!that.showLables){
					return false;
				}
				that.lableItem.forEach(lable =>{
					if(!that.gltfSpaces[lable.cubeIndex] || !that.gltfSpaces[lable.cubeIndex].instancedMeshIndexList){
						return false;
					}
					let item = that.gltfSpaces[lable.cubeIndex].instancedMeshIndexList[0];//获取地板模型的第一个geometry实例
					let _index = item.instancedMeshIndex;//第一个geometry实例 在 全局InstancedMesh实例的位置
					let instancedMesh = that.instancedSpaceMeshList[_index];//获取具体的网格实例
					let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
					instancedMesh.getMatrixAt(item.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
					let position = new THREE.Vector3();//当前几何体的位置参数
					position.setFromMatrixPosition(stratMatrix);//从四维向量中提取位置信息
					// console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
					position.project(camera);
					const x = (position.x *  .5 + .5) * screenWidth;
					const y = (position.y * -.5 + .5) * that.canvasHeight;
					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
				})
			}
			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){
					controls.update();
					updateLables();//更新lable
				}
				requestId = requestAnimationFrame(render, canvas3d);
				renderer.render(scene, camera);//单次渲染
				if (that.screenshotResolve) {
					stopRender();
					that.screenshotResolve()
					that.screenshotResolve = null;//释放Promise
				}
			}
		},
		// 页面被展示时执行
		onPageShow: function() {
			console.warn("***onPageShow-webglCom***")
		},
		//页面被隐藏时执行
		onPageHide: function() {
			// console.warn("***detached-hide***")
		},
		methods: {
			setHeight(){},
			positionCamer(){},
			//户型大类发生了变更-针对多层户型
			curHouseTypeChange(item){
				//获取当前户型大类下的所有户型信息-用于用户提交
				this.curLayoutStruct = item.layoutStruct;
				this.curLayoutStruct.forEach(it=>{
					this.layoutArea += it.houseArea
				})
				setStorage('curLayoutStruct', this.curLayoutStruct);//把楼层的数据存入缓存中
				console.warn("***curLayoutStruct***",this.curLayoutStruct)
			},
			clearWebGl(){
				let that = this;
				let deleList = that.scene && that.scene.children.filter(object=>{
					//&& (object.userType=="mesh" || object.userType=="layoutMesh")
					if(object instanceof THREE.Mesh || object instanceof THREE.InstancedMesh){
						return object
					}
				})
				// console.warn("***deleList***",deleList)
				if(deleList && deleList.length>0){
					that.showLables = false;//隐藏lable
					that.scene.remove(...deleList);
				}
				// this.scene.traverse(function(object) {
				// 	if (object instanceof THREE.Mesh) {
				// 		if(object.geometry && typeof(object.geometry.dispose)=='function'){
				// 			object.geometry.dispose();
				// 		}
				// 		if(object.material && typeof(object.material.dispose)=='function'){
				// 			object.material.dispose();
				// 		}
				// 		if(object.texture && typeof(object.texture.dispose)=='function'){
				// 			object.texture.dispose();
				// 		}
				// 		object.dispose();
				// 	}
				// 	if (object instanceof THREE.InstancedMesh) {
				// 		if(object.geometry && typeof(object.geometry.dispose)=='function'){
				// 			object.geometry.dispose();
				// 		}
				// 		if(object.material && typeof(object.material.dispose)=='function'){
				// 			object.material.dispose();
				// 		}
				// 		if(object.texture && typeof(object.texture.dispose)=='function'){
				// 			object.texture.dispose();
				// 		}
				// 		object.dispose();
				// 	}
				// });
				this.progress = 0;
				this.gltfWalls = [];
				this.gltfSpaces = [];
				this.gltfSpaceRoofs = [];
				this.gltfAutoWalls = [];
				this.instancedMeshList = [];
				this.instancedSpaceMeshList = [];
				this.instancedFurList = [];
				this.lableItem = [];
				this.gltfLayouts = [];
				this.wallList = [];
				this.changeArea = 0;
			},
			//户型楼层发生了变更-针对多层户型
			curHouseFloorChange(item){
				let that = this;
				this.curHouseFloor = item.houseFloor || 1;//当前选中的户型楼层
				this.curHouseObj = item;//更新当前具体的户型数据
				if(this.$route.name!="webgl_rxdz_look" && this.$route.name!="webgl_rxdz_test_look"){
					this.$store.dispatch('setCurHouseObj', this.curHouseObj);
				}
				// this.id = this.curHouseObj.id;
				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
				this.clearWebGl();
				this.houseInit();
			},
			//绘制并且渲染当前户型-初始化
			houseInit(){
				// this.reset();
				setTimeout(()=>{
					this.loadSpace();//加载户型的空间
				}, 100);
				console.warn("***curHouseObj***",this.curHouseObj,this.aiData)
				// this.navbar.title = this.curHouseObj.name + "  " + this.curHouseObj.houseArea + "㎡";
				if(window.currentPage && window.currentPage.navbar && window.currentPage.pvCurPageName=='home_show'){
					window.currentPage.navbar.title = "空间定制";
					document.title = '空间定制';
				}
				this.sumArea = this.curHouseObj.houseArea || '';
				this.fixedArea = this.curHouseObj.houseArea || '';
				if(this.curHouseObj.houseArea<=100){//面积小于100平米，则摄像头靠近一点
					this.cameraStarPosition.y = 20;
				}else if(this.curHouseObj.houseArea>100){
					this.cameraStarPosition.y = 30;
				}
				this.cameraInit();
			},
			moveMeshCenterIm(houseObj){
				const spaceDetail = houseObj;
				const spaceList = typeof(spaceDetail.houseJson)=="string" ? JSON.parse(spaceDetail.houseJson) : spaceDetail.houseJson;
				let element = this.spaceList[0];
				spaceList.forEach(it=>{
					if(it.isSelected){ // 默认选中空间
					    element = it;
					}
				})
				this.moveMeshCenter(element);
			},
			// 绘制地板
			async loadSpace(){
				this.spaceList = [];
				this.wallIds = [];
				this.layoutIds = [];
				this.gltfSpaces = [];
				this.progress = 0;
				if(!this.curHouseObj){//减少重复请求
					return false
				}
				let type=[];
			    if(this.curHouseObj){
			        const spaceDetail = this.curHouseObj;
			        const spaceList = typeof(spaceDetail.houseJson)=="string" ? JSON.parse(spaceDetail.houseJson) : spaceDetail.houseJson;
			        // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
			        for (let index = 0; index < spaceList.length; index++) {
			            var element = spaceList[index];
						element.wallMoveValue = "[0,0,0,0]"
			            this.spaceList.push(element);
			            this.wallIds.push(element.wallId);
						this.layoutIds.push(element.layoutId);
						type.push(element.spaceType);
			            if(element.isSelected){ // 默认选中空间
			                this.curSpaceObj = element;
			            }
			        }
			        if(!this.curSpaceObj && this.spaceList.length > 0){
			            this.curSpaceObj = this.spaceList[0];
			        }
			    }
			    console.log("该户型空间数据:", this.spaceList, this.layoutIds,type);
			    console.log("当前选中的空间:", this.curSpaceObj,this.curHouseObj);
				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
				let title =  this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
				if(window.currentPage && window.currentPage.navbar && window.currentPage.pvCurPageName=='room_show'){
					window.currentPage.navbar.title = title;
					document.title = title;
				}
				this.spaceListBackup = JSON.parse(JSON.stringify(this.spaceList));
				this.$store.state.curSpaceId = this.curSpaceObj.spaceId;
				this.currentChangeSpaceId = this.curSpaceObj.spaceId;
				this.loaderSpaceArr(this.spaceList);
			    // 绘制墙体
			    this.getHouseTypeSpaceWalls();
			},
			// 获取墙体数据
			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})
			            }
			        }
			    }
			    this.loadSpaceObjWalls(wallArr, wallList);
				this.getOverallArrangementDetailsList(2);
			},
			// 加载单个空间墙体资源
			async loadSpaceObjWalls(wallArr, wallList){
			    // 加载远程墙体模型资源
				let startTime = new Date().getTime();
			    // console.log("wallArr:", wallArr)
				let promise_list = [];
				let realWallArr = this.preWallData(wallArr);
				let arrLength = realWallArr.length;
				realWallArr && realWallArr.forEach((item,index) => {
					promise_list.push(
						new Promise((resolve, reject) => {
							this.loadWallModels(item, wallList, arrLength , resolve);
						})
					)
				});
				Promise.all(promise_list).then(()=>{
					let endTime = new Date().getTime();
					console.log("模型全部加载完成，时间：",endTime - startTime);
					this.progress = 100;
					// 设置空间数组的墙体信息
					// this.setSpaceListWallInfo();
					this.$nextTick(()=>{
						this.moveMeshCenter(this.curSpaceObj);
						// if(this.$route.name!="webgl_rxdz_look" && this.$route.name!="webgl_rxdz_test_look"){
							setTimeout(()=>{
								this.addWordLabel(); // 添加文字标签
							}, 610);
						// }
						// 设置空间数组的墙体信息 
					})
				})
			},
			//空间面积等变更后-同步更新其他数据对象
			updataPageData(){
				let sumArea = 0;
				this.spaceList.forEach(space=>{
					let curSpaceArea = parseFloat((
						(space.spaceWidth * space.spaceHeight) * space.spaceRatio / 10000
					).toFixed(2));
					sumArea +=curSpaceArea;
				})
				this.changeArea = parseFloat((sumArea - this.fixedArea).toFixed(2));
				this.sumArea = parseFloat(sumArea.toFixed(2));
				let str = JSON.stringify(this.spaceList)
				//更新当前空间对象
				this.curHouseObj.houseJson = str;
				this.$store.dispatch('setCurHouseObj', this.curHouseObj);//更新当前户型数据(单层)
				if(this.curLayoutStruct){				//更新提交的数据
					let layoutStruct = this.curLayoutStruct.find(it=>{
						return it.houseFloor == this.curHouseFloor
					})
					if(layoutStruct){
						layoutStruct.houseJson = str;
					}
					setStorage('curLayoutStruct', this.curLayoutStruct);//把楼层的数据存入缓存中
				}
				this.currentChangeSpaceId = null;//变化结束后
				console.warn("***curLayoutStruct-updataPageData***",this.changeArea,this.sumArea,this.curHouseFloor,this.curHouseObj)
			},
			// 添加文字标签
			addWordLabel(){
				if(!this.gltfSpaces || this.gltfSpaces.length <= 0){
					return false;
				}
				// 方案二
				this.lableItem = [];
				this.gltfSpaces.forEach((cube,index) =>{
					// 给地板加上空间类型标注, 空间为链接空间的不显示
					if(cube.spaceName && !cube.isSizeLock){
						let spaceIndex = this.spaceList.filter(it=>it.spaceName && !it.isSizeLock).findIndex(item=>item.spaceId==cube.spaceId);
						let name = spaceTypes[cube.spaceType - 1];
						if(cube.spaceType==15){			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
							let layoutId = this.spaceList.find(it => it.spaceId == cube.spaceId).layoutId;
							let layout = this.arrFrunList.find(it=>it.id == layoutId);
							if(layout){
								name = spaceTypes[layout.type - 1];
							}
						}
						this.lableItem.push(
							{
								text:name,
								spaceId:cube.spaceId,
								spaceType:cube.spaceType,
								transform:'',
								spaceIndex:spaceIndex,
								cubeIndex:index,
							}
						)
					}
				})
				this.showLables = true;
				// this.updateLables();//更新lable
			},
			//AI生成页面切换空间
			changeSpace(spaceId){
				console.warn("***changeSpace***",spaceId,this.curSpaceObj.spaceId)
				if(spaceId == this.curSpaceObj.spaceId){
					return false;
				}
				// this.curSpaceObj = this.spaceList.find(it=>it.spaceId == spaceId);
				// if(this.isIOS){
				// 	this.furnSingleSpaceHandle(this.curSpaceObj);
				// }
				this.curSpaceSelect(spaceId,false);
				this.positionCamer(this.curSpaceObj,true);
				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
				let title =  this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
				if(window.currentPage && window.currentPage.navbar && window.currentPage.pvCurPageName=='room_show'){
					window.currentPage.navbar.title = title;
					document.title = title;
				}
			},
			//用户手动点击空间名称
			selectSpaceHandle(gltf){
				if(gltf.spaceType==13){//楼梯不处理
					return false
				}
				this.curSpaceSelect(gltf.spaceId,false)
			},
			//选中当前空间
			curSpaceSelect(spaceId,moveCenter=true){
				console.warn("***curSpaceSelect***",spaceId,this.lableItem);
				if(!spaceId){
					return false
				}
				if(this.curSpaceObj){
					this.changeSpaceColor(this.curSpaceObj.spaceId,2);//取消上一个空间的颜色
				}
				let space = this.spaceList.find(it=>it.spaceId==spaceId);
				this.curSpaceObj = space;
				this.currentChangeSpaceId = spaceId;
				this.$store.state.curSpaceId = spaceId;
				if(window.currentPage.pvCurPageName == 'home_show'){
					this.changeSpaceColor(spaceId,1);//设置选中空间的颜色
				}
				if(moveCenter){
					this.moveMeshCenter(space);//移动到当前空间
				}
			},
			//当前空间面积发送了变化
			curSpaceChange(data){
				console.warn("***空间面积变化***",this.overChange,data);
				this.overChange = true;//变形开始 防止在形变结束前，再次形变
				this.$store.state.overChange = true;
				
				this.curSpaceSelect(data.spaceId);
				// this.currentChangeSpaceId = data.spaceId;
				// this.$store.state.curSpaceId = data.spaceId;
				// let space = this.spaceList.find(it=>it.spaceId==this.currentChangeSpaceId);
				// this.moveMeshCenter(space);
				
				this.changCurSpaceArea(data);//空间移动
				
			},
			//用户选择的布局id-需要切换到这个布局去
			userSelectPlot(layoutObj,space=null){
				if(!layoutObj){
					console.warn("***userSelectPlot***数据错误")
					return false
				}
				let spaceId = space ? space.spaceId : this.curSpaceObj.spaceId;
				console.warn("***userSelectPlot***",spaceId,layoutObj)
				this.changeSingleLayout(space,layoutObj);
				this.updataLable(spaceId,layoutObj);
			},
			
			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
			updataLable(spaceId,layoutObj){
				let list = this.arrFrunList;
				let lable = this.lableItem.find(it=>it.spaceId == spaceId);
				let name = spaceTypes[layoutObj.type - 1];
				lable.text = name;
				console.warn("***updataLable***",lable)
				// this.$refs.viewShell.$refs.viewCareful.updataData(spaceId,layoutObj);
			},
			//obj 物体对象，type 是否改变颜色
			moveMeshCenter(obj,type){
				console.warn("**moveMeshCenter***",obj)
				if(obj && this.gltfSpaces && this.gltfSpaces.length>0){
					this.moveMeshCenterHandle(obj,type);
				}
			},
			//截取webgl图
			async creatShotImg(){
				return new Promise(async (resolve) => {
					let shottingImg = await this.shottingAction() + "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//开始截图
					resolve(shottingImg)
				})
			},
			//进入具体空间时的处理
			spaceEnter(){
				this.showArea = false;
				this.showLables = false;
				if(this.curSpaceObj){
					this.changeSpaceColor(this.curSpaceObj.spaceId,2);//取消上一个空间的颜色
				}
				this.enterRoom();
				this.positionCamer(this.curSpaceObj);
				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
				let title =  this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
				if(window.currentPage && window.currentPage.navbar){
					window.currentPage.navbar.title = title;
					document.title = title;
				}
			},
			//离开具体空间时的处理
			spaceLeave(type=true){
				this.showArea = true;
				this.showLables = true;
				this.leaveRoom(type);
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "./webglCom.scss";
	/* @import "@/common/css/common.css"; */
</style>