|
|
@@ -0,0 +1,574 @@
|
|
|
+<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');
|
|
|
+ document.addEventListener("touchstart", ()=> {
|
|
|
+ // guideMask.classList.add('guide-mask-hide');
|
|
|
+ setTimeout(()=>{
|
|
|
+ videoHandle();
|
|
|
+ },200)
|
|
|
+ }, false);
|
|
|
+ }
|
|
|
+
|
|
|
+ function videoHandle() {
|
|
|
+ if(videoMesh){
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // 创建视频元素
|
|
|
+ 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);
|
|
|
+ // 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");
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ 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>
|
zjs_project