兼容抖音H5

src/components/newBottomCom/viewMask/viewMask.vue

@@ -106,6 +106,8 @@
 				],
 				myloading:false,
 				loadingMsg:'',
+				screenWidth:0,
+				screenHeight:0,
 			}
 		},
 		props:{
@@ -132,6 +134,14 @@
 			// if(this.seedItem){
 			// 	this.title = this.seedItem.seedText;
 			// }
+			this.screenWidth = window.screen.width;
+			this.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)
+			}
 		},
 		// 页面被展示时执行
 		onPageShow: function() {  
@@ -351,11 +361,11 @@
 				}
 				if(!this.styleList || this.styleList.length==0){
 					this.disableAble = true;//不能点击-没有风格
-					let unit = window.screen.width / 750;//单位rpm 对应 px 的值
-					this.$parent.canvasHeight = window.screen.height - (208 * unit);
-					this.$parent.camera.aspect = window.screen.width / this.$parent.canvasHeight;
+					let unit = this.screenWidth / 750;//单位rpm 对应 px 的值
+					this.$parent.canvasHeight = this.screenHeight - (208 * unit);
+					this.$parent.camera.aspect = this.screenWidth / this.$parent.canvasHeight;
 					this.$parent.camera.updateProjectionMatrix();
-					this.$parent.renderer.setSize(window.screen.width, this.$parent.canvasHeight);
+					this.$parent.renderer.setSize(this.screenWidth, this.$parent.canvasHeight);
 				}else{
 					this.disableAble = false;//可以点击
 				}
@@ -565,13 +575,11 @@
 					this.aiImage = "";
 					return false;
 				}
-				
 				const prompt = this.styleList[this.curStyleIndex].prompt;
 				const noPromot = this.styleList[this.curStyleIndex].negativePrompt;
-				let unit = 768 / window.screen.width;
-				this.imageWidth = parseInt((window.screen.width * unit).toFixed());
+				let unit = 768 / this.screenWidth;
+				this.imageWidth = parseInt((this.screenWidth * unit).toFixed());
 				this.imageHeight = parseInt((this.$parent.canvasHeight * unit).toFixed());
-				// this.$parent.canvasHeight = window.screen.height - (208 * unit);
 				var parmas = {
 					negativePrompt: noPromot,
 					prompt: prompt,

src/pages/webgl_rxdz/webgl_rxdz.vue

@@ -156,8 +156,16 @@
 			var that = this;
 			this.houseId = this.$store.state.houseId || '';
 			this.childLayout = this.$route.query.childLayout || 0;//4-测试户型
-			let unit = window.screen.width / 750;//单位rpm 对应 px 的值
-			that.canvasHeight = window.screen.height - (200 * unit) + (20 * unit);
+			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 的值
+			that.canvasHeight = screenHeight - (200 * unit) + (20 * unit);
 			
 			const container = this.$refs.webgl;
             const canvas3d = this.canvas = this.$refs.glcanvas;
@@ -196,8 +204,8 @@
                 // scene.environment = new THREE.Color("#F2F2F2");
 
 				// 创建相机位置-投影相机
-				camera = new THREE.PerspectiveCamera( 80, window.screen.width / that.canvasHeight, 0.1, 10000 );
-				// let aspect = window.screen.width /  that.canvasHeight;
+				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);
@@ -257,7 +265,7 @@
 				renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
 				
                 renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( window.screen.width,  that.canvasHeight );
+                renderer.setSize( screenWidth,  that.canvasHeight );
                 container.appendChild( renderer.domElement );
 				
 				controls = new OrbitControls(camera, renderer.domElement);
