h5-webgl-program/src/pages/webgl_rxdz_clipImg/webgl_rxdz_clipImg.vue

<template src="./webgl_rxdz_clipImg.html">

</template>
<script>
	import * as THREE from 'three';
	import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
	import {getStorage} from '@/utils/localStorage';
	import { MessageBox } from 'mint-ui';
	var requestId = "";
	const util = require('@/utils/util.js').default;
	import commonPageMethod from '@/mixins/commonPageMethod.js';
	import screenshot from '@/mixins/screenshot.js';
	// import commonPageMethod from '@/common/commonPageMethod.js';
	export default {
		mixins: [commonPageMethod,screenshot],
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				pvCurPageName: "webgl_720",
				locusBehaviorName: "720展示",
				pvCurPageParams: null,
				houseId: "",
				pvId: 'p_2cmina_23121201',
				canvas: null,
				navbar: {
					showCapsule: 1,
					title: '',
					titleColor: '#000',
					navPadding: 0,
					navPaddingBg: 'transparent',
					navBarColor: 'transparent',
					navBackColor: 'transparent',
					haveCallback: true, // 如果是 true 会接手 navbarBackClk
					fromShare: false,
					fromProject: 0,
					shareToken: "",
					pageName: this.pvCurPageName,
				},
				id: '', // 户型编号
				loader: null,
				scene: null,
				camera: null,
				controlStarPosition: {
					x: 0,
					y: 0,
					z: 0
				}, //控制器初始位置
				cameraStarPosition: {
					x: 0,
					y: 0,
					z: 5
				}, //摄像头初始位置
				cameraLastPosition: null, //摄像头上一次移动到的位置
				controlLastPosition: null, //观察点上一次移动到的位置
				myLoadingStatus: false,
				repeatFlag: false, //重复点击
				canvasHeight:'',
				isIOS: false,
				videoUrl:'',	//绿幕视频地址
				bgUrl:'',
				width:'620',
				height:'620',
				left:'65',
				top:'300',
				startX:0,
				startY:0,
				clientX:0,
				clientY:0,
				unit:0.5,
				screenWidth:0,
				screenHeight:0,
				type:1,
				bottomLeftX:0,
				bottomLeftY:0,
			}
		},
		beforeDestroy() {
			cancelAnimationFrame(requestId, this.canvas)
			this.worker && this.worker.terminate()
			if (this.renderer instanceof THREE.WebGLRenderer) {
				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
				let deleList = this.scene.children.filter(object => {
					if (object instanceof THREE.Mesh) {
						return object
					}
				})
				if (deleList && deleList.length > 0) {
					this.scene.remove(...deleList);
				}
				this.scene.traverse(function(object) {
					if (object instanceof THREE.Mesh) {
						if (object.geometry && typeof(object.geometry.dispose) == 'function') {
							object.geometry.dispose();
						}
						if (object.material && typeof(object.material.dispose) == 'function') {
							object.material.dispose();
						}
						if (object.texture && typeof(object.texture.dispose) == 'function') {
							object.texture.dispose();
						}
					}
				});
				this.renderer.clear();
				this.renderer.dispose();
				this.renderer.forceContextLoss();
				this.renderer.context = null;
				this.renderer.domElement = null;
				this.renderer = null;;
			}
			console.warn("***beforeDestroy-webgl_rxdz_clipImg***");
		},
		mounted(options) {
			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 || 'https://dm.static.elab-plus.com/miniProgram/007.mp4';
			this.bgUrl = this.$route.query.bgUrl || 'https://dm.static.elab-plus.com/miniProgram/tears_of_steel_bridge_2k.jpg';
			let screenWidth = window.screen.width;
			let screenHeight = window.screen.height;
			if (window.innerWidth && window.screen.width) {
				this.screenWidth = screenWidth = Math.min(window.innerWidth, window.screen.width);
			}
			if (window.innerHeight && window.screen.height) {
				this.screenHeight = screenHeight = Math.min(window.innerHeight, window.screen.height)
			}
			let unit = screenWidth / 750; //单位rpm 对应 px 的值
			this.unit = unit;
			this.width = this.width * unit;
			this.height = this.height * unit;
			this.left = this.left * unit;
			this.top = this.top * unit;
			this.canvasHeight = screenHeight;
			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : '';
			this.spaceId = this.$route.query.spaceId ? this.$route.query.spaceId : '';
			let container = this.$refs.webgl;
			let canvas3d = this.canvas = this.$refs.glcanvas;
			//uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm

			let camera = null,
				renderer = null;
			let needRender = false; //是否需要渲染 false表示不需要渲染；true 表示需要渲染
			let scene = this.scene = new THREE.Scene();
			let controls = null,
				boundary = null;
			let videoMesh = null;
			init();
			// this.clearEvent = clearEvent;
			// this.attendEvent = attendEvent;
			this.starRender = starRender; //对外暴露启动渲染的方法
			this.stopRender = stopRender; //对外暴露停止渲染的方法

			function init() {
				// 创建相机位置
				camera = new THREE.PerspectiveCamera(120, screenWidth / 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);
				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();
				const texture = loader.load(that.bgUrl, () => {
					const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
					rt.fromEquirectangularTexture(renderer, texture);
					scene.background = rt.texture;
				});
				//antialias 这个值得设置为false，不然IOS上截图会失效
				renderer = that.renderer = new THREE.WebGLRenderer({
					canvas:canvas3d,
					alpha: true, 
					antialias:false,
					// 如果想保存three.js canvas画布上的信息，注意设置preserveDrawingBuffer
					preserveDrawingBuffer: true,
				});
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(screenWidth, that.canvasHeight);
				container.appendChild(renderer.domElement);

				controls = new OrbitControls(camera, renderer.domElement);
				controls.enableDamping = true; //启动缓动
				controls.minDistance = 0.0001;
				controls.maxDistance = 30;
				// controls.minPolarAngle = 0; // 默认0
				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
				controls.enableZoom = true; //启用摄像机的缩放
				controls.enablePan = true; //禁用摄像机平移
				controls.enableRotate = true; //启用摄像机水平或垂直旋转

				// 监听相机移动事件-限制只能在当前空间范围内移动
				// 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);
				// 		}
				// 	}
				// });
				camera.lookAt(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
				starRender(); //启动渲染
				// var guideMask = document.querySelector('#guide-mask');
				
				if(that.isIOS){
					document.addEventListener("WeixinJSBridgeReady", function (){
					    videoHandle();
					}, false)
				}else{
					document.addEventListener("touchstart",  ()=> {
						// guideMask.classList.add('guide-mask-hide');
						setTimeout(()=>{
							videoHandle();
						},200)
					}, false);
				}
				
			}

			function videoHandle() {
				if(videoMesh){
					return false
				}
				// 创建视频元素
				// var video = document.createElement('video');
				var video = document.getElementById('myvideo');
				video.src = that.videoUrl; // 视频文件的路径
				video.setAttribute("crossOrigin", "Anonymous");
				video.loop = true;
				video.muted = true;
				video.controls = false;
				video.setAttribute('webkit-playsinline', true);
				video.setAttribute('playsinline', true);
				// video['custom-cache'] = false;
				// video['x5-playsinline'] = '';
				// video['webkit-playsinline'] = true;
				// video['playsinline'] = true;
				// video['x-webkit-airplay'] = '';
				// // video['x5-video-player-fullscreen'] = false;
				// video['x5-video-player-type'] = 'h5-page';
				video.play();
				
				console.warn("***video***",video,video.width);
				// 创建视频纹理
				var videoTexture = new THREE.VideoTexture(video);
				// videoTexture.minFilter = THREE.LinearFilter;
				// videoTexture.format = THREE.RGBFormat;

				var keyColorObject = new THREE.Color("#00ff05");
				var myuniforms = {
				    pointTexture: {
				        type: "t",
				        value: videoTexture
				    },
				    color: {
				        type: "c",
				        value: keyColorObject
				    },
				    videowidth: {
				        type: "f",
				        value: 501.0
				    },
				    videoheight: {
				        type: "f",
				        value: 1024.0
				    },
				    filterType: {
				        type: "i",
				        value: 0
				    },
				    lightLevel: {
				        type: "f",
				        value: 0.2
				    },
				    gridSize: {
				        type: "f",
				        value: 0.8
				    }
				};
				// 创建绿幕着色器
				let greenScreenShader = {
					uniforms: myuniforms,
					transparent: true,
					vertexShader: `    
						varying vec2 vUv;    
						void main() {
							vUv = uv;
							vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
							gl_Position = projectionMatrix * mvPosition;
						}  `,
					fragmentShader: `
						precision mediump float;
						uniform sampler2D pointTexture;
						uniform sampler2D colorlut;
						uniform vec3 color;
						uniform float videowidth;
						uniform float videoheight;
						uniform int filterType;
						uniform float gridSize;
						uniform float lightLevel;
						
						varying vec2 vUv;
						float alter=3.0;
						float u_mode=0.0;
						float u_threshold=1.0;
						float u_clipBlack=0.9;
						float u_clipWhite=1.0;
						
						float rgb2cb(float r, float g, float b){
							return 0.5 + -0.168736*r - 0.331264*g + 0.5*b;
						}
						float rgb2cr(float r, float g, float b){
							return 0.5 + 0.5*r - 0.418688*g - 0.081312*b;
						}
						float smoothclip(float low, float high, float x){
							if (x <= low){
								return 0.0;
							}
							if(x >= high){
								return 1.0;
							}
							return (x-low)/(high-low);
						}
						vec4 greenscreen(vec4 colora, float Cb_key,float Cr_key, float tola,float tolb, float clipBlack, float clipWhite){
							float cb = rgb2cb(colora.r,colora.g,colora.b);
							float cr = rgb2cr(colora.r,colora.g,colora.b);
							float alpha = distance(vec2(cb, cr), vec2(Cb_key, Cr_key));
							alpha = smoothclip(tola, tolb, alpha);
							float r = max(gl_FragColor.r - (1.0-alpha)*color.r, 0.0);
							float g = max(gl_FragColor.g - (1.0-alpha)*color.g, 0.0);
							float b = max(gl_FragColor.b - (1.0-alpha)*color.b, 0.0);
							if(alpha < clipBlack){
								alpha = r = g = b = 0.0;
							}
							if(alpha > clipWhite){
								alpha = 1.0;
							}
							if(clipWhite < 1.0){
								alpha = alpha/max(clipWhite, 0.9);
							}
							return vec4(r,g,b, alpha);
						}
						
						void main()
						{
							gl_FragColor = texture2D( pointTexture, vUv );
							float tola = 0.0;
							float tolb = u_threshold/2.0;
							float cb_key = rgb2cb(color.r, color.g, color.b);
							float cr_key = rgb2cr(color.r, color.g, color.b);
							gl_FragColor = greenscreen(gl_FragColor, cb_key, cr_key, tola, tolb, u_clipBlack, u_clipWhite);
							if(u_mode > 0.5 && u_mode < 1.5){
								gl_FragColor = mix(vec4(1.0, 1.0, 1.0, 1.0), gl_FragColor, gl_FragColor.a);
								gl_FragColor.a = 1.0;
							}
							if(u_mode > 1.5 && u_mode < 2.5){
								gl_FragColor = vec4(gl_FragColor.a, gl_FragColor.a, gl_FragColor.a, 1.0);
							}
							if(filterType==1){
								float gray = 0.2989*gl_FragColor.r+0.5870*gl_FragColor.g+0.1140*gl_FragColor.b;
								gl_FragColor = vec4(gray,gray,gray , gl_FragColor.a);
							}else if(filterType==2){
								vec3 tColor2 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]) ).rgb;
								vec3 tColor3 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]) ).rgb;
								vec3 tColor4 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]+(1.0/videoheight)) ).rgb;
								vec3 tColor5 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]-(1.0/videoheight)) ).rgb;
								vec3 tColor6 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]-(1.0/videoheight)) ).rgb;
								vec3 tColor7 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]+(1.0/videoheight)) ).rgb;
								vec3 tColor8 = texture2D( pointTexture, vec2(vUv[0] , vUv[1]+(1.0/videoheight)) ).rgb;
								vec3 tColor9 = texture2D( pointTexture, vec2(vUv[0] , vUv[1]+(1.0/videoheight)) ).rgb;
								vec3 tColor10 = texture2D( pointTexture, vec2(vUv[0]+(2.0/videowidth) , vUv[1]) ).rgb;
								vec3 tColor11 = texture2D( pointTexture, vec2(vUv[0]+(2.0/videowidth) , vUv[1]) ).rgb;
								gl_FragColor = vec4( (gl_FragColor.r+tColor2[0]+tColor3[0]+tColor4[0]+tColor5[0]+tColor6[0]+tColor7[0]+tColor8[0]+tColor9[0]+tColor10[0]+tColor11[0])/11.0,
								(gl_FragColor.g+tColor2[1]+tColor3[1]+tColor4[1]+tColor5[1]+tColor6[1]+tColor7[1]+tColor8[1]+tColor9[1]+tColor10[1]+tColor11[1])/11.0,
								(gl_FragColor.b+tColor2[2]+tColor3[2]+tColor4[2]+tColor5[2]+tColor6[2]+tColor7[2]+tColor8[2]+tColor9[2]+tColor10[2]+tColor11[2])/11.0,
								gl_FragColor.a);
							}else if(filterType==3){
								float brightr=gl_FragColor.r+lightLevel;
								float brightg=gl_FragColor.g+lightLevel;
								float brightb=gl_FragColor.b+lightLevel;
								gl_FragColor = vec4(brightr,brightg,brightb , gl_FragColor.a);
							}else if(filterType==4){
								float reverser=1.0 - gl_FragColor.r;
								float reverseg=1.0 - gl_FragColor.g;
								float reverseb=1.0 - gl_FragColor.b;
								gl_FragColor = vec4(reverser,reverseg,reverseb,gl_FragColor.a);
							}else if(filterType==5){
								float dx = fract(sin(dot(vUv ,vec2(12.9898,78.233))) * 43758.5453);
								vec3 cResult = gl_FragColor.rgb + gl_FragColor.rgb * clamp( 0.1 + dx, 0.0, 1.0 );
								vec2 sc = vec2( sin( vUv.y * 4096.0 ), cos( vUv.y * 4096.0 ) );
								cResult += gl_FragColor.rgb * vec3( sc.x, sc.y, sc.x ) * 0.025;
								cResult = gl_FragColor.rgb + clamp( 0.35, 0.0,1.0 ) * ( cResult - gl_FragColor.rgb );
								if( false ) {
									cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
								}
								float oldr=0.393*cResult[0]+0.769*cResult[1]+0.189*cResult[2];
								float oldg=0.349*cResult[0]+0.686*cResult[1]+0.168*cResult[2];
								float oldb=0.272*cResult[0]+0.534*cResult[1]+0.131*cResult[2];
								gl_FragColor =  vec4( oldr,oldg,oldb , gl_FragColor.a);
							}else if(filterType==6){
								float average = ( gl_FragColor.r + gl_FragColor.g + gl_FragColor.b ) / 2.0;
								float s = sin( 0.5 ), c = cos( 0.5 );
								vec2 tex = vUv * vec2(videowidth,videoheight) - vec2(0,0);
								vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * gridSize;
								float pattern =  ( sin( point.x ) * sin( point.y ) ) * 4.0;
								float seed = average * 10.0 - 5.0 + pattern ;
								gl_FragColor = vec4(  seed*0.3+gl_FragColor.r*0.7,seed*0.3+gl_FragColor.g*0.7 ,seed*0.3+gl_FragColor.b*0.7, gl_FragColor.a );
							}
						}
					`,
				};
				// 创建绿幕材质
				let greenScreenMaterial = new THREE.ShaderMaterial(greenScreenShader);
				greenScreenMaterial.side = THREE.DoubleSide;
				let geometry = new THREE.PlaneGeometry(9, 16);
				// 应用绿幕材质到对象上
				let mesh = new THREE.Mesh(geometry, greenScreenMaterial);
				mesh.position.set(0, 0, -10);//设置视频位置
				// mesh.lookAt(camera.position);
				scene.add(mesh);
				videoMesh = mesh;
			}

			function stopRender() {
				needRender = false;
			}

			function starRender() {
				if (needRender == true) { //如果已经在渲染中了，则不能再次开启，避免渲染过多
					false;
				}
				needRender = true;
				render(); //开始渲染
			}

			function render() {
				if (needRender == false) {
					return false;
				}
				if(videoMesh){
					videoMesh.lookAt(camera.position);
				}
				renderer.render(scene, camera); //单次渲染
				requestId = requestAnimationFrame(render, canvas3d);
			}

		},
		methods: {
			async clipImgHandle(){
				this.bottomLeftX = this.left;
				this.bottomLeftY = this.screenHeight - this.top - this.height;
				console.warn("***clipImgHandle***")
				let shottingImg = await this.shottingAction(3) + "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//开始截图
				console.warn("***clipImgHandle1***",shottingImg);
				// alert(shottingImg)
				// alert('getClipPicUrl3'+img.width)
				// MessageBox({
				// 	title: '提示',
				// 	message: shottingImg,
				// 	showCancelButton: true
				// });
				// window.open(shottingImg, "_blank");
				window.location.href = shottingImg
			},
			navbarBackClk() {

			},
			clearHandle() {
				this.clearEvent();
			},
			mytouchstart(e,type) {
				console.warn("***mytouchstart***",type)
				this.type = type;
				this.startLeft = this.left;
				// this.clientX = 0;
				// this.clientY = 0;
				this.startX = e.changedTouches[0].clientX;
				this.startY = e.changedTouches[0].clientY;
				e.preventDefault();
			},
			mytouchmove(e) {
				let startX = this.startX; 	// 开始x坐标 
				let startY = this.startY; 	//开始y坐标
				let touchMoveX = e.changedTouches[0].clientX //滑动变化坐标 
				let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标 
				// this.clientX = touchMoveX - startX;
				// this.clientY = touchMoveY - startY;
				this.widthHandle(touchMoveX,1);
				e.preventDefault();
			},
			mytouchend(e) {
				
			},
			widthHandle(touchMoveX){
				let clientX = touchMoveX - this.startX;
				if(this.type==1){//左上角
					if(clientX < 0){//左移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft - _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left < 0){
							this.left = 0;
							this.width = this.screenWidth;
						}
					}else if(clientX > 0){//右移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft + _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left > (this.screenWidth - 200)/2){
							this.left = (this.screenWidth - 200)/2;
							this.width = 200;
						}
					}
					this.height = this.width;
				}else if(this.type==2){//右上角
					if(clientX < 0){//左移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft + _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left > (this.screenWidth - 200)/2){
							this.left = (this.screenWidth - 200)/2;
							this.width = 200;
						}
					}else if(clientX > 0){//右移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft - _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left < 0){
							this.left = 0;
							this.width = this.screenWidth;
						}
					}
					this.height = this.width;
				}else if(this.type==3){//右下角
					if(clientX < 0){//左移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft + _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left > (this.screenWidth - 200)/2){
							this.left = (this.screenWidth - 200)/2;
							this.width = 200;
						}
					}else if(clientX > 0){//右移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft - _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left < 0){
							this.left = 0;
							this.width = this.screenWidth;
						}
					}
					this.height = this.width;
				}else if(this.type==4){//左下角
					if(clientX < 0){//左移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft - _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left < 0){
							this.left = 0;
							this.width = this.screenWidth;
						}
					}else if(clientX > 0){//右移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft + _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left > (this.screenWidth - 200)/2){
							this.left = (this.screenWidth - 200)/2;
							this.width = 200;
						}
					}
					this.height = this.width;
				}
				// this.unit = unit;
				// this.width = this.width * unit;
				// this.height = this.height * unit;
				// this.left = this.left * unit;
				// this.top = this.top * unit;
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "./webgl_rxdz_clipImg.scss";
	/* @import "@/common/css/common.css"; */
</style>