{"version":3,"sources":["resources/logo.png","Glasses.js","FacePoints.js","resources/cirlce.png","resources/red.png","resources/silver.png","resources/black.png","Scoller.js","App.js","index.js"],"names":["Glasses","position","rotation","scale","faceModel","glassesColor","hatChoice","console","log","env","org","token","fallback","id","configuration","attach","args","color","opacity","depthWrite","CameraController","useThree","camera","gl","useEffect","controls","OrbitControls","domElement","minDistance","maxDistance","dispose","ResizeHandler","aspect","left","right","top","bottom","updateProjectionMatrix","ResetCamera","set","Math","PI","zoom","HandPoints","faceData","message","convertPoseToWorld","pose","Vector3","x","y","z","verticies","prevPoints","useRef","faceVerticies","leftEar","nose","rightEar","current","leftEarToRightEar","subVectors","noseToLeftEar","normalize","yAxis","clone","cross","xAxis","zAxis","rotationMatrix","Matrix4","makeBasis","rotationEuler","Euler","setFromRotationMatrix","distance","length","worldZAxis","angle","angleTo","showGlasses","Scroller","setGlassesColor","useState","swiperIndex","setSwiperIndex","swiper","setSwiper","style","maxWidth","width","marginLeft","transform","zIndex","spaceBetween","centeredSlides","slidesPerView","onSlideChange","activeIndex","handleSlideChange","onSwiper","slideTo","initSwiper","onClick","src","iconOne","iconTwo","iconThree","height","videoWidth","videoHeight","videoConstraints","facingMode","isMirrored","App","splashScreen","setSplashScreen","prediction","setPrediction","webcamRef","offScreenCanvasRef","displayCanvasRef","croppedCanvasRef","videoAspect","face","useMemo","MediaPipeFace","locateFile","file","setOptions","minDetectionConfidence","minTrackingConfidence","maxNumFaces","refineLandmarks","onResults","sendToFace","video","offScreenCtx","getContext","croppedCanvas","croppedCanvasCtx","drawImage","send","image","undefined","offscreenCanvas","displayCtx","setTimeout","className","logo","alt","ref","onUserMedia","display","window","innerHeight","onCreated","lookAt","orthographic","near","far","Environment","background","files","path","intensity","multiFaceLandmarks","URLSearchParams","location","search","get","render","document","getElementById"],"mappings":"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","file":"static/js/main.61c185d6.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/logo.c48f9f36.png\";","import { Suspense } from \"react\";\nimport { Asset, ThreekitSource } from '@threekit/lignin';\n\nexport default function Glasses({ position, rotation, scale, faceModel, glassesColor, hatChoice }) {\n console.log(\"%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%\", glassesColor)\n return (\n \n \n \n \n {glassesColor === 1 &&\n\n }\n {glassesColor === 2 &&\n\n }\n {glassesColor === 3 &&\n\n }\n \n \n \n\n {faceModel && \n \n \n }\n \n );\n}\n","import Glasses from \"./Glasses.js\";\nimport React, { useEffect, useState, useMemo, useRef } from \"react\";\nimport { useThree } from \"@react-three/fiber\";\n\nimport Point from \"./Point.js\";\nimport { Suspense } from \"react\";\nimport { Text } from \"@react-three/drei\";\nimport { Euler, Vector3, Matrix3, Matrix4 } from \"three\";\nimport { OrbitControls } from \"three/examples/jsm/controls/OrbitControls\";\nimport Hat from \"./Hat.js\"\n\nconst CameraController = () => {\n const { camera, gl } = useThree();\n useEffect(\n () => {\n\n const controls = new OrbitControls(camera, gl.domElement);\n\n controls.minDistance = 3;\n controls.maxDistance = 20;\n return () => {\n controls.dispose();\n };\n },\n [camera, gl]\n );\n return null;\n};\n\nconst LEFT_EAR_INDEX = 162;\nconst RIGHT_EAR_INDEX = 389;\nconst NOSE_INDEX = 8;\nconst FOREHEAD_INDEX = 10;\n\nconst ResizeHandler = ({ aspect }) => {\n const { camera } = useThree();\n camera.left = -0.5 * aspect;\n camera.right = 0.5 * aspect;\n camera.top = 0.5;\n camera.bottom = -0.5;\n camera.updateProjectionMatrix();\n\n return null;\n}\n\nconst ResetCamera = () => {\n const { camera } = useThree();\n\n useEffect(\n () => {\n camera.position.set(0, 0, -0.5);\n camera.rotation.set(Math.PI, 0, Math.PI);\n camera.zoom = 1;\n camera.updateProjectionMatrix();\n },\n [camera]\n );\n return null;\n}\n\nexport default function HandPoints({ faceData, aspect, glassesColor, message }) {\n function convertPoseToWorld(pose) {\n return new Vector3(-1 * pose.x + 0.5, -1 * pose.y + 0.5, pose.z)\n }\n\n function keyPointsFromVerticies(verticies) {\n const leftEar = convertPoseToWorld(verticies[LEFT_EAR_INDEX]);\n const nose = convertPoseToWorld(verticies[NOSE_INDEX]);\n const rightEar = convertPoseToWorld(verticies[RIGHT_EAR_INDEX]);\n return [leftEar, nose, rightEar]\n }\n\n const prevPoints = useRef([new Vector3(0, 0, 0), new Vector3(0, 0, 0), new Vector3(0, 0, 0)]);\n\n\n if (faceData) {\n const faceVerticies = faceData[0];\n\n\n if (faceVerticies) {\n\n const [currentLeftEar, currentNose, currentRightEar] = keyPointsFromVerticies(faceVerticies);\n let [leftEar, nose, rightEar] = [currentLeftEar, currentNose, currentRightEar];\n const [prevLeftEar, prevNose, PrevRightEar] = prevPoints.current;\n const foreHead = convertPoseToWorld(faceVerticies[FOREHEAD_INDEX]);\n\n // if (currentNose.distanceTo(prevNose) < 0.0035){\n // [leftEar, nose, rightEar] = [\n // new Vector3().addVectors(currentLeftEar.multiplyScalar(0.01), prevLeftEar.multiplyScalar(0.99)), \n // new Vector3().addVectors(currentNose.multiplyScalar(0.01), prevNose.multiplyScalar(0.99)), \n // new Vector3().addVectors(currentRightEar.multiplyScalar(0.01), PrevRightEar.multiplyScalar(0.99))]\n // }\n prevPoints.current = [leftEar, nose, rightEar];\n\n const leftEarToRightEar = new Vector3().subVectors(rightEar, leftEar);\n const noseToLeftEar = new Vector3().subVectors(leftEar, nose).normalize();\n const noseToRightEar = new Vector3().subVectors(rightEar, nose).normalize();\n const yAxis = noseToRightEar.clone().cross(noseToLeftEar);\n\n const xAxis = leftEarToRightEar.clone().normalize();\n\n const zAxis = xAxis.clone().cross(yAxis);\n\n const rotationMatrix = new Matrix4().makeBasis(xAxis, yAxis, zAxis);\n const rotationEuler = new Euler().setFromRotationMatrix(rotationMatrix);\n const distance = leftEarToRightEar.length();\n\n // const zOnXZ = zAxis.clone().projectOnPlane(new Vector3(0, 1, 0))\n const worldZAxis = new Vector3(0, 0, -1)\n // const turnAngle = (zOnXZ.angleTo(worldZAxis) * 180 / Math.PI)\n // const zOnXY= zAxis.clone().projectOnPlane(new Vector3(1, 0, 0))\n // const tiltAngle = (zOnXY.angleTo(worldZAxis) * 180 / Math.PI)\n const angle = zAxis.angleTo(worldZAxis) * 180 / Math.PI\n\n\n let showGlasses = true;\n message.current = \"\"\n if (angle > 30) {\n showGlasses = false;\n message.current = \"Look At Camera\"\n }\n\n return (\n \n {/* {faceData[0].map((landmark, index) => (\n \n \n \n {index}\n \n \n ))} */}\n\n {/* \n \n \n \n \n */}\n\n \n {showGlasses && \n \n {/* */}\n }\n\n {!showGlasses && \n {/* */}\n }\n \n \n );\n } else {\n message.current = \"Look At Camera\"\n return (\n \n \n \n {/* */}\n \n \n \n );\n }\n } else {\n return null;\n }\n}\n","export default \"data:image/png;base64,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\"","export default __webpack_public_path__ + \"static/media/red.00b0f4f8.png\";","export default __webpack_public_path__ + \"static/media/silver.79e7f72e.png\";","export default __webpack_public_path__ + \"static/media/black.bb1691e8.png\";","import circle from \"./resources/cirlce.png\";\nimport { useState, useEffect } from \"react\";\nimport { Swiper, SwiperSlide } from \"swiper/react\";\nimport 'swiper/swiper-bundle.min.css'\nimport 'swiper/swiper.min.css'\n\nimport iconOne from \"./resources/red.png\";\nimport iconTwo from \"./resources/silver.png\";\nimport iconThree from \"./resources/black.png\";\n\n\n\nexport default function Scroller({ setGlassesColor }) {\n const [swiperIndex, setSwiperIndex] = useState(1);\n const [swiper, setSwiper] = useState();\n\n function handleSlideChange(swiper) {\n setSwiperIndex(swiper.activeIndex);\n }\n\n useEffect(() => {\n\n if (swiperIndex === 0) { setGlassesColor(1) }\n else if (swiperIndex === 1) { setGlassesColor(2) }\n else if (swiperIndex === 2) { setGlassesColor(3) }\n else if (swiperIndex === 3) { setGlassesColor(4) }\n\n\n }, [swiperIndex])\n\n function initSwiper(swiper) {\n swiper.slideTo(1, 0)\n }\n return (\n \n );\n}","import React, { useState, useEffect, useRef, Suspense, useMemo, message } from \"react\";\nimport \"./styles.css\";\nimport Webcam from \"react-webcam\";\n\nimport \"@mediapipe/hands\";\nimport logo from \"./resources/logo.png\";\n\n\nimport * as MediaPipeFace from \"@mediapipe/face_mesh\";\n\nimport { Canvas } from \"@react-three/fiber\";\nimport { Environment } from \"@react-three/drei\";\nimport FacePoints from \"./FacePoints\";\nimport Scroller from \"./Scoller.js\"\nimport { Swiper, SwiperSlide } from \"swiper/react\";\n\nimport 'swiper/swiper-bundle.min.css'\nimport 'swiper/swiper.min.css'\n\nlet videoWidth = 480,\n videoHeight = 360;\n\nconst videoConstraints = {\n width: 1280,\n height: 720,\n facingMode: \"user\"\n};\n\nlet isMirrored = true;\nconst urlParams = new URLSearchParams(window.location.search);\nif (urlParams.get(\"mirror\") === \"false\") { isMirrored = false }\n\nexport default function App() {\n const [splashScreen, setSplashScreen] = useState(true);\n const [prediction, setPrediction] = useState({});\n const [glassesColor, setGlassesColor] = useState(\"00ff00\")\n\n const message = useRef();\n const webcamRef = useRef();\n const offScreenCanvasRef = useRef();\n const displayCanvasRef = useRef();\n const croppedCanvasRef = useRef();\n\n const videoAspect = videoWidth / videoHeight;\n\n let face = useMemo(() => {\n const face = new MediaPipeFace.FaceMesh({\n locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/${file}`,\n });\n console.log(face)\n face.setOptions({\n minDetectionConfidence: 0.9,\n minTrackingConfidence: 0.9,\n maxNumFaces: 2,\n refineLandmarks: true\n });\n face.onResults(setPrediction);\n\n return face;\n }, [\"face\"]);\n\n\n let sendToFace = () => {\n let video = webcamRef.current.video;\n\n videoHeight = video.videoHeight;\n videoWidth = video.videoWidth;\n\n const offscreenCanvas = offScreenCanvasRef.current;\n const offScreenCtx = offscreenCanvas.getContext(\"2d\");\n\n const croppedCanvas = croppedCanvasRef.current;\n const croppedCanvasCtx = croppedCanvas.getContext(\"2d\");\n\n const width = croppedCanvas.height * videoAspect;\n const left = (croppedCanvas.width - width) * 0.5\n const top = 0;\n const height = croppedCanvas.height;\n croppedCanvasCtx.drawImage(video, left, top, width, height)\n\n offScreenCtx.drawImage(video, 0, 0);\n face.send({ image: croppedCanvas });\n if (splashScreen && prediction.image) {\n setSplashScreen(false);\n }\n\n };\n\n useEffect(() => {\n if (prediction.image !== undefined) {\n const offscreenCanvas = offScreenCanvasRef.current;\n const displayCtx = displayCanvasRef.current.getContext(\"2d\");\n if (offscreenCanvas.height !== 0) {\n displayCtx.drawImage(offscreenCanvas, 0, 0, videoWidth, videoHeight);\n }\n setTimeout(() => {\n sendToFace();\n }, 10);\n }\n }, [prediction]);\n\n\n return (\n \n {splashScreen && (\n
\n
\n
\n )}\n\n
{\n sendToFace();\n }}\n videoConstraints={videoConstraints}\n />\n\n\n\n {/* \n \n
*/}\n\n \n \n
\n \n \n
\n \n \n
\n\n {!splashScreen && }\n\n \n
\n\n
{\n camera.left = -0.5 * videoAspect;\n camera.right = 0.5 * videoAspect;\n camera.top = 0.5;\n camera.bottom = -0.5;\n camera.lookAt(0, 0, 1);\n camera.updateProjectionMatrix();\n }}\n\n orthographic\n camera={{\n near: -300,\n far: 300,\n position: [0, 0, -0.5],\n }}>\n\n \n \n \n \n \n \n\n \n
\n
{message.current}
\n \n\n