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

src/pages/webgl_rxdz_720/webgl_rxdz_720.vue

@@ -168,13 +168,13 @@
 				// gridHelper.position.x = 0;
 				// scene.add(gridHelper);
 				//加载环境720贴图
-				let loader = new THREE.TextureLoader();
-				let texture = loader.load(that.bgUrl, () => {
-					let rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
-					rt.fromEquirectangularTexture(renderer, texture);
-					scene.background = rt.texture;
-				});
-				// makeShaderCube();
+				// let loader = new THREE.TextureLoader();
+				// let texture = loader.load(that.bgUrl, () => {
+				// 	let rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
+				// 	rt.fromEquirectangularTexture(renderer, texture);
+				// 	scene.background = rt.texture;
+				// });
+				makeShaderCube();
 				// makeInstance();
 				//antialias 这个值得设置为false，不然IOS上截图会失效
 				renderer = that.renderer = new THREE.WebGLRenderer({
@@ -191,8 +191,8 @@
 				controls.maxDistance = radius;
 				// controls.minPolarAngle = 0; // 默认0
 				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
-				controls.enableZoom = false; //启用/禁用摄像机的缩放
-				controls.enablePan = false; //启用/禁用摄像机平移
+				controls.enableZoom = true; //启用/禁用摄像机的缩放
+				controls.enablePan = true; //启用/禁用摄像机平移
 				controls.enableRotate = true; //启用/禁用摄像机水平或垂直旋转
 
 				// 监听相机移动事件-限制只能在当前空间范围内移动
@@ -246,11 +246,10 @@
 					}
 				}, false);
 			}
-			
+			//把720VR图转化为一个球体模网格型
 			function makeShaderCube() {
 				let loader = new THREE.TextureLoader();
 				let resultTexture = loader.load(that.bgUrl);
-				resultTexture.rotation = -Math.PI; // 将纹理旋转设置为180度
 				// 创建一个ShaderMaterial
 				var material = new THREE.ShaderMaterial({
 					uniforms: {
@@ -259,22 +258,28 @@
 						}
 					},
 					vertexShader: `
-				    varying vec3 vWorldPosition;
-				    void main() {
-				      vec4 worldPosition = modelMatrix * vec4(position, 1.0);
-				      vWorldPosition = worldPosition.xyz;
-				      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-				    }
-				  `,
+						varying vec3 vWorldPosition;
+						varying vec2 vUv;    
+						void main() {
+							vUv = uv;
+							vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+							vWorldPosition = worldPosition.xyz;
+							gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+						}
+					`,
 					fragmentShader: `
-				    uniform sampler2D mytexture;
-				    varying vec3 vWorldPosition;
-				    void main() {
-				      vec3 direction = normalize(vWorldPosition);
-				      vec2 sampleUV = vec2(0.5 + atan(direction.z, direction.x) / (2.0 * 3.14159265359), 0.5 - asin(direction.y) / 3.14159265359);
-				      gl_FragColor = texture2D(mytexture, sampleUV);
-				    }
-				  `,
+						varying vec2 vUv;
+						uniform sampler2D mytexture;
+						varying vec3 vWorldPosition;
+						
+						void main() {
+							vec2 uv = vUv;
+							vec3 direction = normalize(vWorldPosition);
+							vec2 sampleUV = vec2(0.5 + atan(direction.z, direction.x) / (2.0 * 3.14159265359), 0.5 - asin(direction.y) / 3.14159265359);
+							vec2 sampleUV1 = vec2(1.0 - uv.x, uv.y);
+							gl_FragColor = texture2D(mytexture, sampleUV1);
+						}
+					`,
 					side: THREE.BackSide
 				});
 				//创建一个球体几何体
@@ -287,6 +292,7 @@
 				// var cylinder = new THREE.Mesh(cylinderGeometry, material);
 				// scene.add(cylinder);
 			}
