zjs_project 1 tahun lalu
induk
melakukan
4fa660c01f

+ 10 - 9
src/pages/webgl_rxdz_720/webgl_rxdz_720.vue

@@ -109,8 +109,8 @@
 			var that = this;
 			console.warn("***webgl_rxdz_roam-options***", this.$route.query)
 			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-			this.videoUrl = this.$route.query.videoUrl || '';
-			// this.videoUrl = this.$route.query.videoUrl || 'https://dm.static.elab-plus.com/miniProgram/002.mp4';
+			// this.videoUrl = this.$route.query.videoUrl || '';
+			this.videoUrl = this.$route.query.videoUrl || 'https://dm.static.elab-plus.com/miniProgram/002.mp4';
 			this.bgUrl = this.$route.query.bgUrl ||
 				'https://dm.static.elab-plus.com/miniProgram/tears_of_steel_bridge_2k.jpg';
 			this.coordinate = this.$route.query.coordinate || '';
@@ -143,6 +143,7 @@
 			let cubeCamera = null;
 			// let lineMesh = null;
 			let radius = 50;	//全景图半径-全景图是个球体
+			let lastPosition = new THREE.Vector3(0, -20, -27.49);
 			init();
 			// this.clearEvent = clearEvent;
 			// this.attendEvent = attendEvent;
@@ -164,12 +165,12 @@
 				// const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3.5);
 				// scene.add(ambientLight);
 				// 辅助方格
-				// const axesHelper = new THREE.AxesHelper( 50 );
-				// scene.add( axesHelper );
-				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
-				// gridHelper.position.y = 0;
-				// gridHelper.position.x = 0;
-				// scene.add(gridHelper);
+				const axesHelper = new THREE.AxesHelper( 50 );
+				scene.add( axesHelper );
+				const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
+				gridHelper.position.y = 0;
+				gridHelper.position.x = 0;
+				scene.add(gridHelper);
 				//加载环境720贴图
 				// let loader = new THREE.TextureLoader();
 				// let texture = loader.load(that.bgUrl, () => {
@@ -598,7 +599,7 @@
 						let position = JSON.parse(item.coordinate);
 						mesh.position.set(position.x, position.y, position.z); //设置视频位置
 					} else {
-						mesh.position.set(0, -10, -10); //设置视频位置
+						mesh.position.copy(lastPosition);//设置视频位置
 					}
 					if (that.scale) {
 						let scale = JSON.parse(that.scale);

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

@@ -150,6 +150,7 @@
 				boundary = null;
 			let videoMesh = null;
 			let radius = 50;	//全景图半径-全景图是个球体
+			let lastPosition = new THREE.Vector3(0, -20, -27.49);
 			init();
 			this.starRender = starRender; //对外暴露启动渲染的方法
 			this.stopRender = stopRender; //对外暴露停止渲染的方法
@@ -489,7 +490,7 @@
 					let position = JSON.parse(that.coordinate);
 					mesh.position.set(position.x, position.y, position.z);//设置视频位置
 				}else{
-					mesh.position.set(0, 0, -10);//设置视频位置
+					mesh.position.copy(lastPosition);//设置视频位置
 				}
 				if (that.scale) {
 					let scale = JSON.parse(that.scale);

+ 30 - 26
src/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue

@@ -142,7 +142,7 @@
 			// let lineMesh = null;
 			let radius = 50;	//全景图半径-全景图是个球体
 			let fingerCount = 0;
-			let lastPosition = new THREE.Vector3(0, -10, -10);
+			let lastPosition = new THREE.Vector3(0, -20, -27.49);
 			let boundingBox = null;
 			init();
 			// this.clearEvent = clearEvent;
@@ -163,17 +163,6 @@
 				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
 				scene.add(camera);
 				that.camera = camera;
-
-				// 环境光会均匀的照亮场景中的所有物体
-				// const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3.5);
-				// scene.add(ambientLight);
-				// 辅助方格
-				// const axesHelper = new THREE.AxesHelper( 50 );
-				// scene.add( axesHelper );
-				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
-				// gridHelper.position.y = 0;
-				// gridHelper.position.x = 0;
-				// scene.add(gridHelper);
 				
 				//加载环境720贴图
 				// const loader = new THREE.TextureLoader();
@@ -481,27 +470,39 @@
 					});
 					// 设置拖拽控制器的监听器
 					dragControls.addEventListener('drag', function (event) {
+						// 获取mesh的位置
+						let position = event.object.position.clone();
+						// // 获取包围球的中心点和半径
+						let sphereCenter = new THREE.Vector3(0, 0, 0);//原点
+						let sphereRadius = radius - 16;
+						// 将mesh的位置限制在圆球范围内
+						position.sub(sphereCenter).normalize().multiplyScalar(sphereRadius).add(sphereCenter);
+						event.object.position.copy(position);
+						let distance = position.distanceTo(sphereCenter);
+						// console.warn("****position**",position,distance)
+						// 	let rad = radius - 16;
 						//   // 将拖拽的点转换为球面坐标
 						//   var vector = new THREE.Vector3(
-						//     (event.object.position.x / 10),
-						//     (event.object.position.y / 10),
-						//     (event.object.position.z / 10)
+						//     (event.object.position.x / rad),
+						//     (event.object.position.y / rad),
+						//     (event.object.position.z / rad)
 						//   ).normalize();
 						
 						//   // 更新物体的位置
 						//   event.object.position.copy(vector.multiplyScalar(10));
 						//限制在只能在水平面上移动
-						event.object.position.y = -10;
-						let position  = event.object.position;
-						// 获取包围球的中心点和半径
-						let sphereCenter = new THREE.Vector3(0, 0, 0);//原点
-						// 计算mesh和圆球中心点之间的距离
-						let distance = position.distanceTo(sphereCenter);
-						// 判断是否超过包围球的半径-1的距离,是的话则限制
-						if (distance > (radius-1)) {
-							const direction = new THREE.Vector3().subVectors(position, sphereCenter).normalize();
-							event.object.position.copy(sphereCenter).addScaledVector(direction, (radius-1));
-						}
+						// event.object.position.y = -10;
+						//限制不能超过球体
+						// let position  = event.object.position;
+						// // 获取包围球的中心点和半径
+						// let sphereCenter = new THREE.Vector3(0, 0, 0);//原点
+						// // 计算mesh和圆球中心点之间的距离
+						// let distance = position.distanceTo(sphereCenter);
+						// // 判断是否超过包围球的半径-1的距离,是的话则限制
+						// if (distance > (radius-1)) {
+						// 	const direction = new THREE.Vector3().subVectors(position, sphereCenter).normalize();
+						// 	event.object.position.copy(sphereCenter).addScaledVector(direction, (radius-1));
+						// }
 					});
 					dragControls.addEventListener('dragend', function ( event ) {
 						controls.enabled = true;
@@ -539,6 +540,9 @@
 					return false
 				}
 				let sca = (data - 50)/50 + 1;
+				if(sca >= 1){
+					sca = sca *2;
+				}
 				videoMesh.scale.x = sca
 				videoMesh.scale.y = sca
 			}