完成手势位置识别

等待校准坐标

src/page/index/HandTrack/index.vue

@@ -41,7 +41,7 @@
 		</div>
 
 		<!-- canvas -->
-		<canvas class="canvas" ref="canvas"></canvas>
+		<div class="canvas-container" ref="container"></div>
 
 		<!-- hand -->
 		<div
@@ -88,10 +88,22 @@ export default {
 		this.video = this.$refs.myVideo;
 		this.canvas = this.$refs.canvas;
 
-		this.initTHREELayer();
 		this.checkUserDeviceSuitable();
 	},
 	methods: {
+		// 获取ios版本号
+		getIOSVersion() {
+			let str = navigator.userAgent.toLowerCase();
+			let ver = str.match(/cpu iphone os (.*?) like mac os/);
+			if (!ver) {
+				console.log("请在Ios系统中打开");
+			} else {
+				console.log(
+					"你当前的Ios系统版本为：" + ver[1].replace(/_/g, ".")
+				);
+				return ver[1].replace(/_/g, ".");
+			}
+		},
 		// 检测用户手机是否兼容
 		// > 14.3 ios ok
 		checkUserDeviceSuitable() {
@@ -271,14 +283,17 @@ export default {
 
 			this.videoRealSize = handledSize;
 
+			// 初始化three
+			this.initTHREELayer();
+
 			console.log("Got stream with constraints:", constraints);
 			console.log(`Using video device: ${videoTracks[0].label}`);
 			console.log("Got stream size:", videoTracks);
 			console.log("Got stream size:", streamSize);
 			console.log(
 				"Got streamHandled size:",
-				window.innerHeight
+				window.innerHeight,
-				// handledSize
+				handledSize
 			);
 
 			this.video.srcObject = stream;
@@ -296,10 +311,6 @@ export default {
 		responseVideoAndCanvas(size) {
 			this.video.width = window.innerWidth;
 			this.video.height = window.innerHeight;
-			// init canvcas
-			this.ctx = this.canvas.getContext("2d");
-			this.canvas.width = window.innerWidth;
-			this.canvas.height = window.innerHeight;
 		},
 		// 获得stream大小
 		GetStreamDimensions(stream) {
@@ -396,7 +407,7 @@ export default {
 					cursorPos = this.ExponentialCoordinateAverage(
 						this.ComputeCursorPositionFromCoordinates(e.coordinates)
 					);
-					console.log(cursorPos);
+					// console.log(cursorPos);
 				}
 
 				// console.log(e.type);
@@ -425,19 +436,6 @@ export default {
 				}
 			});
 		},
-		// 获取ios版本号
-		getIOSVersion() {
-			let str = navigator.userAgent.toLowerCase();
-			let ver = str.match(/cpu iphone os (.*?) like mac os/);
-			if (!ver) {
-				console.log("请在Ios系统中打开");
-			} else {
-				console.log(
-					"你当前的Ios系统版本为：" + ver[1].replace(/_/g, ".")
-				);
-				return ver[1].replace(/_/g, ".");
-			}
-		},
 		// 计算坐标值平均数
 		ExponentialMovingAverage(value, alpha) {
 			if (this.curValue_ === undefined || this.curValue_ === null) {
@@ -482,21 +480,40 @@ export default {
 		},
 		// init THREELayer
 		initTHREELayer() {
-			this.camera_ = new THREE.OrthographicCamera(
+			this.container = this.$refs.container;
-				0,
+			this.camera_ = new THREE.PerspectiveCamera(
-				this.videoRealSize.width,
+				45,
-				0,
+				window.innerWidth / window.innerHeight,
-				this.videoRealSize.height,
+				0.1,
-				0,
 				1000
 			);
+
+			// 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
+			// );
+
+			this.camera_.position.set(0, 0, 1000);
+			this.camera_.lookAt(0, 0, 0);
+
+			this.scene_ = new THREE.Scene();
+
 			this.renderer_ = new THREE.WebGLRenderer({
 				alpha: true,
 				powerPreference: "high-performance",
 				failIfMajorPerformanceCaveat: false,
 				antialias: true,
 			});
-			this.renderer_.domElement = this.canvas;
 			this.renderer_.debug.checkShaderErrors = false;
 			this.renderer_.setSize(
 				this.videoRealSize.width,
@@ -505,12 +522,60 @@ export default {
 			this.renderer_.setPixelRatio(window.devicePixelRatio);
 			this.renderer_.setClearColor(0x000000, 0.0);
 			this.renderer_.autoClear = true;
-			this.scene_ = new THREE.Scene();
+			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.animate();
+			this.onWindowResize();
+			window.addEventListener(
+				"resize",
+				() => {
+					this.onWindowResize();
+				},
+				false
+			);
+		},
+		onWindowResize(event) {
+			this.camera_.aspect = window.innerWidth / window.innerHeight;
+			this.camera_.updateProjectionMatrix();
+			this.renderer_.setSize(window.innerWidth, window.innerHeight);
+		},
+		addTestBall() {
+			//light
+			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.group3D = new THREE.Object3D();
+			//放入些mesh做实验
+			var material = new THREE.MeshLambertMaterial({
+				color: "#2194ce",
+			});
+			// var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
+			var geo2 = new THREE.SphereGeometry(40, 40, 40);
+			for (var i = 0; i < 50; i++) {
+				var spr = new THREE.Mesh(geo2, material);
+				spr.position.set(
+					Math.random() * 800 - 400,
+					Math.random() * 800 - 400,
+					Math.random() * 800 - 400
+				);
+				this.group3D.add(spr);
+			}
+
+			this.scene_.add(this.group3D);
+
+			this.ambientLight = new THREE.AmbientLight(0x8a7e7e, 0.2);
+			this.scene_.add(this.ambientLight);
 		},
 		// draw pointer
 		drawPoint(x, y) {
 			if (!this.meshAdded) {
-				this.geo_ = new THREE.RingGeometry(0, 8, 30);
+				this.geo_ = new THREE.RingGeometry(0, 10, 32);
 				this.mat_ = new THREE.MeshBasicMaterial({
 					color: "red",
 					side: THREE.DoubleSide,
@@ -518,12 +583,17 @@ export default {
 				this.mesh_ = new THREE.Mesh(this.geo_, this.mat_);
 				this.scene_.add(this.mesh_);
 				this.meshAdded = true;
+				console.log("three mesh added");
 			}
 
 			this.mesh_.position.x = x * this.videoRealSize.width;
 			this.mesh_.position.y = y * this.videoRealSize.height;
 			this.mesh_.position.z = 0;
 		},
+		animate() {
+			requestAnimationFrame(this.animate);
+			this.Render();
+		},
 		// THREE canvas render
 		Render() {
 			this.renderer_.render(this.scene_, this.camera_);
@@ -604,7 +674,7 @@ export default {
 			}
 		}
 	}
-	.canvas {
+	.canvas-container {
 		.paLayout(50%,50%,auto,100%,100);
 		transform: translate(-50%, -50%);
 		pointer-events: none;