@@ -296,9 +304,9 @@
             	controls.reset();
             }
 			function onWindowResize() {
-			    camera.aspect = window.screen.width / that.canvasHeight;
+			    camera.aspect = screenWidth / that.canvasHeight;
 			    camera.updateProjectionMatrix();
-			    renderer.setSize( window.screen.width, that.canvasHeight );
+			    renderer.setSize( screenWidth, that.canvasHeight );
 				console.warn("****onWindowResize**")
 			}
 			function attendEvent () {
@@ -461,10 +469,10 @@
 			//高度持续变化处理 time 动画持续时间 单位秒
 			function gradientResize (time,startHeight,endHeight) {
 				let _timeStep = 20;//单位 毫秒
-				// let unit = window.screen.width / 750;//单位rpm 对应 px 的值
-				// that.canvasHeight = window.screen.height - (200 * unit) + (20 * unit);
+				// let unit = screenWidth / 750;//单位rpm 对应 px 的值
+				// that.canvasHeight = screenHeight - (200 * unit) + (20 * unit);
 				
-				let unit = window.screen.width / 750;//单位rpx 对应 px 的值
+				let unit = screenWidth / 750;//单位rpx 对应 px 的值
 				let _height = startHeight - endHeight;//高度变化-单位rpx
 				let _jisua = that.canvasHeight;
 				let lastHeight = _jisua + (_height * unit);//动画结束时的高度值； 单位 px
@@ -483,7 +491,7 @@
 				.easing(TWEEN.Easing.Linear.None)
 				.onUpdate((object)=> {
 					if(camera.isOrthographicCamera){//正交相机
-						let aspect = window.screen.width / object.h1;
+						let aspect = screenWidth / object.h1;
 						camera.left = frustumSize * aspect / - 2;
 						camera.right  = frustumSize * aspect / 2;
 						camera.top  = frustumSize / 2;
@@ -492,15 +500,15 @@
 						// that.canvasHeight = object.h1;
 					}
 					else if(camera.isPerspectiveCamera){//透视相机
-						camera.aspect = window.screen.width / object.h1;
+						camera.aspect = screenWidth / object.h1;
 						camera.updateProjectionMatrix();
-						renderer.setSize( window.screen.width, object.h1 );
+						renderer.setSize( screenWidth, object.h1 );
 						// that.canvasHeight = object.h1;
 					}
 				}).onComplete(()=>{
-					camera.aspect = window.screen.width / that.canvasHeight;
+					camera.aspect = screenWidth / that.canvasHeight;
 					camera.updateProjectionMatrix();
-					renderer.setSize( window.screen.width, that.canvasHeight );
+					renderer.setSize( screenWidth, that.canvasHeight );
 					tweenCameraAnma = false;
 					// that.showLables = true;
 					// updateLables();//更新lable
@@ -527,7 +535,7 @@
 					position.setFromMatrixPosition(stratMatrix);//从四维向量中提取位置信息
 					// console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
 					position.project(camera);
-					const x = (position.x *  .5 + .5) * window.screen.width;
+					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)`;
 				})

src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -127,6 +127,14 @@
 			}else{
 				this.$store.state.loadingMsg = "没有数据~";
 			}
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if(window.innerWidth && window.screen.width){
+				screenWidth = Math.min(window.innerWidth,window.screen.width)
+			}
+			if(window.innerHeight && window.screen.height){
+				screenHeight = Math.min(window.innerHeight,window.screen.height)
+			}
             let container = this.$refs.webgl;
             let canvas3d = this.canvas = this.$refs.glcanvas;
 
@@ -158,7 +166,7 @@
                 scene.background = new THREE.Color("#FFFFFF");
 
 				// 创建相机位置
-				camera = new THREE.PerspectiveCamera( 80, window.screen.width / window.screen.height, 0.1, 10000 );
+				camera = new THREE.PerspectiveCamera( 80, screenWidth / screenHeight, 0.1, 10000 );
 				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
 				scene.add(camera);
                 that.camera = camera;
@@ -201,7 +209,7 @@
                 renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
 
                 renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( window.screen.width, window.screen.height );
+                renderer.setSize( screenWidth, screenHeight );
                 container.appendChild( renderer.domElement );
 				
 
@@ -386,9 +394,9 @@
 				tween.start();
 			}
 			function onWindowResize() {
-                camera.aspect = window.screen.width / window.screen.height;
+                camera.aspect = screenWidth / screenHeight;
                 camera.updateProjectionMatrix();
-                renderer.setSize( window.screen.width, window.screen.height );
+                renderer.setSize( screenWidth, screenHeight );
             }
 			//计算漫游时当前选中空间的观察点和摄像机的放置点位
 			//distance 表示要沿着视角移动的距离
@@ -406,8 +414,8 @@
 					position.setFromMatrixPosition(stratMatrix);//从四维向量中提取位置信息
 					// console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
 					position.project(camera);
-					const x = (position.x *  .5 + .5) * window.screen.width;
-					const y = (position.y * -.5 + .5) * window.screen.height;
+					const x = (position.x *  .5 + .5) * screenWidth;
+					const y = (position.y * -.5 + .5) * screenHeight;
 					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
 				})
 			}

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -121,8 +121,16 @@
 			console.warn("***webgl_rxdz_roam-options***",this.$route.query)
 			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 			// alert("***mounted-webgl_rxdz_roam***"+this.curHouseObj)
-			let unit = window.screen.width / 750;//单位rpm 对应 px 的值
-			this.canvasHeight = window.screen.height - (600 * unit) + (40 * unit);
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if(window.innerWidth && window.screen.width){
+				screenWidth = Math.min(window.innerWidth,window.screen.width)
+			}
+			if(window.innerHeight && window.screen.height){
+				screenHeight = Math.min(window.innerHeight,window.screen.height)
+			}
+			let unit = screenWidth / 750;//单位rpm 对应 px 的值
+			this.canvasHeight = screenHeight - (600 * unit) + (40 * unit);
 			this.houseId = this.$route.query.houseId?this.$route.query.houseId:'';
 			this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
 			let container = this.$refs.webgl;
@@ -174,7 +182,7 @@
 				// })
 
 				// 创建相机位置
-				camera = new THREE.PerspectiveCamera(90, window.screen.width / that.canvasHeight, 0.1, 10000 );
+				camera = new THREE.PerspectiveCamera(90, screenWidth / that.canvasHeight, 0.1, 10000 );
 				// camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向 {x:0,y:1,z:0}
 				// camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
 				scene.add(camera);
@@ -218,7 +226,7 @@
 				renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
 
                 renderer.setPixelRatio(window.devicePixelRatio);
-                renderer.setSize(window.screen.width, that.canvasHeight);
+                renderer.setSize(screenWidth, that.canvasHeight);
                 container.appendChild( renderer.domElement );
 				
 				controls = new OrbitControls( camera, renderer.domElement );
@@ -301,7 +309,7 @@
 			}
 			//射线检测handle
 			function checkIntersection(event) {
-			    let x = (event.changedTouches[0].clientX / window.screen.width) * 2 - 1;
+			    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;

src/static/globlShowModel.js

@@ -54,6 +54,7 @@ var globlShowModel = [
 	'BP_T_1PeopleBasin01',
 	'BP_T_matong',
 	'BP_T_OpenShower02',
+	'BP_T_OpenShower03',
 	'BP_K_icebox_2door002',
 	'BP_K_flue002',
 	'BP_K_shuipen01',

src/static/layoutModelData.js

@@ -73,6 +73,7 @@ var layoutModel = [
 	
 	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_T_OpenShower01.gltf', name: '开敞侧淋浴间',modelName: 'BP_T_OpenShower01', type:1},
 	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_T_OpenShower02.glb', name: '开敞侧淋浴间02',modelName: 'BP_T_OpenShower02', type:1},
+	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_T_OpenShower03.glb', name: '开敞侧淋浴间03',modelName: 'BP_T_OpenShower03', type:1},
 	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_T_matong.gltf', name: '马桶',modelName: 'BP_T_matong', type:1},
 	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_T_1PeopleBasin01.glb', name: '1人台盆01',modelName: 'BP_T_1PeopleBasin01', type:1},
 	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_T_1PeopleBasin03.glb', name: '1人台盆03',modelName: 'BP_T_1PeopleBasin03', type:1},

src/utils/rem.js

@@ -4,6 +4,9 @@
 		var designWidth = 750;
 		// var width = window.innerWidth;
 		var width = window.screen.width;
+		if(window.innerWidth && window.screen.width){
+			width = Math.min(window.innerWidth,window.screen.width)
+		}
 		var currentFontSize = (width/designWidth)*baseFontSize;
 		document.querySelector('html').style.fontSize = currentFontSize+'px';
 	}