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

完成手势位置识别

Browse Source 
等待校准坐标
This commit is contained in:
rucky 2021-12-28 19:24:55 +08:00
parent 5a4a777d03
commit f1545677c3
2 changed files with 543 additions and 473 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

882
src/components/color/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="c-shader" ref="container"></div> <div class="c-shader" ref="container"></div>
</template> </template>
<script> <script>
@ -18,493 +18,493 @@ import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js"; import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
export default { export default {
name: "color", name: "color",
props: { props: {
msg: String, msg: String,
}, },
data() { data() {
return { return {
remaining: 50, remaining: 50,
container: null, container: null,
camera: null, camera: null,
scene: null, scene: null,
renderer: null, renderer: null,
mouse: new THREE.Vector2(), mouse: new THREE.Vector2(),
raycaster: new THREE.Raycaster(), raycaster: new THREE.Raycaster(),
// gui: new GUI(), // gui: new GUI(),
ENTIRE_SCENE: 0, ENTIRE_SCENE: 0,
BLOOM_SCENE: 1, BLOOM_SCENE: 1,
materials: {}, materials: {},
params: { params: {
exposure: 1, exposure: 1,
bloomStrength: 5, bloomStrength: 5,
bloomThreshold: 0, bloomThreshold: 0,
bloomRadius: 0, bloomRadius: 0,
scene: "Scene with Glow", scene: "Scene with Glow",
}, },
}; };
}, },
created() {}, created() {},
mounted() { mounted() {
this.initStage(); this.initStage();
this.addAnimation(); this.addAnimation();
}, },
methods: { methods: {
initStage() { initStage() {
//基础参数 //基础参数
this.container = this.$refs.container; this.container = this.$refs.container;
this.camera = new THREE.Camera(); this.camera = new THREE.Camera();
this.camera.position.z = 1; this.camera.position.z = 1;
this.scene = new THREE.Scene(); this.scene = new THREE.Scene();
this.bloomLayer = new THREE.Layers(); this.bloomLayer = new THREE.Layers();
this.bloomLayer.set(this.BLOOM_SCENE); this.bloomLayer.set(this.BLOOM_SCENE);
this.darkMaterial = new THREE.MeshBasicMaterial({ color: "black" }); this.darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });
// 定义 webglrender // 定义 webglrender
this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.toneMapping = THREE.ReinhardToneMapping; this.renderer.toneMapping = THREE.ReinhardToneMapping;
if (!document.getElementById("webgl")) { if (!document.getElementById("webgl")) {
this.renderer.domElement.id = "webgl"; this.renderer.domElement.id = "webgl";
this.container.appendChild(this.renderer.domElement); this.container.appendChild(this.renderer.domElement);
} }
// 定义相机 // 定义相机
this.camera = new THREE.PerspectiveCamera( this.camera = new THREE.PerspectiveCamera(
40, 40,
window.innerWidth / window.innerHeight, window.innerWidth / window.innerHeight,
1, 1,
2000 2000
); );
this.camera.position.set( this.camera.position.set(
0, 0,
0, 0,
window.deviceInfo.device == "PC" ? 500 : 1000 window.deviceInfo.device == "PC" ? 500 : 1000
); );
this.camera.lookAt(0, 0, 0); this.camera.lookAt(0, 0, 0);
// 定义操控 // 定义操控
this.controls = new OrbitControls( this.controls = new OrbitControls(
this.camera, this.camera,
this.renderer.domElement this.renderer.domElement
); );
this.controls.maxPolarAngle = Math.PI * 0.5; this.controls.maxPolarAngle = Math.PI * 0.5;
this.controls.minDistance = 1; this.controls.minDistance = 1;
this.controls.maxDistance = 1500; this.controls.maxDistance = 1500;
this.controls.addEventListener("change", this.render); this.controls.addEventListener("change", this.render);
// 添加全局环境光 // 添加全局环境光
this.scene.add(new THREE.AmbientLight(0x404040)); this.scene.add(new THREE.AmbientLight(0x404040));
this.renderScene = new RenderPass(this.scene, this.camera); this.renderScene = new RenderPass(this.scene, this.camera);
this.bloomPass = new UnrealBloomPass( this.bloomPass = new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight), new THREE.Vector2(window.innerWidth, window.innerHeight),
1.5, 1.5,
0.4, 0.4,
0.85 0.85
); );
this.bloomPass.threshold = this.params.bloomThreshold; this.bloomPass.threshold = this.params.bloomThreshold;
this.bloomPass.strength = this.params.bloomStrength; this.bloomPass.strength = this.params.bloomStrength;
this.bloomPass.radius = this.params.bloomRadius; this.bloomPass.radius = this.params.bloomRadius;
this.bloomComposer = new EffectComposer(this.renderer); this.bloomComposer = new EffectComposer(this.renderer);
this.bloomComposer.renderToScreen = false; this.bloomComposer.renderToScreen = false;
this.bloomComposer.addPass(this.renderScene); this.bloomComposer.addPass(this.renderScene);
this.bloomComposer.addPass(this.bloomPass); this.bloomComposer.addPass(this.bloomPass);
this.finalPass = new ShaderPass( this.finalPass = new ShaderPass(
new THREE.ShaderMaterial({ new THREE.ShaderMaterial({
uniforms: { uniforms: {
baseTexture: { value: null }, baseTexture: { value: null },
bloomTexture: { bloomTexture: {
value: this.bloomComposer.renderTarget2.texture, value: this.bloomComposer.renderTarget2.texture,
}, },
}, },
vertexShader: colorVertex, vertexShader: colorVertex,
fragmentShader: colorFrag, fragmentShader: colorFrag,
defines: {}, defines: {},
}), }),
"baseTexture" "baseTexture"
); );
this.finalPass.needsSwap = true; this.finalPass.needsSwap = true;
this.finalComposer = new EffectComposer(this.renderer); this.finalComposer = new EffectComposer(this.renderer);
this.finalComposer.addPass(this.renderScene); this.finalComposer.addPass(this.renderScene);
this.finalComposer.addPass(this.finalPass); this.finalComposer.addPass(this.finalPass);
// 添加点击事件 // 添加点击事件
window.addEventListener("pointerdown", this.onPointerDown); window.addEventListener("pointerdown", this.onPointerDown);
// this.gui // this.gui
// .add(this.params, "scene", [ // .add(this.params, "scene", [
// "Scene with Glow", // "Scene with Glow",
// "Glow only", // "Glow only",
// "Scene only", // "Scene only",
// ]) // ])
// .onChange((value) => { // .onChange((value) => {
// switch (value) { // switch (value) {
// case "Scene with Glow": // case "Scene with Glow":
// this.bloomComposer.renderToScreen = false; // this.bloomComposer.renderToScreen = false;
// break; // break;
// case "Glow only": // case "Glow only":
// this.bloomComposer.renderToScreen = true; // this.bloomComposer.renderToScreen = true;
// break; // break;
// case "Scene only": // case "Scene only":
// // nothing to do // // nothing to do
// break; // break;
// } // }
// this.render(); // this.render();
// }); // });
// this.folder = this.gui.addFolder("Bloom Parameters"); // this.folder = this.gui.addFolder("Bloom Parameters");
// this.folder // this.folder
// .add(this.params, "exposure", 0.1, 2) // .add(this.params, "exposure", 0.1, 2)
// .onChange((value) => { // .onChange((value) => {
// this.renderer.toneMappingExposure = Math.pow(value, 4.0); // this.renderer.toneMappingExposure = Math.pow(value, 4.0);
// this.render(); // this.render();
// }); // });
// this.folder // this.folder
// .add(this.params, "bloomThreshold", 0.0, 1.0) // .add(this.params, "bloomThreshold", 0.0, 1.0)
// .onChange((value) => { // .onChange((value) => {
// this.bloomPass.threshold = Number(value); // this.bloomPass.threshold = Number(value);
// this.render(); // this.render();
// }); // });
// this.folder // this.folder
// .add(this.params, "bloomStrength", 0.0, 10.0) // .add(this.params, "bloomStrength", 0.0, 10.0)
// .onChange((value) => { // .onChange((value) => {
// this.bloomPass.strength = Number(value); // this.bloomPass.strength = Number(value);
// this.render(); // this.render();
// }); // });
// this.folder // this.folder
// .add(this.params, "bloomRadius", 0.0, 1.0) // .add(this.params, "bloomRadius", 0.0, 1.0)
// .step(0.01) // .step(0.01)
// .onChange((value) => { // .onChange((value) => {
// this.bloomPass.radius = Number(value); // this.bloomPass.radius = Number(value);
// this.render(); // this.render();
// }); // });
// 设置场景 // 设置场景
this.setupScene(); this.setupScene();
// 循环动画 // 循环动画
this.animate(); this.animate();
// 自动缩放 // 自动缩放
window.addEventListener("resize", this.onWindowResize); window.addEventListener("resize", this.onWindowResize);
this.onWindowResize(); this.onWindowResize();
}, },
onPointerDown(event) { onPointerDown(event) {
this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1; this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
this.raycaster.setFromCamera(this.mouse, this.camera); this.raycaster.setFromCamera(this.mouse, this.camera);
this.intersects = this.raycaster.intersectObjects( this.intersects = this.raycaster.intersectObjects(
this.group.children, this.group.children,
false false
); );
if (this.intersects.length > 0) { if (this.intersects.length > 0) {
const object = this.intersects[0].object; const object = this.intersects[0].object;
gsap.to(object.scale, { gsap.to(object.scale, {
x: 0, x: 0,
y: 0, y: 0,
z: 0, z: 0,
onUpdate: () => { onUpdate: () => {
this.render(); this.render();
}, },
}); });
object.layers.toggle(this.BLOOM_SCENE); object.layers.toggle(this.BLOOM_SCENE);
this.render(); this.render();
} }
}, },
onWindowResize(event) { onWindowResize(event) {
const width = window.innerWidth; const width = window.innerWidth;
const height = window.innerHeight; const height = window.innerHeight;
this.camera.aspect = width / height; this.camera.aspect = width / height;
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height); this.renderer.setSize(width, height);
this.bloomComposer.setSize(width, height); this.bloomComposer.setSize(width, height);
this.finalComposer.setSize(width, height); this.finalComposer.setSize(width, height);
this.render(); this.render();
}, },
setupScene() { setupScene() {
this.scene.traverse(this.disposeMaterial); this.scene.traverse(this.disposeMaterial);
this.scene.children.length = 0; this.scene.children.length = 0;
const geometry = new THREE.IcosahedronGeometry(1, 15); const geometry = new THREE.IcosahedronGeometry(1, 15);
this.group = new THREE.Group(); this.group = new THREE.Group();
for (let ii = 0; ii < 2; ii++) { for (let ii = 0; ii < 2; ii++) {
pos1024.origin.forEach((item, index) => { pos1024.origin.forEach((item, index) => {
item.forEach((t, i) => { item.forEach((t, i) => {
if (t == 0) { if (t == 0) {
const color = new THREE.Color(); const color = new THREE.Color();
color.setHSL( color.setHSL(
Math.random(), Math.random(),
0.7, 0.7,
Math.random() * 0.2 + 0.05 Math.random() * 0.2 + 0.05
); );
const material = new THREE.MeshBasicMaterial({ const material = new THREE.MeshBasicMaterial({
color: color, color: color,
}); });
const sphere = new THREE.Mesh(geometry, material); const sphere = new THREE.Mesh(geometry, material);
sphere.position.x = i * 10 - (item.length / 2) * 10; sphere.position.x = i * 10 - (item.length / 2) * 10;
sphere.position.y = sphere.position.y =
-index * 10 + (pos1024.origin.length / 2) * 10; -index * 10 + (pos1024.origin.length / 2) * 10;
sphere.position.z = ii * 5; sphere.position.z = ii * 5;
// sphere.position // sphere.position
// .normalize() // .normalize()
// .multiplyScalar(Math.random() * 4.0 + 2); // .multiplyScalar(Math.random() * 4.0 + 2);
sphere.scale.setScalar(Math.random() * 4 + 3); sphere.scale.setScalar(Math.random() * 4 + 3);
this.scene.add(sphere); this.scene.add(sphere);
// if (Math.random() < 0.25) // if (Math.random() < 0.25)
sphere.layers.enable(this.BLOOM_SCENE); sphere.layers.enable(this.BLOOM_SCENE);
this.group.add(sphere); this.group.add(sphere);
} }
}); });
}); });
} }
// for (let i = 0; i < this.remaining; i++) { // for (let i = 0; i < this.remaining; i++) {
// const color = new THREE.Color(); // const color = new THREE.Color();
// color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05); // color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);
// const material = new THREE.MeshBasicMaterial({ color: color }); // const material = new THREE.MeshBasicMaterial({ color: color });
// const sphere = new THREE.Mesh(geometry, material); // const sphere = new THREE.Mesh(geometry, material);
// sphere.position.x = Math.random() * 30 - 15; // sphere.position.x = Math.random() * 30 - 15;
// sphere.position.y = Math.random() * 30 - 15; // sphere.position.y = Math.random() * 30 - 15;
// sphere.position.z = Math.random() * 30 - 15; // sphere.position.z = Math.random() * 30 - 15;
// sphere.position // sphere.position
// .normalize() // .normalize()
// .multiplyScalar(Math.random() * 5.0 + 2.5); // .multiplyScalar(Math.random() * 5.0 + 2.5);
// sphere.scale.setScalar(Math.random() * Math.random() + 0.5); // sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
// this.scene.add(sphere); // this.scene.add(sphere);
// // if (Math.random() < 0.25) // // if (Math.random() < 0.25)
// sphere.layers.enable(this.BLOOM_SCENE); // sphere.layers.enable(this.BLOOM_SCENE);
// this.group.add(sphere); // this.group.add(sphere);
// } // }
this.scene.add(this.group); this.scene.add(this.group);
this.render(); this.render();
}, },
disposeMaterial(obj) { disposeMaterial(obj) {
if (obj.material) { if (obj.material) {
obj.material.dispose(); obj.material.dispose();
} }
}, },
animate() { animate() {
requestAnimationFrame(this.animate); requestAnimationFrame(this.animate);
this.render(); this.render();
}, },
render() { render() {
switch (this.params.scene) { switch (this.params.scene) {
case "Scene only": case "Scene only":
this.renderer.render(this.scene, this.camera); this.renderer.render(this.scene, this.camera);
break; break;
case "Glow only": case "Glow only":
this.renderBloom(false); this.renderBloom(false);
break; break;
case "Scene with Glow": case "Scene with Glow":
default: default:
// render scene with bloom // render scene with bloom
this.renderBloom(true); this.renderBloom(true);
// render the entire scene, then render bloom scene on top // render the entire scene, then render bloom scene on top
this.finalComposer.render(); this.finalComposer.render();
break; break;
} }
// this.renderer.render(this.scene, this.camera); // this.renderer.render(this.scene, this.camera);
}, },
renderBloom(mask) { renderBloom(mask) {
if (mask === true) { if (mask === true) {
this.scene.traverse(this.darkenNonBloomed); this.scene.traverse(this.darkenNonBloomed);
this.bloomComposer.render(); this.bloomComposer.render();
this.scene.traverse(this.restoreMaterial); this.scene.traverse(this.restoreMaterial);
} else { } else {
this.camera.layers.set(this.BLOOM_SCENE); this.camera.layers.set(this.BLOOM_SCENE);
this.bloomComposer.render(); this.bloomComposer.render();
this.camera.layers.set(this.ENTIRE_SCENE); this.camera.layers.set(this.ENTIRE_SCENE);
} }
}, },
darkenNonBloomed(obj) { darkenNonBloomed(obj) {
if (obj.isMesh && this.bloomLayer.test(obj.layers) === false) { if (obj.isMesh && this.bloomLayer.test(obj.layers) === false) {
this.materials[obj.uuid] = obj.material; this.materials[obj.uuid] = obj.material;
obj.material = this.darkMaterial; obj.material = this.darkMaterial;
} }
}, },
restoreMaterial(obj) { restoreMaterial(obj) {
if (this.materials[obj.uuid]) { if (this.materials[obj.uuid]) {
obj.material = this.materials[obj.uuid]; obj.material = this.materials[obj.uuid];
delete this.materials[obj.uuid]; delete this.materials[obj.uuid];
} }
}, },
addAnimation() { addAnimation() {
// 自旋转 // 自旋转
gsap.to(this.group.rotation, { gsap.to(this.group.rotation, {
y: -Math.PI * 2, y: -Math.PI * 2,
x: 0.1, x: 0.1,
duration: 5, duration: 5,
// yoyo: true, // yoyo: true,
// repeat: -1, // repeat: -1,
onUpdate: () => { onUpdate: () => {
// this.renderer.toneMappingExposure = Math.pow( // this.renderer.toneMappingExposure = Math.pow(
// this.params.exposure, // this.params.exposure,
// 4.0 // 4.0
// ); // );
// this.render(); // this.render();
// console.log(this.params.scene); // console.log(this.params.scene);
}, },
}); });
// 球体自动 // 球体自动
this.group.children.map((item, index) => { this.group.children.map((item, index) => {
gsap.to(item.scale, { gsap.to(item.scale, {
x: "+=.5", x: "+=.5",
y: "+=.5", y: "+=.5",
z: "+=.5", z: "+=.5",
stagger: 0.01, stagger: 0.01,
duration: 1, duration: 1,
ease: "none", ease: "none",
yoyoEase: "none", yoyoEase: "none",
yoyo: true, yoyo: true,
repeat: 10, repeat: 10,
}); });
let op = item.position; let op = item.position;
gsap.fromTo( gsap.fromTo(
item.position, item.position,
{ {
x: () => { x: () => {
return Math.random() * 100 - 50; return Math.random() * 100 - 50;
}, },
y: () => { y: () => {
return Math.random() * 100 - 50; return Math.random() * 100 - 50;
}, },
z: () => { z: () => {
return Math.random() * 100 - 20; return Math.random() * 100 - 20;
}, },
}, },
{ {
x: op.x, x: op.x,
y: op.y, y: op.y,
z: op.z, z: op.z,
duration: 5, duration: 5,
onUpdate: () => { onUpdate: () => {
// if (index == 1) this.render(); // if (index == 1) this.render();
}, },
} }
); );
}); });
setTimeout(() => { setTimeout(() => {
let iii = 0; let iii = 0;
for (let ii = 0; ii < 2; ii++) { for (let ii = 0; ii < 2; ii++) {
pos1024.ready.forEach((item, index) => { pos1024.ready.forEach((item, index) => {
item.forEach((t, i) => { item.forEach((t, i) => {
if (t == 0) { if (t == 0) {
let position = {}; let position = {};
position.x = i * 10 - (item.length / 2) * 10; position.x = i * 10 - (item.length / 2) * 10;
position.y = position.y =
-index * 10 + -index * 10 +
(pos1024.ready.length / 2) * 10; (pos1024.ready.length / 2) * 10;
position.z = ii * 10; position.z = ii * 10;
gsap.to(this.group.children[iii].position, { gsap.to(this.group.children[iii].position, {
x: position.x, x: position.x,
y: position.y, y: position.y,
z: position.z, z: position.z,
duration: 1, duration: 1,
}); });
iii++; iii++;
} }
}); });
}); });
} }
this.group.children.forEach((item, index) => { this.group.children.forEach((item, index) => {
if (index >= iii) { if (index >= iii) {
gsap.to(item.position, { gsap.to(item.position, {
x: 10000, x: 10000,
y: 10000, y: 10000,
z: 10000, z: 10000,
}); });
// gsap.to(item.scale, { x: 0, y: 0, z: 0 }); // gsap.to(item.scale, { x: 0, y: 0, z: 0 });
} else { } else {
gsap.to(item.position, { gsap.to(item.position, {
x: Math.random() * 1000 - 500, x: Math.random() * 1000 - 500,
y: Math.random() * 1000 - 500, y: Math.random() * 1000 - 500,
z: Math.random() * 1000, z: Math.random() * 1000,
duration: 2, duration: 2,
delay: 4, delay: 4,
}); });
gsap.to(item.scale, { gsap.to(item.scale, {
x: 0, x: 0,
y: 0, y: 0,
z: 0, z: 0,
duration: 2.5, duration: 2.5,
delay: 4, delay: 4,
}); });
} }
}); });
}, 6000); }, 6000);
// for (let ii = 0; ii < 2; ii++) { // for (let ii = 0; ii < 2; ii++) {
// } // }
if (window.deviceInfo.device !== "PC") { if (window.deviceInfo.device !== "PC") {
gsap.to(this.camera.position, { gsap.to(this.camera.position, {
z: 1200, z: 1200,
delay: 1, delay: 1,
}); });
gsap.to(this.camera.position, { gsap.to(this.camera.position, {
z: 1400, z: 1400,
delay: 6.5, delay: 6.5,
}); });
} }
// 光闪烁 // 光闪烁
// gsap.to(this.params, { // gsap.to(this.params, {
// exposure: 1.1, // exposure: 1.1,
// duration: 2, // duration: 2,
// yoyo: true, // yoyo: true,
// repeat: -1, // repeat: -1,
// onUpdate: () => { // onUpdate: () => {
// this.renderer.toneMappingExposure = Math.pow( // this.renderer.toneMappingExposure = Math.pow(
// this.params.exposure, // this.params.exposure,
// 4.0 // 4.0
// ); // );
// this.render(); // this.render();
// // console.log(this.params.scene); // // console.log(this.params.scene);
// }, // },
// }); // });
}, },
}, },
}; };
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"> <style scoped lang="less">
.c-shader { .c-shader {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: relative; position: relative;
z-index: 0; z-index: 0;
.select-btn { .select-btn {
// background-color: #fff; // background-color: #fff;
.paCenterBottom(2%,50%,auto,10); .paCenterBottom(2%,50%,auto,10);
} }
} }
</style> </style>

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

