shaochangli/webglToy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

完成手部模型添加

Browse Source
This commit is contained in:
rucky 2021-12-29 17:19:17 +08:00
parent f1545677c3
commit 74249abc2e
4 changed files with 232 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/page/index/App.vue
View File

@ -11,6 +11,7 @@
<style>
#app {
height: 100%;
min-height: 100%;
}
</style>

257
src/page/index/HandTrack/index.vue
View File

@ -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,12 +606,74 @@ 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);
},
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);
}
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(x, y) {
if (!this.meshAdded) {
drawPoint() {
this.geo_ = new THREE.RingGeometry(0, 10, 32);
this.mat_ = new THREE.MeshBasicMaterial({
color: "red",
@ -584,11 +683,37 @@ export default {
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;
}
this.mesh_.position.x = x * this.videoRealSize.width;
this.mesh_.position.y = y * this.videoRealSize.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;

5
src/utils/plugins/stats-3d.js Normal file
View File

@ -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);

34
vue.config.js
View File

@ -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
// }]
// ]
// });
// }
},