+			
 
 			function makeInstance() {
 				// let geometry = new THREE.BoxGeometry(10, 10, 10);

src/pages/webgl_rxdz_clipImg/webgl_rxdz_clipImg.vue

@@ -169,12 +169,13 @@
 				// gridHelper.position.x = 0;
 				// scene.add(gridHelper);
 				//加载环境720贴图
-				const loader = new THREE.TextureLoader();
-				const texture = loader.load(that.bgUrl, () => {
-					const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
-					rt.fromEquirectangularTexture(renderer, texture);
-					scene.background = rt.texture;
-				});
+				// const loader = new THREE.TextureLoader();
+				// const texture = loader.load(that.bgUrl, () => {
+				// 	const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
+				// 	rt.fromEquirectangularTexture(renderer, texture);
+				// 	scene.background = rt.texture;
+				// });
+				makeShaderCube();//把720VR图转化为一个球体模网格型
 				//antialias 这个值得设置为false，不然IOS上截图会失效
 				renderer = that.renderer = new THREE.WebGLRenderer({
 					canvas:canvas3d,
@@ -193,8 +194,8 @@
 				controls.maxDistance = 30;
 				// controls.minPolarAngle = 0; // 默认0
 				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
-				controls.enableZoom = false; //启用摄像机的缩放
-				controls.enablePan = false; //禁用摄像机平移
+				controls.enableZoom = true; //启用摄像机的缩放
+				controls.enablePan = true; //禁用摄像机平移
 				controls.enableRotate = true; //启用摄像机水平或垂直旋转
 
 				// 监听相机移动事件-限制只能在当前空间范围内移动
@@ -228,7 +229,54 @@
 				}
 				
 			}
-
+			
+			//把720VR图转化为一个球体模网格型
+			function makeShaderCube() {
+				let loader = new THREE.TextureLoader();
+				let resultTexture = loader.load(that.bgUrl);
+				// 创建一个ShaderMaterial
+				var material = new THREE.ShaderMaterial({
+					uniforms: {
+						mytexture: {
+							value: resultTexture
+						}
+					},
+					vertexShader: `
+						varying vec3 vWorldPosition;
+						varying vec2 vUv;    
+						void main() {
+							vUv = uv;
+							vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+							vWorldPosition = worldPosition.xyz;
+							gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+						}
+					`,
+					fragmentShader: `
+						varying vec2 vUv;
+						uniform sampler2D mytexture;
+						varying vec3 vWorldPosition;
+						
+						void main() {
+							vec2 uv = vUv;
+							vec3 direction = normalize(vWorldPosition);
+							vec2 sampleUV = vec2(0.5 + atan(direction.z, direction.x) / (2.0 * 3.14159265359), 0.5 - asin(direction.y) / 3.14159265359);
+							vec2 sampleUV1 = vec2(1.0 - uv.x, uv.y);
+							gl_FragColor = texture2D(mytexture, sampleUV1);
+						}
+					`,
+					side: THREE.BackSide
+				});
+				//创建一个球体几何体
+				var sphereGeometry = new THREE.SphereGeometry(radius, 60, 40);
+				//创建一个球体并应用材质
+				var sphere = new THREE.Mesh(sphereGeometry, material);
+				scene.add(sphere);
+				// 创建一个圆柱几何体
+				// var cylinderGeometry = new THREE.CylinderGeometry(50, 50, 100, 60, 1, true);
+				// var cylinder = new THREE.Mesh(cylinderGeometry, material);
+				// scene.add(cylinder);
+			}
+			
 			function videoHandle() {
 				if(!that.videoUrl){
 					return false;

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue

@@ -167,13 +167,13 @@
 				// scene.add(gridHelper);
 				
 				//加载环境720贴图
-				const loader = new THREE.TextureLoader();
-				const texture = loader.load(that.bgUrl, () => {
-					const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
-					rt.fromEquirectangularTexture(renderer, texture);
-					scene.background = rt.texture;
-				});
-				// makeShaderCube();
+				// const loader = new THREE.TextureLoader();
+				// const texture = loader.load(that.bgUrl, () => {
+				// 	const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
+				// 	rt.fromEquirectangularTexture(renderer, texture);
+				// 	scene.background = rt.texture;
+				// });
+				makeShaderCube();
 				//antialias 这个值得设置为false，不然IOS上截图会失效
 				renderer = that.renderer = new THREE.WebGLRenderer({
 					canvas: canvas3d,
@@ -189,8 +189,8 @@
 				controls.maxDistance = radius - 10;
 				// controls.minPolarAngle = 0; // 默认0
 				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
-				controls.enableZoom = false; //启用/禁用摄像机的缩放
-				controls.enablePan = false; //启用/禁用摄像机平移
+				controls.enableZoom = true; //启用/禁用摄像机的缩放
+				controls.enablePan = true; //启用/禁用摄像机平移
 				controls.enableRotate = true; //启用/禁用摄像机水平或垂直旋转
 
 				// 监听相机移动事件-限制只能在当前空间范围内移动
@@ -206,19 +206,18 @@
 				// });
 				// 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();
+				}
 			}
-			//创建背景球模型
+			//把720VR图转化为一个球体模网格型
 			function makeShaderCube() {
 				let loader = new THREE.TextureLoader();
 				let resultTexture = loader.load(that.bgUrl);
-				resultTexture.rotation = Math.PI; // 将纹理旋转设置为180度
 				// 创建一个ShaderMaterial
 				var material = new THREE.ShaderMaterial({
 					uniforms: {
@@ -227,22 +226,28 @@
 						}
 					},
 					vertexShader: `
-				    varying vec3 vWorldPosition;
-				    void main() {
-				      vec4 worldPosition = modelMatrix * vec4(position, 1.0);
-				      vWorldPosition = worldPosition.xyz;
-				      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-				    }
-				  `,
+						varying vec3 vWorldPosition;
+						varying vec2 vUv;    
+						void main() {
+							vUv = uv;
+							vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+							vWorldPosition = worldPosition.xyz;
+							gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+						}
+					`,
 					fragmentShader: `
-				    uniform sampler2D mytexture;
-				    varying vec3 vWorldPosition;
-				    void main() {
-				      vec3 direction = normalize(vWorldPosition);
-				      vec2 sampleUV = vec2(0.5 + atan(direction.z, direction.x) / (2.0 * 3.14159265359), 0.5 - asin(direction.y) / 3.14159265359);
-				      gl_FragColor = texture2D(mytexture, sampleUV);
-				    }
-				  `,
+						varying vec2 vUv;
+						uniform sampler2D mytexture;
+						varying vec3 vWorldPosition;
+						
+						void main() {
+							vec2 uv = vUv;
+							vec3 direction = normalize(vWorldPosition);
+							vec2 sampleUV = vec2(0.5 + atan(direction.z, direction.x) / (2.0 * 3.14159265359), 0.5 - asin(direction.y) / 3.14159265359);
+							vec2 sampleUV1 = vec2(1.0 - uv.x, uv.y);
+							gl_FragColor = texture2D(mytexture, sampleUV1);
+						}
+					`,
 					side: THREE.BackSide
 				});
 				//创建一个球体几何体
@@ -255,11 +260,14 @@
 				// var cylinder = new THREE.Mesh(cylinderGeometry, material);
 				// scene.add(cylinder);
 			}
-			
 			function videoHandle() {
 				if(!that.videoUrl){
 					return false;
 				}
+				if(that.repeatFlag){
+					return false
+				}
+				that.repeatFlag = true;
 				if(videoMesh){
 					that.scene.remove(videoMesh);
 					// that.scene.remove(lineMesh);
@@ -273,6 +281,8 @@
 				video.loop = true;
 				video.muted = that.muted;
 				video.controls = false;
+				video.autoplay = true;
+				video.preload = 'auto';
 				video.setAttribute('webkit-playsinline', true);
 				video.setAttribute('playsinline', true);
 				video.load();
@@ -440,6 +450,7 @@
 					// line.position.set(0, -10, -10);//设置视频位置
 					// lineMesh = line;
 					// scene.add(line);
+					that.repeatFlag = false;//释放锁，允许再次点击
 				},1000)
 			}
 			function getVideoPosition() {