@ -41,7 +41,7 @@
</div> </div>
<!-- canvas --> <!-- canvas -->
<canvas class="canvas" ref="canvas"></canvas> <div class="canvas-container" ref="container"></div>
<!-- hand --> <!-- hand -->
<div <div
@ -88,10 +88,22 @@ export default {
this.video = this.$refs.myVideo; this.video = this.$refs.myVideo;
this.canvas = this.$refs.canvas; this.canvas = this.$refs.canvas;
this.initTHREELayer();
this.checkUserDeviceSuitable(); this.checkUserDeviceSuitable();
}, },
methods: { 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 // > 14.3 ios ok
checkUserDeviceSuitable() { checkUserDeviceSuitable() {
@ -271,14 +283,17 @@ export default {
this.videoRealSize = handledSize; this.videoRealSize = handledSize;
// 初始化three
this.initTHREELayer();
console.log("Got stream with constraints:", constraints); console.log("Got stream with constraints:", constraints);
console.log(`Using video device: ${videoTracks[0].label}`); console.log(`Using video device: ${videoTracks[0].label}`);
console.log("Got stream size:", videoTracks); console.log("Got stream size:", videoTracks);
console.log("Got stream size:", streamSize); console.log("Got stream size:", streamSize);
console.log( console.log(
"Got streamHandled size:", "Got streamHandled size:",
window.innerHeight window.innerHeight,
// handledSize handledSize
); );
this.video.srcObject = stream; this.video.srcObject = stream;
@ -296,10 +311,6 @@ export default {
responseVideoAndCanvas(size) { responseVideoAndCanvas(size) {
this.video.width = window.innerWidth; this.video.width = window.innerWidth;
this.video.height = window.innerHeight; this.video.height = window.innerHeight;
// init canvcas
this.ctx = this.canvas.getContext("2d");
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
}, },
// 获得stream大小 // 获得stream大小
GetStreamDimensions(stream) { GetStreamDimensions(stream) {
@ -396,7 +407,7 @@ export default {
cursorPos = this.ExponentialCoordinateAverage( cursorPos = this.ExponentialCoordinateAverage(
this.ComputeCursorPositionFromCoordinates(e.coordinates) this.ComputeCursorPositionFromCoordinates(e.coordinates)
); );
console.log(cursorPos); // console.log(cursorPos);
} }
// console.log(e.type); // 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) { ExponentialMovingAverage(value, alpha) {
if (this.curValue_ === undefined || this.curValue_ === null) { if (this.curValue_ === undefined || this.curValue_ === null) {
@ -482,21 +480,40 @@ export default {
}, },
// init THREELayer // init THREELayer
initTHREELayer() { 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 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({ this.renderer_ = new THREE.WebGLRenderer({
alpha: true, alpha: true,
powerPreference: "high-performance", powerPreference: "high-performance",
failIfMajorPerformanceCaveat: false, failIfMajorPerformanceCaveat: false,
antialias: true, antialias: true,
}); });
this.renderer_.domElement = this.canvas;
this.renderer_.debug.checkShaderErrors = false; this.renderer_.debug.checkShaderErrors = false;
this.renderer_.setSize( this.renderer_.setSize(
this.videoRealSize.width, this.videoRealSize.width,
@ -505,12 +522,60 @@ export default {
this.renderer_.setPixelRatio(window.devicePixelRatio); this.renderer_.setPixelRatio(window.devicePixelRatio);
this.renderer_.setClearColor(0x000000, 0.0); this.renderer_.setClearColor(0x000000, 0.0);
this.renderer_.autoClear = true; 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 // draw pointer
drawPoint(x, y) { drawPoint(x, y) {
if (!this.meshAdded) { if (!this.meshAdded) {
this.geo_ = new THREE.RingGeometry(0, 8, 30); this.geo_ = new THREE.RingGeometry(0, 10, 32);
this.mat_ = new THREE.MeshBasicMaterial({ this.mat_ = new THREE.MeshBasicMaterial({
color: "red", color: "red",
side: THREE.DoubleSide, side: THREE.DoubleSide,
@ -518,12 +583,17 @@ export default {
this.mesh_ = new THREE.Mesh(this.geo_, this.mat_); this.mesh_ = new THREE.Mesh(this.geo_, this.mat_);
this.scene_.add(this.mesh_); this.scene_.add(this.mesh_);
this.meshAdded = true; this.meshAdded = true;
console.log("three mesh added");
} }
this.mesh_.position.x = x * this.videoRealSize.width; this.mesh_.position.x = x * this.videoRealSize.width;
this.mesh_.position.y = y * this.videoRealSize.height; this.mesh_.position.y = y * this.videoRealSize.height;
this.mesh_.position.z = 0; this.mesh_.position.z = 0;
}, },
animate() {
requestAnimationFrame(this.animate);
this.Render();
},
// THREE canvas render // THREE canvas render
Render() { Render() {
this.renderer_.render(this.scene_, this.camera_); this.renderer_.render(this.scene_, this.camera_);
@ -604,7 +674,7 @@ export default {
} }
} }
} }
.canvas { .canvas-container {
.paLayout(50%,50%,auto,100%,100); .paLayout(50%,50%,auto,100%,100);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
pointer-events: none; pointer-events: none;