From 74249abc2ea251aabee70b113c91b416d85aa75f Mon Sep 17 00:00:00 2001
From: rucky <scl22@qq.com>
Date: Wed, 29 Dec 2021 17:19:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=89=8B=E9=83=A8=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/index/App.vue             |   1 +
 src/page/index/HandTrack/index.vue | 277 ++++++++++++++++++++++-------
 src/utils/plugins/stats-3d.js      |   5 +
 vue.config.js                      |  34 ++--
 4 files changed, 232 insertions(+), 85 deletions(-)
 create mode 100644 src/utils/plugins/stats-3d.js

diff --git a/src/page/index/App.vue b/src/page/index/App.vue
index 7b7e8ab..8b795ee 100644
--- a/src/page/index/App.vue
+++ b/src/page/index/App.vue
@@ -11,6 +11,7 @@
 
 <style>
 #app {
+	height: 100%;
 	min-height: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/src/page/index/HandTrack/index.vue b/src/page/index/HandTrack/index.vue
index 85a997c..2c7d889 100644
--- a/src/page/index/HandTrack/index.vue
+++ b/src/page/index/HandTrack/index.vue
@@ -3,8 +3,7 @@
 		<video
 			id="gum-local"
 			class="video"
-			width="100%"
-			height="100%"
+			:class="{ flip: pcDevice }"
 			autoplay
 			playsinline
 			webkit-playsinline
@@ -20,7 +19,7 @@
 			ref="showVideoBtn"
 			@click="initVideo($event)"
 		>
-			开启
+			点击开始探索
 		</button>
 
 		<!-- info -->
@@ -29,7 +28,7 @@
 				当前进度: {{ progressText }}..
 			</div>
 			<div class="status">
-				当前手势: <span>{{ handStatus }}</span>
+				<span>{{ handStatus }}</span> :当前手势
 			</div>
 		</div>
 
@@ -60,6 +59,7 @@
 <script>
 // @ is an alias to /src
 import gsap from "gsap";
+import Stats from "stats";
 import {
 	IEngine,
 	Load,
@@ -82,6 +82,12 @@ export default {
 			handStatus: "未检测到手",
 			handStep: 1,
 			meshAdded: false,
+			pcDevice: false, // pc设备
+			lineConfig: {
+				segments: 10000,
+				r: 800,
+				t: 0,
+			},
 		};
 	},
 	mounted() {
@@ -231,6 +237,9 @@ export default {
 				});
 			}
 			console.log("devices source:", source);
+			if (source.length < 2 && window.deviceInfo.device === "PC") {
+				this.pcDevice = true;
+			}
 			return source[source.length - 1].deviceId;
 		},
 		// 初始化 video
