Просмотр исходного кода

附加720转球体网格模型功能

zjs_project 1 год назад
Родитель
Сommit
9111814f38

+ 1 - 1
src/pages/webgl_rxdz_720/webgl_rxdz_720.vue

@@ -192,7 +192,7 @@
 				// controls.minPolarAngle = 0; // 默认0
 				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI,即可以向下旋转到的视角。
 				controls.enableZoom = true; //启用/禁用摄像机的缩放
-				controls.enablePan = true; //启用/禁用摄像机平移
+				controls.enablePan = false; //启用/禁用摄像机平移
 				controls.enableRotate = true; //启用/禁用摄像机水平或垂直旋转
 
 				// 监听相机移动事件-限制只能在当前空间范围内移动

+ 1 - 1
src/pages/webgl_rxdz_clipImg/webgl_rxdz_clipImg.vue

@@ -196,7 +196,7 @@
 				// controls.minPolarAngle = 0; // 默认0
 				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI,即可以向下旋转到的视角。
 				controls.enableZoom = true; //启用摄像机的缩放
-				controls.enablePan = true; //禁用摄像机平移
+				controls.enablePan = false; //禁用摄像机平移
 				controls.enableRotate = true; //启用摄像机水平或垂直旋转
 
 				// 监听相机移动事件-限制只能在当前空间范围内移动

+ 79 - 21
src/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue

@@ -64,6 +64,7 @@
 				repeatFlag: false, //重复点击
 				isIOS: false,
 				muted: true,
+				hasOneTouch: false,
 			}
 		},
 		beforeDestroy() {
@@ -137,6 +138,7 @@
 			let videoMesh = null;
 			// let lineMesh = null;
 			let radius = 50;	//全景图半径-全景图是个球体
+			let fingerCount = 0;
 			init();
 			// this.clearEvent = clearEvent;
 			// this.attendEvent = attendEvent;
@@ -190,29 +192,67 @@
 				// controls.minPolarAngle = 0; // 默认0
 				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI,即可以向下旋转到的视角。
 				controls.enableZoom = true; //启用/禁用摄像机的缩放
-				controls.enablePan = true; //启用/禁用摄像机平移
+				controls.enablePan = false; //启用/禁用摄像机平移
 				controls.enableRotate = true; //启用/禁用摄像机水平或垂直旋转
-
+				
+				// 创建一个球体几何体
+				var sphereGeometry = new THREE.SphereGeometry(radius, 60, 40);
+				var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+				var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
+				// 计算球体的包围盒
+				var boundingBox = new THREE.Box3().setFromObject(sphere);
 				// 监听相机移动事件-限制只能在当前空间范围内移动
-				// 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.addEventListener('change', () => {
+					// 检查相机位置是否超出边界框
+					if (boundingBox && !boundingBox.containsPoint(camera.position)) {
+						let clampedPosition = new THREE.Vector3();
+						boundingBox.clampPoint(camera.position, clampedPosition);
+						if (clampedPosition) {
+							camera.position.copy(clampedPosition);
+						}
+					}
+				});
 				// camera.lookAt(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
 				starRender(); //启动渲染
-				if(that.isIOS){
-					document.addEventListener("WeixinJSBridgeReady", function (){
-					    videoHandle();
-					}, false)
-				}else{
-					videoHandle();
-				}
+				// if(that.isIOS){
+				// 	document.addEventListener("WeixinJSBridgeReady", function (){
+				// 	    videoHandle();
+				// 	}, false)
+				// }else{
+				// 	videoHandle();
+				// }
+				renderer.domElement.addEventListener('touchstart', function (event) {
+					fingerCount = event.touches.length;//手指个数
+					if(fingerCount == 2){
+						if(dragControls){
+							dragControls.enabled = false;
+						}
+					}else{
+						if(dragControls){
+							dragControls.enabled = true;
+						}
+					}
+				});
+				
+				renderer.domElement.addEventListener('touchmove', function (event) {
+					fingerCount = event.touches.length;//手指个数
+					if(fingerCount == 2){
+						if(dragControls){
+							dragControls.enabled = false;
+						}
+					}else{
+						if(dragControls){
+							dragControls.enabled = true;
+						}
+					}
+				});
+				
+				renderer.domElement.addEventListener('touchend', function (event) {
+					fingerCount = 0;//手指个数
+					if(dragControls){
+						dragControls.enabled = true;
+					}
+				});
 			}
 			//把720VR图转化为一个球体模网格型
 			function makeShaderCube() {
@@ -500,12 +540,30 @@
 				this.muted = !this.muted;
 			},
 			aiPeopleChange(item){
+				let self = this;
 				console.warn("***aiPeopleChange***",item);
 				if(!item || !item.url){
 					return false;
 				}
-				this.videoUrl = item.url;
-				this.videoHandle();
+				self.videoUrl = item.url;
+				if(self.hasOneTouch==false){
+					if(self.isIOS){
+						document.addEventListener("WeixinJSBridgeReady", function (){
+						    self.videoHandle();
+							self.hasOneTouch = true;
+						}, false)
+					}else{
+						document.addEventListener("touchend", ()=> {
+							if(self.hasOneTouch==false){
+								self.hasOneTouch = true;
+								self.videoHandle();
+							}
+						}, false);
+					}
+					
+				}else{
+					self.videoHandle();
+				}
 			}
 		}
 	}