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

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

</template>
<script>
	import * as THREE from 'three';
	import Stats from 'three/addons/libs/stats.module.js';
	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	import { DragControls } from 'three/addons/controls/DragControls.js';
	import {getStorage} from '@/utils/localStorage';
	var requestId = "";
	const util = require('@/utils/util.js').default;
	import viewAI from '@/components/newBottomCom/viewAI/viewAI.vue';

	import commonPageMethod from '@/mixins/commonPageMethod.js';
	// import commonPageMethod from '@/common/commonPageMethod.js';
	export default {
		components: {
			viewAI
		},
		mixins: [commonPageMethod],
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				pvCurPageName: "add_AI_people",
				locusBehaviorName: "添加数字人",
				pvCurPageParams: null,
				houseId: "",
				pvId: 'p_2cmina_23080402',
				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, //观察点上一次移动到的位置
				canvasHeight: 408, //canvas视图的高度-计算得出
				myLoadingStatus: false,
				repeatFlag: false, //重复点击
				isIOS: false,
			}
		},
		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_vr***");
		},
		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 || '';
			this.bgUrl = this.$route.query.bgUrl || 'https://dm.static.elab-plus.com/miniProgram/tears_of_steel_bridge_2k.jpg';
			
			// alert("***mounted-webgl_rxdz_roam***"+this.isIOS + this.curHouseObj)
			let screenWidth = window.screen.width;
			let screenHeight = window.screen.height;
			if (window.innerWidth && window.screen.width) {
				screenWidth = Math.min(window.innerWidth, window.screen.width)
			}
			if (window.innerHeight && window.screen.height) {
				screenHeight = Math.min(window.innerHeight, window.screen.height)
			}
			let unit = screenWidth / 750; //单位rpm 对应 px 的值
			// this.canvasHeight = screenHeight - (600 * unit) + (40 * unit);
			this.canvasHeight = screenWidth;
			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 stats;
			let controls2 = null;
			let videoMesh = null;
			init();
			// this.clearEvent = clearEvent;
			// this.attendEvent = attendEvent;
			this.starRender = starRender; //对外暴露启动渲染的方法
			this.stopRender = stopRender; //对外暴露停止渲染的方法
			this.videoHandle = videoHandle;	//视频处理方法
			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,
				});
				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(); //启动渲染
				// setTimeout(() => {
				// 	videoHandle()
				// }, 500);
			}

			function videoHandle() {
				if(!that.videoUrl){
					return false;
				}
				if(videoMesh){
					that.scene.remove(videoMesh);
					controls2.dispose();
				}
				// 创建视频元素
				var video = document.createElement('video');
				video.src = that.videoUrl; // 视频文件的路径
				video.setAttribute("crossOrigin", "Anonymous");
				video.loop = true;
				video.muted = true;
				video.play();
				
				console.warn("***video***",video,video.width);
				// 创建视频纹理
				var videoTexture = new THREE.VideoTexture(video);
				// 过滤的颜色值
				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;
				controls2 = new DragControls([mesh], camera, renderer.domElement );
				controls2.addEventListener('dragstart', function ( event ) {
					controls.enabled = false;
				});
				controls2.addEventListener('dragend', function ( event ) {
					controls.enabled = true;
				});
			}

			function stopRender() {
				needRender = false;
			}

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

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

		},
		methods: {
			navbarBackClk() {

			},
			clearHandle() {
				this.clearEvent();
			},
			aiPeopleChange(item){
				console.warn("***aiPeopleChange***",item);
				if(!item || !item.url){
					return false;
				}
				this.videoUrl = item.url;
				this.videoHandle();
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "./webgl_rxdz_vr.scss";
	/* @import "@/common/css/common.css"; */
</style>