@@ -284,7 +293,7 @@ export default {
 			this.videoRealSize = handledSize;
 
 			// 初始化three
-			this.initTHREELayer();
+			this.initTHREELayer(streamSize);
 
 			console.log("Got stream with constraints:", constraints);
 			console.log(`Using video device: ${videoTracks[0].label}`);
@@ -369,20 +378,20 @@ export default {
 			this.progressText = "引擎准备中…";
 			this.engine.Configure({
 				// Webcam video is usually flipped so we want the coordinates to be flipped as well.
-				flipX: false,
+				flipX: this.pcDevice ? true : false,
 				// Crop away a small area at the border to prevent the user to move out of view
 				// when reaching for border areas on the canvas.
 				padding: this.BORDER_PADDING_FACTOR,
 			});
 
-			this.engine.SetUpCustomTrackSource(this.video);
-			// await this.engine.SetUpCameraTrackSource();
-
 			// ios需要预热
 			if (window.deviceInfo.system === "IOS") {
 				await this.engine.Warmup();
 			}
 
+			this.engine.SetUpCustomTrackSource(this.video);
+			// await this.engine.SetUpCameraTrackSource();
+
 			this.progressText = "引擎已就绪";
 			gsap.to([this.$refs.progress, this.$refs.progressBar], {
 				autoAlpha: 0,
@@ -413,18 +422,33 @@ export default {
 				// console.log(e.type);
 
 				if (e.type === EventEnum.RESULT) {
-					this.drawPoint(cursorPos[0], cursorPos[1]);
-					this.Render();
 					if (e.poses.fist) {
 						this.handStatus = "握拳";
+						this.hideAll();
 						if (this.handStep == 1) {
 							this.handStep++;
 						}
 						// document.getElementById("status").innerText = "握拳";
 					} else if (e.poses.pinch) {
 						this.handStatus = "捏合";
+						if (this.handStep > 2) {
+							this.updatePosition(
+								cursorPos[0],
+								cursorPos[1],
+								0.1
+							);
+							this.Render();
+						}
 					} else {
 						this.handStatus = "张开";
+						if (this.handStep > 2) {
+							this.updatePosition(
+								cursorPos[0],
+								cursorPos[1],
+								cursorPos[3]
+							);
+							this.Render();
+						}
 						if (this.handStep == 2) {
 							this.handStep++;
 						}
@@ -432,6 +456,8 @@ export default {
 					}
 				} else if (e.type === EventEnum.LOST) {
 					this.handStatus = "未检测到手";
+
+					this.hideAll();
 					// document.getElementById("status").innerText = "未检测到手";
 				}
 			});
@@ -479,32 +505,36 @@ export default {
 			}
 		},
 		// init THREELayer
-		initTHREELayer() {
+		initTHREELayer(size) {
 			this.container = this.$refs.container;
 			this.camera_ = new THREE.PerspectiveCamera(
 				45,
-				window.innerWidth / window.innerHeight,
+				this.video.width / this.video.height,
 				0.1,
-				1000
+				1500
 			);
 
-			// const distance =
-			// 	this.videoRealSize.height /
-			// 	(2 * Math.tan((this.camera_.fov * Math.PI) / 360));
-			// this.camera_.up.set(0, -1, 0);
-			// this.camera_.position.set(
-			// 	this.videoRealSize.width / 2,
-			// 	this.videoRealSize.height / 2,
-			// 	-distance
-			// );
-			// this.camera_.lookAt(
-			// 	this.videoRealSize.width,
-			// 	this.videoRealSize.height / 2,
-			// 	0
+			const distance =
+				this.video.width /
+				(2 * Math.tan((this.camera_.fov * Math.PI) / 360));
+			this.camera_.up.set(0, -1, 0);
+			this.camera_.position.set(
+				this.video.width / 2,
+				this.video.height / 2,
+				-distance
+			);
+			this.camera_.lookAt(this.video.width / 2, this.video.height / 2, 0);
+
+			// this.camera_ = new THREE.OrthographicCamera(
+			// 	0,
+			// 	this.video.width,
+			// 	0,
+			// 	this.video.height,
+			// 	0,
+			// 	1500
 			// );
 
-			this.camera_.position.set(0, 0, 1000);
-			this.camera_.lookAt(0, 0, 0);
+			this.clock = new THREE.Clock();
 
 			this.scene_ = new THREE.Scene();
 
@@ -514,28 +544,24 @@ export default {
 				failIfMajorPerformanceCaveat: false,
 				antialias: true,
 			});
+			// console.log(this.video.width, this.video.height);
 			this.renderer_.debug.checkShaderErrors = false;
-			this.renderer_.setSize(
-				this.videoRealSize.width,
-				this.videoRealSize.height
-			);
+			this.renderer_.setSize(window.innerWidth, window.innerHeight);
 			this.renderer_.setPixelRatio(window.devicePixelRatio);
 			this.renderer_.setClearColor(0x000000, 0.0);
 			this.renderer_.autoClear = true;
 			this.renderer_.domElement.id = "canvas";
 			this.container.appendChild(this.renderer_.domElement);
-			this.renderer_.domElement.width = this.video.width;
-			this.renderer_.domElement.height = this.video.height;
+			// this.renderer_.domElement.width = this.video.width;
+			// this.renderer_.domElement.height = this.video.height;
+
+			// add stats dom
+			this.stats = new Stats();
+			this.container.appendChild(this.stats.dom);
 
 			// this.animate();
-			this.onWindowResize();
-			window.addEventListener(
-				"resize",
-				() => {
-					this.onWindowResize();
-				},
-				false
-			);
+			// this.drawPoint();
+			this.addLineBox();
 		},
 		onWindowResize(event) {
 			this.camera_.aspect = window.innerWidth / window.innerHeight;
@@ -544,13 +570,24 @@ export default {
 		},
 		addTestBall() {
 			//light
+			let mainLight = new THREE.HemisphereLight(0xffffff, 0x444444);
+			mainLight.position.set(0, 200, 0);
 			var light = new THREE.DirectionalLight(0xffffff);
 			var light2 = new THREE.DirectionalLight(0xffffff);
 			light.position.set(200, 0, 200);
 			light2.position.set(-200, 0, 200);
 			this.scene_.add(light);
+			this.scene_.add(light2);
+			this.scene_.add(mainLight);
 
 			this.group3D = new THREE.Object3D();
+
+			gsap.to(this.group3D.rotation, {
+				y: Math.PI * 2,
+				repeat: -1,
+				duration: 5,
+				ease: "none",
+			});
 			//放入些mesh做实验
 			var material = new THREE.MeshLambertMaterial({
 				color: "#2194ce",
@@ -569,26 +606,114 @@ export default {
 
 			this.scene_.add(this.group3D);
 
-			this.ambientLight = new THREE.AmbientLight(0x8a7e7e, 0.2);
+			this.ambientLight = new THREE.AmbientLight(0x8a7e7e, 0.5);
 			this.scene_.add(this.ambientLight);
 		},
-		// draw pointer
-		drawPoint(x, y) {
-			if (!this.meshAdded) {
-				this.geo_ = new THREE.RingGeometry(0, 10, 32);
-				this.mat_ = new THREE.MeshBasicMaterial({
-					color: "red",
-					side: THREE.DoubleSide,
-				});
-				this.mesh_ = new THREE.Mesh(this.geo_, this.mat_);
-				this.scene_.add(this.mesh_);
-				this.meshAdded = true;
-				console.log("three mesh added");
+		addLineBox() {
+			const geometry = new THREE.BufferGeometry();
+			const material = new THREE.LineBasicMaterial({
+				vertexColors: true,
+				opacity: 0.5,
+			});
+
+			const positions = [];
+			const colors = [];
+			const r = this.lineConfig.r;
+
+			for (let i = 0; i < this.lineConfig.segments; i++) {
+				const x = Math.random() * r - r / 2;
+				const y = Math.random() * r - r / 2;
+				const z = Math.random() * r - r / 2;
+
+				// positions
+
+				positions.push(x, y, z);
+
+				// colors
+
+				colors.push(x / r + 0.5);
+				colors.push(y / r + 0.5);
+				colors.push(z / r + 0.5);
 			}
 
-			this.mesh_.position.x = x * this.videoRealSize.width;
-			this.mesh_.position.y = y * this.videoRealSize.height;
-			this.mesh_.position.z = 0;
+			geometry.setAttribute(
+				"position",
+				new THREE.Float32BufferAttribute(positions, 3)
+			);
+			geometry.setAttribute(
+				"color",
+				new THREE.Float32BufferAttribute(colors, 3)
+			);
+			this.generateMorphTargets(geometry);
+
+			geometry.computeBoundingSphere();
+
+			this.lineBox = new THREE.Line(geometry, material);
+			this.scene_.add(this.lineBox);
+
+			this.lineBox.scale.x = 0.15;
+			this.lineBox.scale.y = 0.15;
+			this.lineBox.scale.z = 0.15;
+		},
+		generateMorphTargets(geometry) {
+			const data = [];
+			const r = this.lineConfig.r;
+
+			for (let i = 0; i < this.lineConfig.segments; i++) {
+				const x = Math.random() * r - r / 2;
+				const y = Math.random() * r - r / 2;
+				const z = Math.random() * r - r / 2;
+
+				data.push(x, y, z);
+			}
+
+			const morphTarget = new THREE.Float32BufferAttribute(data, 3);
+			morphTarget.name = "target1";
+
+			geometry.morphAttributes.position = [morphTarget];
+		},
+		// draw pointer
+		drawPoint() {
+			this.geo_ = new THREE.RingGeometry(0, 10, 32);
+			this.mat_ = new THREE.MeshBasicMaterial({
+				color: "red",
+				side: THREE.DoubleSide,
+			});
+			this.mesh_ = new THREE.Mesh(this.geo_, this.mat_);
+			this.scene_.add(this.mesh_);
+			this.meshAdded = true;
+			console.log("three mesh added");
+		},
+		// 更新场景内元素的位置
+		updatePosition(x, y, scale) {
+			gsap.to(this.renderer_.domElement, { autoAlpha: 1 });
+
+			if (this.mesh_) {
+				this.mesh_.position.x = x * this.video.width;
+				this.mesh_.position.y = y * this.video.height;
+				this.mesh_.position.z = 0;
+			}
+
+			if (this.group3D) {
+				this.group3D.position.x = x * this.video.width;
+				this.group3D.position.y = y * this.video.height;
+				this.group3D.position.z = 0;
+			}
+			if (this.lineBox) {
+				this.lineBox.position.x = x * this.video.width;
+				this.lineBox.position.y = y * this.video.height;
+				this.lineBox.position.z = 100;
+			}
+
+			if (scale) {
+				gsap.to(this.lineBox.scale, { x: scale, y: scale, z: scale });
+			} else {
+				gsap.to(this.lineBox.scale, { x: 0.15, y: 0.15, z: 0.15 });
+			}
+		},
+		// hide all
+		hideAll() {
+			gsap.to(this.renderer_.domElement, { autoAlpha: 0 });
 		},
 		animate() {
 			requestAnimationFrame(this.animate);
@@ -596,7 +721,20 @@ export default {
 		},
 		// THREE canvas render
 		Render() {
+			this.stats.update();
 			this.renderer_.render(this.scene_, this.camera_);
+			if (this.lineBox) {
+				const delta = this.clock.getDelta();
+				const time = this.clock.getElapsedTime();
+
+				this.lineBox.rotation.x = time * 0.25;
+				this.lineBox.rotation.y = time * 0.5;
+
+				this.lineConfig.t += delta * 0.5;
+				this.lineBox.morphTargetInfluences[0] = Math.abs(
+					Math.sin(this.lineConfig.t)
+				);
+			}
 		},
 	},
 };
@@ -604,7 +742,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
 .hand-track {
-	.prLayout(100%,100vh);
+	.prLayout(100%,100%);
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -614,24 +752,25 @@ export default {
 	.video {
 		.paLayout(50%,50%,auto,100%,0);
 		transform: translate(-50%, -50%);
-		// transform: scaleX(-1);
 		// width: 750px;
 		display: none;
 		// height: 700px;
+		&.flip {
+			transform: translate(-50%, -50%) scaleX(-1);
+		}
 	}
 	.info-dialog {
 		visibility: hidden;
-		.paLayout(0,0, 50%,130px,2);
+		.paRightLayout(0,0, 50%,130px,2);
 		background-color: rgba(255, 255, 255, 0.25);
-		border-radius: 0 0 30px 0;
+		border-radius: 0 0 0 30px;
 		padding: 20px;
 		font-size: 28px;
 		display: flex;
 		flex-direction: column;
 		align-content: center;
 		align-items: center;
-		text-align: left;
-		text-indent: 10px;
+		text-align: center;
 		justify-content: center;
 		div {
 			width: 100%;
@@ -675,10 +814,10 @@ export default {
 		}
 	}
 	.canvas-container {
-		.paLayout(50%,50%,auto,100%,100);
+		.paLayout(50%,50%,auto,auto,100);
 		transform: translate(-50%, -50%);
-		pointer-events: none;
-		background-color: rgba(255, 255, 255, 0.1);
+		// pointer-events: none;
+		// background-color: rgba(255, 255, 255, 0.1);
 	}
 	.btn {
 		.paCenterBottom(50%,280px,80px,2);
@@ -687,6 +826,8 @@ export default {
 		text-align: center;
 		border-radius: 8px;
 		font-size: 25px;
+		background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
+		color: #fff;
 	}
 	.progress-bar {
 		visibility: hidden;
diff --git a/src/utils/plugins/stats-3d.js b/src/utils/plugins/stats-3d.js
new file mode 100644
index 0000000..ef000cf
--- /dev/null
+++ b/src/utils/plugins/stats-3d.js
@@ -0,0 +1,5 @@
+// stats.js - http://github.com/mrdoob/stats.js
+var Stats=function(){function h(a){c.appendChild(a.dom);return a}function k(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();k(++l%c.children.length)},!1);var g=(performance||Date).now(),e=g,a=0,r=h(new Stats.Panel("FPS","#0ff","#002")),f=h(new Stats.Panel("MS","#0f0","#020"));
+if(self.performance&&self.performance.memory)var t=h(new Stats.Panel("MB","#f08","#201"));k(0);return{REVISION:16,dom:c,addPanel:h,showPanel:k,begin:function(){g=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();f.update(c-g,200);if(c>e+1E3&&(r.update(1E3*a/(c-e),100),e=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){g=this.end()},domElement:c,setMode:k}};
+Stats.Panel=function(h,k,l){var c=Infinity,g=0,e=Math.round,a=e(window.devicePixelRatio||1),r=80*a,f=48*a,t=3*a,u=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=f;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,f);b.fillStyle=k;b.fillText(h,t,u);b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(f,
+v){c=Math.min(c,f);g=Math.max(g,f);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=k;b.fillText(e(f)+" "+h+" ("+e(c)+"-"+e(g)+")",t,u);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,e((1-f/v)*p))}}};"object"===typeof module&&(module.exports=Stats);
diff --git a/vue.config.js b/vue.config.js
index 43a0d29..38f76cb 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -42,29 +42,29 @@ module.exports = {
 
         config.resolve.alias
             .set("@", resolve("src"))
-            .set("weui", resolve("src/utils/plugins/weui.js"))
-        // .set("assets", resolve("src/assets"))
+            // .set("weui", resolve("src/utils/plugins/weui.js"))
+            .set("stats", resolve("src/utils/plugins/stats-3d.js"))
         // .set("components", resolve("src/components"))
         // .set("views", resolve("src/views"))
         // .set("base", resolve("baseConfig"))
         // .set("public", resolve("public"));
 
         // if (process.env.NODE_ENV !== "test") {
-        config.module.rule('compile')
-            .test(/\.js$/)
-            .include
-            .add(resolve('src'))
-            .add(resolve('node_modules'))
-            .end()
-            .use('babel')
-            .loader('babel-loader')
-            .options({
-                presets: [
-                    ['@babel/preset-env', {
-                        modules: false
-                    }]
-                ]
-            });
+        // config.module.rule('compile')
+        //     .test(/\.js$/)
+        //     .include
+        //     .add(resolve('src'))
+        //     .add(resolve('node_modules'))
+        //     .end()
+        //     .use('babel')
+        //     .loader('babel-loader')
+        //     .options({
+        //         presets: [
+        //             ['@babel/preset-env', {
+        //                 modules: false
+        //             }]
+        //         ]
+        //     });
         // }
 
     },