zjs_project 1 年之前
父节点
当前提交
849f7dd6da

+ 51 - 16
src/pages/webgl_rxdz_720/webgl_rxdz_720.vue

@@ -60,6 +60,7 @@
 				videoUrl:'',	//绿幕视频地址
 				bgUrl:'',
 				coordinate:'',
+				hasOneTouch:false,
 			}
 		},
 		beforeDestroy() {
@@ -104,6 +105,7 @@
 			this.videoUrl = this.$route.query.videoUrl || '';
 			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 || '';
+			this.type = this.$route.query.type || '';
 			let screenWidth = window.screen.width;
 			let screenHeight = window.screen.height;
 			if (window.innerWidth && window.screen.width) {
@@ -127,7 +129,7 @@
 			let controls = null,
 				boundary = null;
 			let stats;
-			let videoMesh = null;
+			let videoMeshGroup = [];
 			init();
 			// this.clearEvent = clearEvent;
 			// this.attendEvent = attendEvent;
@@ -197,30 +199,62 @@
 				starRender(); //启动渲染
 				if(that.isIOS){
 					document.addEventListener("WeixinJSBridgeReady", function (){
-						videoHandle();
+						if(that.type){
+							moreTest()
+						}else{
+							videoHandle({videoUrl:that.videoUrl,coordinate:that.coordinate});
+						}
 					}, false)
 				}
 				var guideMask = document.querySelector('#guide-mask');
 				document.addEventListener("touchstart", function () {
 					guideMask.classList.add('guide-mask-hide');
-					if(!that.isIOS){
+					if(!that.isIOS && that.hasOneTouch==false){
+						that.hasOneTouch = true;
 						setTimeout(()=>{
-							videoHandle();
+							if(that.type){
+								moreTest()
+							}else{
+								videoHandle({videoUrl:that.videoUrl,coordinate:that.coordinate});
+							}
 						},500)
 					}
 				}, false);
 			}
-
-			function videoHandle() {
-				if(!that.videoUrl){
+			function moreTest(){
+				let data = [
+					{
+						videoUrl:'https://dm.static.elab-plus.com/miniProgram/002.mp4',
+						coordinate:'{"x":6,"y":-5,"z":0}',
+					},
+					{
+						videoUrl:'https://dm.static.elab-plus.com/miniProgram/004.mp4',
+						coordinate:'{"x":-13,"y":16,"z":8}',
+					},
+					{
+						videoUrl:'https://dm.static.elab-plus.com/miniProgram/005.mp4',
+						coordinate:'{"x":13,"y":-14,"z":-35}',
+					},
+					{
+						videoUrl:'https://dm.static.elab-plus.com/miniProgram/007.mp4',
+						coordinate:'{"x":0,"y":4,"z":25}',
+					},
+					{
+						videoUrl:'https://dm.static.elab-plus.com/miniProgram/008.mov',
+						coordinate:'{"x":3,"y":-4,"z":-5}',
+					}
+				]
+				data.forEach(it=>{
+					videoHandle(it);
+				})
+			}
+			function videoHandle(item) {
+				if(!item.videoUrl){
 					return false;
 				}
-				if(videoMesh){
-					return false
-				}
 				// 创建视频元素
 				var video = document.createElement('video');
-				video.src = that.videoUrl; // 视频文件的路径
+				video.src = item.videoUrl; // 视频文件的路径
 				video.setAttribute("crossOrigin", "Anonymous");
 				video.loop = true;
 				video.muted = true;
@@ -404,15 +438,16 @@
 				let geometry = new THREE.PlaneGeometry(9, 16);
 				// 应用绿幕材质到对象上
 				let mesh = new THREE.Mesh(geometry, greenScreenMaterial);
-				if(that.coordinate){
-					let position = JSON.parse(that.coordinate);
+				if(item.coordinate){
+					let position = JSON.parse(item.coordinate);
 					mesh.position.set(position.x, position.y, position.z);//设置视频位置
 				}else{
 					mesh.position.set(0, 0, -10);//设置视频位置
 				}
 				// mesh.lookAt(camera.position);
 				scene.add(mesh);
-				videoMesh = mesh;
+				videoMeshGroup.push(mesh);
+				// videoMesh = mesh;
 			}
 
 			function stopRender() {
@@ -433,8 +468,8 @@
 				}
 				// stats.update();
 				controls.update();
-				if(videoMesh){
-					videoMesh.lookAt(camera.position);
+				if(videoMeshGroup){
+					videoMeshGroup.forEach(it=>{it.lookAt(camera.position)})
 				}
 				renderer.render(scene, camera); //单次渲染
 				requestId = requestAnimationFrame(render, canvas3d);

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

@@ -26,5 +26,5 @@
 	  :spaceObj="curSpaceObj" ></viewMask> -->
 	<!-- 生成截屏的画布对象 -->
 	<canvas id="canvas" type="2d" :style="{'height':'200px','top':'200px'}"></canvas>
-	<video id="myvideo" v-if="videoUrl" style="display: none;" loop muted autoplay controls="false" :src="videoUrl"></video>
+	<!-- <video id="myvideo" v-if="videoUrl" style="display: none;" loop muted autoplay controls="false" :src="videoUrl"></video> -->
 </div>

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

@@ -234,8 +234,8 @@
 					return false
 				}
 				// 创建视频元素
-				// var video = document.createElement('video');
-				var video = document.getElementById('myvideo');
+				var video = document.createElement('video');
+				// var video = document.getElementById('myvideo');
 				video.src = that.videoUrl; // 视频文件的路径
 				video.setAttribute("crossOrigin", "Anonymous");
 				video.loop = true;