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

<template src="./webgl_rxdz_720.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 {getStorage} from '@/utils/localStorage';
	var requestId = "";
	const util = require('@/utils/util.js').default;
	import commonPageMethod from '@/mixins/commonPageMethod.js';
	// import commonPageMethod from '@/common/commonPageMethod.js';
	export default {
		mixins: [commonPageMethod],
		/**
		 * 页面的初始数据
		 */
		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:'',
				coordinate:'',
				hasOneTouch: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_720***");
		},
		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';
			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) {
				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;
			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 videoMeshGroup = [];
			let cubeCamera = null;
			init();
			// this.clearEvent = clearEvent;
			// this.attendEvent = attendEvent;
			this.starRender = starRender; //对外暴露启动渲染的方法
			this.stopRender = stopRender; //对外暴露停止渲染的方法
			if(window.__wxjs_environment === 'miniprogram'){
				this.navbar.showCapsule = 0;
			}
			function init() {
				// 创建相机位置
				camera = new THREE.PerspectiveCamera(90, 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贴图
				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;
				});
				// makeInstance(),
				//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 = false; //启用/禁用摄像机的缩放
				controls.enablePan = false; //启用/禁用摄像机平移
				controls.enableRotate = true; //启用/禁用摄像机水平或垂直旋转

				// 监听相机移动事件-限制只能在当前空间范围内移动
				// controls.addEventListener('change', () => {
				// 	// 获取OrbitControls的缩放值
				// 	var scale = controls.scale;
				// 	// 检查相机位置是否超出边界框
				// 	// 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);
				if(that.coordinate){
					let position = JSON.parse(that.coordinate);
					// camera.lookAt(position.x, position.y, position.z);
				}
				starRender(); //启动渲染
				if(that.isIOS){
					document.addEventListener("WeixinJSBridgeReady", function (){
						if(that.type){
							moreTest()
						}else{
							videoHandle({videoUrl:that.videoUrl,coordinate:that.coordinate});
						}
					}, false)
				}
				var guideMask = document.querySelector('#guide-mask');
				document.addEventListener("touchend", function () {
					guideMask.classList.add('guide-mask-hide');
					if(!that.isIOS && that.hasOneTouch==false){
						that.hasOneTouch = true;
						// setTimeout(()=>{
							if(that.type){
								moreTest()
							}else{
								videoHandle({videoUrl:that.videoUrl,coordinate:that.coordinate});
							}
						// },2000)
					}
				}, false);
			}
			function makeInstance() {
				// let geometry = new THREE.BoxGeometry(10, 10, 10);
				// //加载环境720贴图
				// var loader1 = new THREE.TextureLoader();
				// var texture1 = loader1.load(that.bgUrl, () => {
				// 	let cubeRenderTarget  = new THREE.WebGLCubeRenderTarget(texture1.image.height);
				// 	cubeRenderTarget.fromEquirectangularTexture(renderer, texture1);
				// 	// scene.background = cubeRenderTarget.texture;
				// 	// 创建一个立方体贴图相机
				// 	cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);
				// 	// 创建材质并应用纹理
				// 	let material = new THREE.MeshBasicMaterial({ envMap: cubeRenderTarget.texture,side:THREE.BackSide });
				// 	// const material = new THREE.MeshPhongMaterial({color});
				// 	let cube = new THREE.Mesh(geometry, material);
				// 	cube.position.set(0,0,0);
				// 	scene.add(cube);
				// });
				// 创建一个立方体贴图加载器
				var loader = new THREE.CubeTextureLoader();
				// 加载Equirectangular map
				loader.load([
					'https://dm.static.elab-plus.com/miniProgram/pos-x.jpg',
					'https://dm.static.elab-plus.com/miniProgram/neg-x.jpg',
					'https://dm.static.elab-plus.com/miniProgram/pos-y.jpg',
					'https://dm.static.elab-plus.com/miniProgram/neg-y.jpg',
					'https://dm.static.elab-plus.com/miniProgram/pos-z.jpg',
					'https://dm.static.elab-plus.com/miniProgram/neg-z.jpg',
				], function (texture) {
				    // 将Equirectangular map 应用到天空盒的材质上
				    var material = new THREE.MeshBasicMaterial({ envMap: texture,side:THREE.BackSide });
				    var geometry = new THREE.BoxGeometry(10, 10, 10);
				    var skybox = new THREE.Mesh(geometry, material);
				    scene.add(skybox);
				});
			}
			function moreTest(){
				let data = [
					{
						videoUrl:'https://dm.static.elab-plus.com/miniProgram/002.mp4',
						coordinate:'{"x":6,"y":-5,"z":0}',
						muted:true,
					},
					{
						videoUrl:'https://dm.static.elab-plus.com/miniProgram/004.mp4',
						coordinate:'{"x":-13,"y":16,"z":8}',
						muted:false,
					},
					{
						videoUrl:'https://dm.static.elab-plus.com/miniProgram/005.mp4',
						coordinate:'{"x":13,"y":-14,"z":-35}',
						muted:true,
					},
					{
						videoUrl:'https://dm.static.elab-plus.com/miniProgram/007.mp4',
						coordinate:'{"x":0,"y":4,"z":25}',
						muted:true,
					},
					{
						videoUrl:'https://dm.static.elab-plus.com/miniProgram/008.mov',
						coordinate:'{"x":3,"y":-4,"z":-5}',
						muted:true,
					}
				]
				data.forEach(it=>{
					videoHandle(it);
				})
			}
			function videoHandle(item) {
				if(!item.videoUrl){
					return false;
				}
				// 创建视频元素
				var video = document.createElement('video');
				video.src = item.videoUrl; // 视频文件的路径
				video.setAttribute("crossOrigin", "Anonymous");
				video.loop = true;
				video.muted = item.muted;
				video.controls = false;
				video.autoplay = true;
				video.preload = 'auto';
				video.setAttribute('webkit-playsinline', true);
				video.setAttribute('playsinline', true);
				video.load();
				
				console.warn("***video***",video,video.width);
				
				setTimeout(()=>{
					video.play();
					// 创建视频纹理
					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);
					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);
					videoMeshGroup.push(mesh);
				},1000)
				
				// videoMesh = mesh;
			}

			function stopRender() {
				needRender = false;
			}

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

			function render() {
				if (needRender == false) {
					return false;
				}
				// stats.update();
				controls.update();
				if(videoMeshGroup){
					videoMeshGroup.forEach(it=>{it.lookAt(camera.position)})
				}
				if(cubeCamera){
					cubeCamera.update(renderer, scene);
				}
				// if(scene.background){
				// 	scene.background.scale.set(0.5,0.5,0.5)
				// }
				renderer.render(scene, camera); //单次渲染
				requestId = requestAnimationFrame(render, canvas3d);
			}

		},
		methods: {
			navbarBackClk() {

			},
			clearHandle() {
				this.clearEvent();
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import "./webgl_rxdz_720.scss";
	/* @import "@/common/css/common.css"; */
</style>