完成手势位置识别
等待校准坐标
This commit is contained in:
rucky
parent
5a4a777d03
commit
f1545677c3
@ -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
|
||||
// handledSize
|
||||
window.innerHeight,
|
||||
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(
|
||||
0,
|
||||
this.videoRealSize.width,
|
||||
0,
|
||||
this.videoRealSize.height,
|
||||
0,
|
||||
this.container = this.$refs.container;
|
||||
this.camera_ = new THREE.PerspectiveCamera(
|
||||
45,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.1,
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user