迁移

src/pages/webgl_rxdz/webgl_rxdz.vue

@@ -209,8 +209,8 @@
                 // scene.environment = new THREE.Color("#F2F2F2");
 
 				// 创建相机位置-投影相机
-				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / that.canvasHeight, 0.1, 10000 );
-				// let aspect = window.innerWidth /  that.canvasHeight;
+				camera = new THREE.PerspectiveCamera( 80, window.screen.width / that.canvasHeight, 0.1, 10000 );
+				// let aspect = window.screen.width /  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);
@@ -248,7 +248,7 @@
 				renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
 				
                 renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( window.innerWidth,  that.canvasHeight );
+                renderer.setSize( window.screen.width,  that.canvasHeight );
                 container.appendChild( renderer.domElement );
 				
 				controls = new OrbitControls(camera, renderer.domElement);
@@ -281,9 +281,9 @@
             	controls.reset();
             }
 			function onWindowResize() {
-			    camera.aspect = window.innerWidth / that.canvasHeight;
+			    camera.aspect = window.screen.width / that.canvasHeight;
 			    camera.updateProjectionMatrix();
-			    renderer.setSize( window.innerWidth, that.canvasHeight );
+			    renderer.setSize( window.screen.width, that.canvasHeight );
 				console.warn("****onWindowResize**")
 			}
 			function attendEvent () {
@@ -301,9 +301,9 @@
 			//取消事件监听-避免二次进入时触发多次事件
 			function clearEvent(){
 				console.warn("**clearEvent****")
-				renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
-				renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
-				renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
 			}
 			// 手指移动开始
 			function onPointerStart(event){
@@ -463,7 +463,7 @@
 				.easing(TWEEN.Easing.Linear.None)
 				.onUpdate((object)=> {
 					if(camera.isOrthographicCamera){//正交相机
-						let aspect = window.innerWidth / object.h1;
+						let aspect = window.screen.width / object.h1;
 						camera.left = frustumSize * aspect / - 2;
 						camera.right  = frustumSize * aspect / 2;
 						camera.top  = frustumSize / 2;
@@ -472,15 +472,15 @@
 						// that.canvasHeight = object.h1;
 					}
 					else if(camera.isPerspectiveCamera){//透视相机
-						camera.aspect = window.innerWidth / object.h1;
+						camera.aspect = window.screen.width / object.h1;
 						camera.updateProjectionMatrix();
-						renderer.setSize( window.innerWidth, object.h1 );
+						renderer.setSize( window.screen.width, object.h1 );
 						// that.canvasHeight = object.h1;
 					}
 				}).onComplete(()=>{
-					camera.aspect = window.innerWidth / that.canvasHeight;
+					camera.aspect = window.screen.width / that.canvasHeight;
 					camera.updateProjectionMatrix();
-					renderer.setSize( window.innerWidth, that.canvasHeight );
+					renderer.setSize( window.screen.width, that.canvasHeight );
 					tweenCameraAnma = false;
 					that.showLables = true;
 					updateLables();//更新lable
@@ -507,7 +507,7 @@
 					position.setFromMatrixPosition(stratMatrix);//从四维向量中提取位置信息
 					// console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
 					position.project(camera);
-					const x = (position.x *  .5 + .5) * window.innerWidth;
+					const x = (position.x *  .5 + .5) * window.screen.width;
 					const y = (position.y * -.5 + .5) * that.canvasHeight;
 					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
 				})
@@ -1593,14 +1593,6 @@
 			onMouseMove(e){
 				return false;
 			},
-            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)
-				
-            },
 			goRoam1(spaceId){
 				let gltf = this.lableItem.find(it=>it.spaceId==spaceId);
 				if(gltf){

src/pages/webgl_rxdz_customize/webgl_rxdz_customize.html

@@ -1,6 +1,6 @@
 <div class="bookingSheet">
     <!-- <shareOption @afterUserHandle="afterShareOptionHandle" @optionChange="optionChange" :showShareOptions="showShareOptions"></shareOption> -->
-    <!-- <mynavbar @navbarBackCallback="navbarBackClk" :barData='navbar'/> -->
+    <mynavbar :barData='navbar'/>
 	<!-- <authview id="authView" :showPhoneModel="showPhoneModel"></authview> -->
     <div class="contentBox">
         <!-- 图片区域 -->

src/pages/webgl_rxdz_look/webgl_rxdz_look.scss

@@ -1,4 +1,13 @@
-
+.main-view{
+	overflow: hidden;
+	width: 100vw;
+	height:100vh;
+}
+#mapDiv{
+	overflow: hidden;
+	width: 100vw;
+	height:100vh;
+}
 canvas {
     -webkit-user-select: none;
     user-select: none;
@@ -7,11 +16,6 @@ canvas {
     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;

src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -149,7 +149,7 @@
                 scene.environment = new THREE.Color("#F2F2F2");
 
 				// 创建相机位置
-				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 10000 );
+				camera = new THREE.PerspectiveCamera( 80, window.screen.width / window.screen.height, 0.1, 10000 );
 				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
 				scene.add(camera);
                 that.camera = camera;
@@ -175,7 +175,7 @@
                 renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
 
                 renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( window.innerWidth, window.innerHeight );
+                renderer.setSize( window.screen.width, window.screen.height );
                 container.appendChild( renderer.domElement );
 				
 
@@ -219,9 +219,9 @@
 			//取消事件监听-避免二次进入时触发多次事件
 			function clearEvent(){
 				console.warn("**clearEvent****")
-				renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
-				renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
-				renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
 			}
 			// 手指移动开始
 			function onPointerStart(event){
@@ -360,9 +360,9 @@
 				tween.start();
 			}
 			function onWindowResize() {
-                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.aspect = window.screen.width / window.screen.height;
                 camera.updateProjectionMatrix();
-                renderer.setSize( window.innerWidth, window.innerHeight );
+                renderer.setSize( window.screen.width, window.screen.height );
             }
 			//计算漫游时当前选中空间的观察点和摄像机的放置点位
 			//distance 表示要沿着视角移动的距离
@@ -380,8 +380,8 @@
 					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) * window.innerHeight;
+					const x = (position.x *  .5 + .5) * window.screen.width;
+					const y = (position.y * -.5 + .5) * window.screen.height;
 					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
 				})
 			}

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -162,7 +162,7 @@
 				// })
 
 				// 创建相机位置
