优化交互逻辑

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.html

@@ -23,8 +23,18 @@
 	<canvas id="canvas_webgl" type="webgl" ref="glcanvas"
 		 width="100vw" 
 		:style="{'height':canvasHeight+'px'}">
-		
 	</canvas>
+	<!-- 数字人大小滚动条 -->
+	<el-slider
+		class="rangeview"
+	    v-model="rangeValue"
+	    vertical
+		:min="10"
+		:max="100"
+		:show-tooltip="false"
+		@change="rangeChange"
+	    height="200px">
+	</el-slider>
 	<!-- AI数字人组件 -->
 	<viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" style="z-index: 13;"></viewAI>
 	<!-- 生成截屏的画布对象 -->

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.scss

@@ -2,6 +2,7 @@
 	width:100vw;
 	height:100vh;
 	overflow: hidden;
+	position: relative;
 }
 canvas { z-index: 10;}
 .mapDiv{
@@ -21,7 +22,6 @@ page {
 #canvas {
 	width: 100vw;
 	z-index: -1;
-	// position: absolute;
 	left:0px;
 }
 .canvas-view{
@@ -40,3 +40,17 @@ page {
 	bottom: 20px;
 	border-radius: 50%;
 }
+.rangeview{
+	position: absolute!important;
+	right: 20px;
+	top: 60px;
+}
+// /deep/.el-slider.is-vertical .el-slider__button-wrapper{
+// 	top: 50%;
+// 	left: 50%;
+// 	transform: translate(-50%,-50%);
+// }
+// /deep/.el-slider__button-wrapper .el-tooltip, .el-slider__button-wrapper::after{
+// 	    position: relative;
+// 	    top: -50%;
+// }

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue

@@ -8,6 +8,7 @@
 	import { DragControls } from 'three/addons/controls/DragControls.js';
 	import {getStorage} from '@/utils/localStorage';
 	import { Toast } from 'mint-ui';
+	import { Range } from 'mint-ui';
 	var requestId = "";
 	const util = require('@/utils/util.js').default;
 	import viewAI from '@/components/newBottomCom/viewAI/viewAI.vue';
@@ -66,6 +67,7 @@
 				isIOS: false,
 				muted: true,
 				hasOneTouch: false,
+				rangeValue:50,
 			}
 		},
 		beforeDestroy() {
@@ -140,6 +142,7 @@
 			// let lineMesh = null;
 			let radius = 50;	//全景图半径-全景图是个球体
 			let fingerCount = 0;
+			let lastPosition = new THREE.Vector3(0, -10, -10);
 			init();
 			// this.clearEvent = clearEvent;
 			// this.attendEvent = attendEvent;
@@ -147,6 +150,7 @@
 			this.stopRender = stopRender; //对外暴露停止渲染的方法
 			this.videoHandle = videoHandle;	//视频处理方法
 			this.getVideoPosition = getVideoPosition;	//获取视频位置信息
+			this.videoMeshChange = videoMeshChange;	//数字人缩放方法
 			if(window.__wxjs_environment === 'miniprogram'){
 				this.navbar.showCapsule = 0;
 			}
@@ -452,10 +456,11 @@
 					let geometry = new THREE.PlaneGeometry(9, 16);
 					// 应用绿幕材质到对象上
 					let mesh = new THREE.Mesh(geometry, greenScreenMaterial);
-					mesh.position.set(0, -10, -10);//设置视频位置
+					mesh.position.copy(lastPosition);//设置视频位置
 					// mesh.lookAt(camera.position);
 					scene.add(mesh);
 					videoMesh = mesh;
+					videoMeshChange(that.rangeValue);//同步数字人模型的缩放程度
 					// 设置物体的起始位置
 					// mesh.userData.startPosition = new THREE.Vector3(0, -10, 0);
 					// 创建一个球体几何体
@@ -480,6 +485,7 @@
 					});
 					dragControls.addEventListener('dragend', function ( event ) {
 						controls.enabled = true;
+						lastPosition.copy(videoMesh.position);
 					});
 					// 创建一个PlaneGeometry
 					// var planeGeometry = new THREE.PlaneGeometry(9, 16);
@@ -501,7 +507,14 @@
 				let _position = JSON.stringify(videoMesh.position);
 				return _position;
 			}
-			
+			function videoMeshChange(data = 50) {
+				if(!videoMesh){
+					return false
+				}
+				let sca = (data - 50)/50 + 1;
+				videoMesh.scale.x = sca
+				videoMesh.scale.y = sca
+			}
 			function stopRender() {
 				needRender = false;
 			}
@@ -513,7 +526,7 @@
 				needRender = true;
 				render(); //开始渲染
 			}
-
+			
 			function render() {
 				if (needRender == false) {
 					return false;
@@ -531,6 +544,9 @@
 
 		},
 		methods: {
+			rangeChange(e){
+				this.videoMeshChange(this.rangeValue)
+			},
 			navbarBackClk() {
 
 			},