-				camera = new THREE.PerspectiveCamera(95, window.innerWidth / that.canvasHeight, 0.1, 10000 );
+				camera = new THREE.PerspectiveCamera(95, window.screen.width / 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);
@@ -195,8 +195,8 @@
 				//antialias 这个值得设置为false，不然IOS上截图会失效
                 renderer = that.renderer = new THREE.WebGLRenderer( { 
 					canvas:canvas3d, 
-					alpha: false,
-					antialias:false,
+					alpha: true,
+					antialias:true,
 					preserveDrawingBuffer: true,
 				});
 				renderer.shadowMap.enabled = true;//产生阴影
@@ -207,8 +207,8 @@
 				renderer.toneMapping = THREE.NoToneMapping;//色调映射
 				renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
 
-                renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( window.innerWidth, that.canvasHeight );
+                renderer.setPixelRatio(window.devicePixelRatio);
+                renderer.setSize(window.screen.width, that.canvasHeight);
                 container.appendChild( renderer.domElement );
 				
 				controls = new OrbitControls( camera, renderer.domElement );
@@ -250,16 +250,16 @@
 				tweenCameraAnma = value
 			}
 			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 clearEvent(){
 				console.warn("**clearEvent****")
-				document.removeEventListener('touchstart', onPointerStart);
-				document.removeEventListener('touchmove', onPointerMove );
-				document.removeEventListener('touchend', onPointerUp );
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
 			}
 			// 手指移动开始
 			function onPointerStart(event){
@@ -268,8 +268,8 @@
 				console.log('开始触摸事件：',lon,fingerCount,camera.position.y)
 				if (fingerCount === 1) {
 					// 只有一个手指时记录当前点的坐标作为平移起始点
-					onPointerDownMouseX = event.clientX;
-					onPointerDownMouseY = event.clientY;
+					onPointerDownMouseX = event.changedTouches[0].clientX;
+					onPointerDownMouseY = event.changedTouches[0].clientY;
 				}
 			}
 			//持续触摸中
@@ -282,8 +282,8 @@
 				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 
+					if (Math.abs(event.changedTouches[0].clientX - onPointerDownMouseX) < 10 
+					&& Math.abs(event.changedTouches[0].clientY - onPointerDownMouseY) < 10 
 					&& (now - startTime) < 300 ){
 						checkIntersection(event);
 					}
@@ -291,8 +291,8 @@
 			}
 			//射线检测handle
 			function checkIntersection(event) {
-			    let x = (event.clientX / window.innerWidth) * (2/window.devicePixelRatio) - 1;
-			    let y = -(event.clientY / that.canvasHeight) * (2/window.devicePixelRatio) + 1;
+			    let x = (event.changedTouches[0].clientX / window.screen.width) * 2 - 1;
+			    let y = -(event.changedTouches[0].clientY / that.canvasHeight) * 2 + 1;
 			    mouse.x = x;
 			    mouse.y = y;
 			    //更新射线