diff --git a/example/package.json b/example/package.json index 5383bba..ee21b5c 100644 --- a/example/package.json +++ b/example/package.json @@ -24,6 +24,7 @@ "eslint": "^7.32.0", "eslint-plugin-compat": "^3.13.0", "html-webpack-plugin": "^5.3.2", + "http-server": "^14.1.0", "react-refresh": "^0.10.0", "webpack": "^5.53.0", "webpack-cli": "^4.8.0", diff --git a/lib/ar/ar.js b/lib/ar/ar.js index 23771f1..ad6083a 100644 --- a/lib/ar/ar.js +++ b/lib/ar/ar.js @@ -1,6 +1,6 @@ -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } diff --git a/lib/ar/ar.js.map b/lib/ar/ar.js.map new file mode 100644 index 0000000..b24709e --- /dev/null +++ b/lib/ar/ar.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/ar/ar.js"],"names":["useFrame","useThree","ArToolkitContext","ArToolkitSource","React","createContext","useCallback","useEffect","useMemo","ARContext","videoDomElemSelector","AR","memo","tracking","children","sourceType","patternRatio","matrixCodeType","detectionMode","cameraParametersUrl","onCameraStreamReady","onCameraStreamError","gl","camera","arContext","arToolkitSource","arToolkitContext","onResize","onResizeElement","copyElementSizeTo","domElement","arController","canvas","projectionMatrix","copy","getProjectionMatrix","onUnmount","window","removeEventListener","dispose","cameraParam","video","document","querySelector","srcObject","getTracks","map","track","stop","remove","init","style","position","onloadedmetadata","addEventListener","ready","update","value","useAR","arValue","useContext"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAASA,QAAT,EAAmBC,QAAnB,QAAmC,oBAAnC;AACA,SAASC,gBAAT,EAA2BC,eAA3B,QAAkD,2CAAlD;AACA,OAAOC,KAAP,IAAgBC,aAAhB,EAA+BC,WAA/B,EAA4CC,SAA5C,EAAuDC,OAAvD,QAAsE,OAAtE;AAEA,IAAMC,SAAS,gBAAGJ,aAAa,CAAC,EAAD,CAA/B;AACA,IAAMK,oBAAoB,GAAG,aAA7B;AAEA,IAAMC,EAAE,gBAAGP,KAAK,CAACQ,IAAN,CAAW,gBAUhB;AAAA,2BATJC,QASI;AAAA,MATJA,QASI,8BATO,IASP;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,UAOI,QAPJA,UAOI;AAAA,MANJC,YAMI,QANJA,YAMI;AAAA,MALJC,cAKI,QALJA,cAKI;AAAA,MAJJC,aAII,QAJJA,aAII;AAAA,MAHJC,mBAGI,QAHJA,mBAGI;AAAA,MAFJC,mBAEI,QAFJA,mBAEI;AAAA,MADJC,mBACI,QADJA,mBACI;;AACJ,kBAAuBpB,QAAQ,EAA/B;AAAA,MAAQqB,EAAR,aAAQA,EAAR;AAAA,MAAYC,MAAZ,aAAYA,MAAZ;;AAEA,MAAMC,SAAS,GAAGhB,OAAO,CAAC,YAAM;AAC9B,QAAMiB,eAAe,GAAG,IAAItB,eAAJ,CAAoB;AAAEY,MAAAA,UAAU,EAAVA;AAAF,KAApB,CAAxB;AACA,QAAMW,gBAAgB,GAAG,IAAIxB,gBAAJ,CAAqB;AAC5CiB,MAAAA,mBAAmB,EAAnBA,mBAD4C;AAE5CD,MAAAA,aAAa,EAAbA,aAF4C;AAG5CF,MAAAA,YAAY,EAAZA,YAH4C;AAI5CC,MAAAA,cAAc,EAAdA;AAJ4C,KAArB,CAAzB;AAOA,WAAO;AAAES,MAAAA,gBAAgB,EAAhBA,gBAAF;AAAoBD,MAAAA,eAAe,EAAfA;AAApB,KAAP;AACD,GAVwB,EAUtB,CAACT,YAAD,EAAeC,cAAf,EAA+BE,mBAA/B,EAAoDD,aAApD,EAAmEH,UAAnE,CAVsB,CAAzB;AAYA,MAAMY,QAAQ,GAAGrB,WAAW,CAAC,YAAM;AACjC,QAAQoB,gBAAR,GAA8CF,SAA9C,CAAQE,gBAAR;AAAA,QAA0BD,eAA1B,GAA8CD,SAA9C,CAA0BC,eAA1B;AAEAA,IAAAA,eAAe,CAACG,eAAhB;AACAH,IAAAA,eAAe,CAACI,iBAAhB,CAAkCP,EAAE,CAACQ,UAArC;;AACA,QAAIJ,gBAAgB,CAACK,YAAjB,KAAkC,IAAtC,EAA4C;AAC1CN,MAAAA,eAAe,CAACI,iBAAhB,CAAkCH,gBAAgB,CAACK,YAAjB,CAA8BC,MAAhE;AACAT,MAAAA,MAAM,CAACU,gBAAP,CAAwBC,IAAxB,CAA6BR,gBAAgB,CAACS,mBAAjB,EAA7B;AACD;AACF,GAT2B,EASzB,CAACb,EAAD,EAAKE,SAAL,EAAgBD,MAAhB,CATyB,CAA5B;AAWA,MAAMa,SAAS,GAAG9B,WAAW,CAAC,YAAM;AAClC+B,IAAAA,MAAM,CAACC,mBAAP,CAA2B,QAA3B,EAAqCX,QAArC;AAEAH,IAAAA,SAAS,CAACE,gBAAV,CAA2BK,YAA3B,CAAwCQ,OAAxC;;AACA,QAAIf,SAAS,CAACE,gBAAV,CAA2BK,YAA3B,CAAwCS,WAA5C,EAAyD;AACvDhB,MAAAA,SAAS,CAACE,gBAAV,CAA2BK,YAA3B,CAAwCS,WAAxC,CAAoDD,OAApD;AACD;;AAED,WAAOf,SAAS,CAACE,gBAAjB;AACA,WAAOF,SAAS,CAACC,eAAjB;AAEA,QAAMgB,KAAK,GAAGC,QAAQ,CAACC,aAAT,CAAuBjC,oBAAvB,CAAd;;AACA,QAAI+B,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACG,SAAN,CAAgBC,SAAhB,GAA4BC,GAA5B,CAAgC,UAAAC,KAAK;AAAA,eAAIA,KAAK,CAACC,IAAN,EAAJ;AAAA,OAArC;AACAP,MAAAA,KAAK,CAACQ,MAAN;AACD;AACF,GAhB4B,EAgB1B,CAACtB,QAAD,EAAWH,SAAX,CAhB0B,CAA7B;AAkBAjB,EAAAA,SAAS,CAAC,YAAM;AACdiB,IAAAA,SAAS,CAACC,eAAV,CAA0ByB,IAA1B,CAA+B,YAAM;AACnC,UAAMT,KAAK,GAAGC,QAAQ,CAACC,aAAT,CAAuBjC,oBAAvB,CAAd;AACA+B,MAAAA,KAAK,CAACU,KAAN,CAAYC,QAAZ,GAAuB,OAAvB;;AAEAX,MAAAA,KAAK,CAACY,gBAAN,GAAyB,YAAM;AAC7B,YAAIjC,mBAAJ,EAAyB;AACvBA,UAAAA,mBAAmB;AACpB;;AACDO,QAAAA,QAAQ;AACT,OALD;AAMD,KAVD,EAUGN,mBAVH;AAYAG,IAAAA,SAAS,CAACE,gBAAV,CAA2BwB,IAA3B,CAAgC;AAAA,aAC9B3B,MAAM,CAACU,gBAAP,CAAwBC,IAAxB,CAA6BV,SAAS,CAACE,gBAAV,CAA2BS,mBAA3B,EAA7B,CAD8B;AAAA,KAAhC;AAIAE,IAAAA,MAAM,CAACiB,gBAAP,CAAwB,QAAxB,EAAkC3B,QAAlC;AAEA,WAAOS,SAAP;AACD,GApBQ,EAoBN,CAACZ,SAAD,EAAYD,MAAZ,EAAoBH,mBAApB,EAAyCC,mBAAzC,EAA8DM,QAA9D,EAAwES,SAAxE,CApBM,CAAT;AAsBApC,EAAAA,QAAQ,CAAC,YAAM;AACb,QAAI,CAACa,QAAL,EAAe;AACb;AACD;;AAED,QAAIW,SAAS,CAACC,eAAV,IAA6BD,SAAS,CAACC,eAAV,CAA0B8B,KAA1B,KAAoC,KAArE,EAA4E;AAC1E/B,MAAAA,SAAS,CAACE,gBAAV,CAA2B8B,MAA3B,CAAkChC,SAAS,CAACC,eAAV,CAA0BK,UAA5D;AACD;AACF,GARO,CAAR;AAUA,MAAM2B,KAAK,GAAGjD,OAAO,CAAC;AAAA,WAAO;AAAEkB,MAAAA,gBAAgB,EAAEF,SAAS,CAACE;AAA9B,KAAP;AAAA,GAAD,EAA2D,CAACF,SAAD,CAA3D,CAArB;AAEA,sBACE,oBAAC,SAAD,CAAW,QAAX;AAAoB,IAAA,KAAK,EAAGiC;AAA5B,KACI3C,QADJ,CADF;AAKD,CA7FU,CAAX;;AA+FA,IAAM4C,KAAK,GAAG,SAARA,KAAQ,GAAM;AAClB,MAAMC,OAAO,GAAGvD,KAAK,CAACwD,UAAN,CAAiBnD,SAAjB,CAAhB;AACA,SAAOL,KAAK,CAACI,OAAN,CAAc;AAAA,6BAAYmD,OAAZ;AAAA,GAAd,EAAsC,CAACA,OAAD,CAAtC,CAAP;AACD,CAHD;;AAKA,SAAShD,EAAT,EAAa+C,KAAb","sourcesContent":["import { useFrame, useThree } from \"@react-three/fiber\"\r\nimport { ArToolkitContext, ArToolkitSource } from \"@ar-js-org/ar.js/three.js/build/ar-threex\"\r\nimport React, { createContext, useCallback, useEffect, useMemo } from \"react\"\r\n\r\nconst ARContext = createContext({})\r\nconst videoDomElemSelector = \"#arjs-video\"\r\n\r\nconst AR = React.memo(({\r\n tracking = true,\r\n children,\r\n sourceType,\r\n patternRatio,\r\n matrixCodeType,\r\n detectionMode,\r\n cameraParametersUrl,\r\n onCameraStreamReady,\r\n onCameraStreamError\r\n}) => {\r\n const { gl, camera } = useThree()\r\n\r\n const arContext = useMemo(() => {\r\n const arToolkitSource = new ArToolkitSource({ sourceType })\r\n const arToolkitContext = new ArToolkitContext({\r\n cameraParametersUrl,\r\n detectionMode,\r\n patternRatio,\r\n matrixCodeType\r\n })\r\n\r\n return { arToolkitContext, arToolkitSource }\r\n }, [patternRatio, matrixCodeType, cameraParametersUrl, detectionMode, sourceType])\r\n\r\n const onResize = useCallback(() => {\r\n const { arToolkitContext, arToolkitSource } = arContext\r\n\r\n arToolkitSource.onResizeElement()\r\n arToolkitSource.copyElementSizeTo(gl.domElement)\r\n if (arToolkitContext.arController !== null) {\r\n arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)\r\n camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix())\r\n }\r\n }, [gl, arContext, camera])\r\n\r\n const onUnmount = useCallback(() => {\r\n window.removeEventListener(\"resize\", onResize)\r\n\r\n arContext.arToolkitContext.arController.dispose()\r\n if (arContext.arToolkitContext.arController.cameraParam) {\r\n arContext.arToolkitContext.arController.cameraParam.dispose()\r\n }\r\n\r\n delete arContext.arToolkitContext\r\n delete arContext.arToolkitSource\r\n\r\n const video = document.querySelector(videoDomElemSelector)\r\n if (video) {\r\n video.srcObject.getTracks().map(track => track.stop())\r\n video.remove()\r\n }\r\n }, [onResize, arContext])\r\n\r\n useEffect(() => {\r\n arContext.arToolkitSource.init(() => {\r\n const video = document.querySelector(videoDomElemSelector)\r\n video.style.position = \"fixed\"\r\n\r\n video.onloadedmetadata = () => {\r\n if (onCameraStreamReady) {\r\n onCameraStreamReady()\r\n }\r\n onResize()\r\n }\r\n }, onCameraStreamError)\r\n\r\n arContext.arToolkitContext.init(() =>\r\n camera.projectionMatrix.copy(arContext.arToolkitContext.getProjectionMatrix())\r\n )\r\n\r\n window.addEventListener(\"resize\", onResize)\r\n\r\n return onUnmount\r\n }, [arContext, camera, onCameraStreamReady, onCameraStreamError, onResize, onUnmount])\r\n\r\n useFrame(() => {\r\n if (!tracking) {\r\n return\r\n }\r\n\r\n if (arContext.arToolkitSource && arContext.arToolkitSource.ready !== false) {\r\n arContext.arToolkitContext.update(arContext.arToolkitSource.domElement)\r\n }\r\n })\r\n\r\n const value = useMemo(() => ({ arToolkitContext: arContext.arToolkitContext }), [arContext])\r\n\r\n return (\r\n \r\n { children }\r\n \r\n )\r\n})\r\n\r\nconst useAR = () => {\r\n const arValue = React.useContext(ARContext)\r\n return React.useMemo(() => ({ ...arValue }), [arValue])\r\n}\r\n\r\nexport { AR, useAR }\r\n"],"file":"ar.js"} \ No newline at end of file diff --git a/lib/ar/arCanvas.js.map b/lib/ar/arCanvas.js.map new file mode 100644 index 0000000..40f5bcf --- /dev/null +++ b/lib/ar/arCanvas.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/ar/arCanvas.js"],"names":["React","Canvas","AR","ARCanvas","arEnabled","tracking","children","patternRatio","detectionMode","cameraParametersUrl","matrixCodeType","sourceType","onCameraStreamReady","onCameraStreamError","props","position","camera"],"mappings":";;;;;;;;;;;;AAAA;;AACA;;AACA;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,SAASC,EAAT,QAAmB,MAAnB;;AAEA,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,4BACfC,SADe;AAAA,MACfA,SADe,+BACH,IADG;AAAA,2BAEfC,QAFe;AAAA,MAEfA,QAFe,8BAEJ,IAFI;AAAA,MAGfC,QAHe,QAGfA,QAHe;AAAA,+BAIfC,YAJe;AAAA,MAIfA,YAJe,kCAIA,GAJA;AAAA,gCAKfC,aALe;AAAA,MAKfA,aALe,mCAKC,iBALD;AAAA,mCAMfC,mBANe;AAAA,MAMfA,mBANe,sCAMO,sBANP;AAAA,iCAOfC,cAPe;AAAA,MAOfA,cAPe,oCAOE,KAPF;AAAA,6BAQfC,UARe;AAAA,MAQfA,UARe,gCAQF,QARE;AAAA,MASfC,mBATe,QASfA,mBATe;AAAA,MAUfC,mBAVe,QAUfA,mBAVe;AAAA,MAWZC,KAXY;;AAAA,sBAYf,oBAAC,MAAD;AAAQ,IAAA,MAAM,EAAGV,SAAS,GAAG;AAAEW,MAAAA,QAAQ,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP;AAAZ,KAAH,GAA6BD,KAAK,CAACE;AAA7D,KAA2EF,KAA3E,GAEIV,SAAS,gBACL,oBAAC,EAAD;AACE,IAAA,QAAQ,EAAGC,QADb;AAEE,IAAA,YAAY,EAAGE,YAFjB;AAGE,IAAA,cAAc,EAAGG,cAHnB;AAIE,IAAA,aAAa,EAAGF,aAJlB;AAKE,IAAA,UAAU,EAAGG,UALf;AAME,IAAA,mBAAmB,EAAGF,mBANxB;AAOE,IAAA,mBAAmB,EAAGG,mBAPxB;AAQE,IAAA,mBAAmB,EAAGC;AARxB,KASMP,QATN,CADK,GAYLA,QAdR,CAZe;AAAA,CAAjB;;AA8BA,eAAeH,QAAf","sourcesContent":["/* eslint-disable indent */\r\n/* eslint-disable react/jsx-indent */\r\n/* eslint-disable react/jsx-pascal-case */\r\n\r\nimport React from \"react\"\r\nimport { Canvas } from \"@react-three/fiber\"\r\n\r\nimport { AR } from \"./ar\"\r\n\r\nconst ARCanvas = ({\r\n arEnabled = true,\r\n tracking = true,\r\n children,\r\n patternRatio = 0.5,\r\n detectionMode = \"mono_and_matrix\",\r\n cameraParametersUrl = \"data/camera_para.dat\",\r\n matrixCodeType = \"3x3\",\r\n sourceType = \"webcam\",\r\n onCameraStreamReady,\r\n onCameraStreamError,\r\n ...props }) =>\r\n \r\n {\r\n arEnabled\r\n ? \r\n { children }\r\n \r\n : children\r\n }\r\n \r\n\r\nexport default ARCanvas\r\n"],"file":"arCanvas.js"} \ No newline at end of file diff --git a/lib/ar/arMarker.js b/lib/ar/arMarker.js index e7d3823..d52154b 100644 --- a/lib/ar/arMarker.js +++ b/lib/ar/arMarker.js @@ -21,9 +21,9 @@ import "core-js/modules/web.dom-collections.for-each.js"; import "core-js/modules/es.object.get-own-property-descriptors.js"; import "core-js/modules/es.object.define-properties.js"; -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } diff --git a/lib/ar/arMarker.js.map b/lib/ar/arMarker.js.map new file mode 100644 index 0000000..fd29b54 --- /dev/null +++ b/lib/ar/arMarker.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/ar/arMarker.js"],"names":["ArMarkerControls","useFrame","React","useEffect","useRef","useState","useAR","ARMarker","children","type","barcodeValue","patternUrl","params","onMarkerFound","onMarkerLost","markerRoot","arToolkitContext","isFound","setIsFound","markerControls","current","index","_arMarkersControls","indexOf","splice","visible"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA,SAASA,gBAAT,QAAiC,2CAAjC;AACA,SAASC,QAAT,QAAyB,oBAAzB;AACA,OAAOC,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,SAASC,KAAT,QAAsB,MAAtB;;AAEA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAQX;AAAA,MAPJC,QAOI,QAPJA,QAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,MALJC,YAKI,QALJA,YAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,MAFJC,aAEI,QAFJA,aAEI;AAAA,MADJC,YACI,QADJA,YACI;AACJ,MAAMC,UAAU,GAAGX,MAAM,EAAzB;;AACA,eAA6BE,KAAK,EAAlC;AAAA,MAAQU,gBAAR,UAAQA,gBAAR;;AACA,kBAA8BX,QAAQ,CAAC,KAAD,CAAtC;AAAA;AAAA,MAAOY,OAAP;AAAA,MAAgBC,UAAhB;;AAEAf,EAAAA,SAAS,CAAC,YAAM;AACd,QAAI,CAACa,gBAAL,EAAuB;AAAE;AAAQ;;AAEjC,QAAMG,cAAc,GAAG,IAAInB,gBAAJ,CAAqBgB,gBAArB,EAAuCD,UAAU,CAACK,OAAlD;AACrBX,MAAAA,IAAI,EAAJA,IADqB;AAErBC,MAAAA,YAAY,EAAED,IAAI,KAAK,SAAT,GAAqBC,YAArB,GAAoC,IAF7B;AAGrBC,MAAAA,UAAU,EAAEF,IAAI,KAAK,SAAT,GAAqBE,UAArB,GAAkC;AAHzB,OAIlBC,MAJkB,EAAvB;AAOA,WAAO,YAAM;AACX,UAAMS,KAAK,GAAGL,gBAAgB,CAACM,kBAAjB,CAAoCC,OAApC,CAA4CJ,cAA5C,CAAd;;AACAH,MAAAA,gBAAgB,CAACM,kBAAjB,CAAoCE,MAApC,CAA2CH,KAA3C,EAAkD,CAAlD;AACD,KAHD;AAID,GAdQ,EAcN,EAdM,CAAT;AAgBApB,EAAAA,QAAQ,CAAC,YAAM;AACb,QAAIc,UAAU,CAACK,OAAX,CAAmBK,OAAnB,IAA8B,CAACR,OAAnC,EAA4C;AAC1CC,MAAAA,UAAU,CAAC,IAAD,CAAV;;AACA,UAAIL,aAAJ,EAAmB;AAACA,QAAAA,aAAa;AAAG;AACrC,KAHD,MAGO,IAAI,CAACE,UAAU,CAACK,OAAX,CAAmBK,OAApB,IAA+BR,OAAnC,EAA4C;AACjDC,MAAAA,UAAU,CAAC,KAAD,CAAV;;AACA,UAAIJ,YAAJ,EAAkB;AAACA,QAAAA,YAAY;AAAG;AACnC;AACF,GARO,CAAR;AAUA,sBACE;AAAO,IAAA,GAAG,EAAGC;AAAb,KACIP,QADJ,CADF;AAKD,CA5CD;;AA8CA,eAAeD,QAAf","sourcesContent":["/* eslint-disable no-underscore-dangle */\r\nimport { ArMarkerControls } from \"@ar-js-org/ar.js/three.js/build/ar-threex\"\r\nimport { useFrame } from \"@react-three/fiber\"\r\nimport React, { useEffect, useRef, useState } from \"react\"\r\nimport { useAR } from \"./ar\"\r\n\r\nconst ARMarker = ({\r\n children,\r\n type,\r\n barcodeValue,\r\n patternUrl,\r\n params,\r\n onMarkerFound,\r\n onMarkerLost\r\n}) => {\r\n const markerRoot = useRef()\r\n const { arToolkitContext } = useAR()\r\n const [isFound, setIsFound] = useState(false)\r\n\r\n useEffect(() => {\r\n if (!arToolkitContext) { return }\r\n\r\n const markerControls = new ArMarkerControls(arToolkitContext, markerRoot.current, {\r\n type,\r\n barcodeValue: type === \"barcode\" ? barcodeValue : null,\r\n patternUrl: type === \"pattern\" ? patternUrl : null,\r\n ...params\r\n })\r\n\r\n return () => {\r\n const index = arToolkitContext._arMarkersControls.indexOf(markerControls)\r\n arToolkitContext._arMarkersControls.splice(index, 1)\r\n }\r\n }, [])\r\n\r\n useFrame(() => {\r\n if (markerRoot.current.visible && !isFound) {\r\n setIsFound(true)\r\n if (onMarkerFound) {onMarkerFound()}\r\n } else if (!markerRoot.current.visible && isFound) {\r\n setIsFound(false)\r\n if (onMarkerLost) {onMarkerLost()}\r\n }\r\n })\r\n\r\n return (\r\n \r\n { children }\r\n \r\n )\r\n}\r\n\r\nexport default ARMarker\r\n"],"file":"arMarker.js"} \ No newline at end of file diff --git a/lib/ar/arNFT.js b/lib/ar/arNFT.js new file mode 100644 index 0000000..81bce36 --- /dev/null +++ b/lib/ar/arNFT.js @@ -0,0 +1,102 @@ +import "core-js/modules/es.array.index-of.js"; +import "core-js/modules/es.array.splice.js"; +import "core-js/modules/es.array.is-array.js"; +import "core-js/modules/es.symbol.js"; +import "core-js/modules/es.symbol.description.js"; +import "core-js/modules/es.object.to-string.js"; +import "core-js/modules/es.symbol.iterator.js"; +import "core-js/modules/es.array.iterator.js"; +import "core-js/modules/es.string.iterator.js"; +import "core-js/modules/web.dom-collections.iterator.js"; +import "core-js/modules/es.array.slice.js"; +import "core-js/modules/es.function.name.js"; +import "core-js/modules/es.array.from.js"; +import "core-js/modules/es.regexp.exec.js"; +import "core-js/modules/es.object.define-property.js"; +import "core-js/modules/es.object.keys.js"; +import "core-js/modules/es.array.filter.js"; +import "core-js/modules/es.object.get-own-property-descriptor.js"; +import "core-js/modules/es.array.for-each.js"; +import "core-js/modules/web.dom-collections.for-each.js"; +import "core-js/modules/es.object.get-own-property-descriptors.js"; +import "core-js/modules/es.object.define-properties.js"; + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } + +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } + +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } + +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } + +function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } + +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } + +/* eslint-disable no-underscore-dangle */ +import { ArMarkerControls } from "@ar-js-org/ar.js/three.js/build/ar-threex-nft"; +import { useFrame } from "@react-three/fiber"; +import React, { useEffect, useRef, useState } from "react"; +import { useAR } from "./ar"; + +var ARNft = function ARNft(_ref) { + var children = _ref.children, + _ref$type = _ref.type, + type = _ref$type === void 0 ? "nft" : _ref$type, + descriptorsUrl = _ref.descriptorsUrl, + params = _ref.params, + onMarkerFound = _ref.onMarkerFound, + onMarkerLost = _ref.onMarkerLost; + var markerRoot = useRef(); + + var _useAR = useAR(), + arToolkitContext = _useAR.arToolkitContext; + + var _useState = useState(false), + _useState2 = _slicedToArray(_useState, 2), + isFound = _useState2[0], + setIsFound = _useState2[1]; + + useEffect(function () { + if (!arToolkitContext) { + return; + } + + var markerControls = new ArMarkerControls(arToolkitContext, markerRoot.current, _objectSpread({ + type: type, + descriptorsUrl: descriptorsUrl + }, params)); + return function () { + var index = arToolkitContext._arMarkersControls.indexOf(markerControls); + + arToolkitContext._arMarkersControls.splice(index, 1); + }; + }, [arToolkitContext, descriptorsUrl, params, type]); + useFrame(function () { + if (markerRoot.current.visible && !isFound) { + setIsFound(true); + + if (onMarkerFound) { + onMarkerFound(); + } + } else if (!markerRoot.current.visible && isFound) { + setIsFound(false); + + if (onMarkerLost) { + onMarkerLost(); + } + } + }); + return /*#__PURE__*/React.createElement("group", { + ref: markerRoot + }, children); +}; + +export default ARNft; +//# sourceMappingURL=arNFT.js.map \ No newline at end of file diff --git a/lib/ar/arNFT.js.map b/lib/ar/arNFT.js.map new file mode 100644 index 0000000..beb2df5 --- /dev/null +++ b/lib/ar/arNFT.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/ar/arNFT.js"],"names":["ArMarkerControls","useFrame","React","useEffect","useRef","useState","useAR","ARNft","children","type","descriptorsUrl","params","onMarkerFound","onMarkerLost","markerRoot","arToolkitContext","isFound","setIsFound","markerControls","current","index","_arMarkersControls","indexOf","splice","visible"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA,SAASA,gBAAT,QAAiC,+CAAjC;AACA,SAASC,QAAT,QAAyB,oBAAzB;AACA,OAAOC,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,SAASC,KAAT,QAAsB,MAAtB;;AAEA,IAAMC,KAAK,GAAG,SAARA,KAAQ,OAOR;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,uBALJC,IAKI;AAAA,MALJA,IAKI,0BALG,KAKH;AAAA,MAJJC,cAII,QAJJA,cAII;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,MAFJC,aAEI,QAFJA,aAEI;AAAA,MADJC,YACI,QADJA,YACI;AACJ,MAAMC,UAAU,GAAGV,MAAM,EAAzB;;AACA,eAA6BE,KAAK,EAAlC;AAAA,MAAQS,gBAAR,UAAQA,gBAAR;;AACA,kBAA8BV,QAAQ,CAAC,KAAD,CAAtC;AAAA;AAAA,MAAOW,OAAP;AAAA,MAAgBC,UAAhB;;AAEAd,EAAAA,SAAS,CAAC,YAAM;AACd,QAAI,CAACY,gBAAL,EAAuB;AAAE;AAAQ;;AAEjC,QAAMG,cAAc,GAAG,IAAIlB,gBAAJ,CAAqBe,gBAArB,EAAuCD,UAAU,CAACK,OAAlD;AACrBV,MAAAA,IAAI,EAAJA,IADqB;AAErBC,MAAAA,cAAc,EAAdA;AAFqB,OAGlBC,MAHkB,EAAvB;AAMA,WAAO,YAAM;AACX,UAAMS,KAAK,GAAGL,gBAAgB,CAACM,kBAAjB,CAAoCC,OAApC,CAA4CJ,cAA5C,CAAd;;AACAH,MAAAA,gBAAgB,CAACM,kBAAjB,CAAoCE,MAApC,CAA2CH,KAA3C,EAAkD,CAAlD;AACD,KAHD;AAID,GAbQ,EAaN,CAACL,gBAAD,EAAmBL,cAAnB,EAAmCC,MAAnC,EAA2CF,IAA3C,CAbM,CAAT;AAeAR,EAAAA,QAAQ,CAAC,YAAM;AACb,QAAIa,UAAU,CAACK,OAAX,CAAmBK,OAAnB,IAA8B,CAACR,OAAnC,EAA4C;AAC1CC,MAAAA,UAAU,CAAC,IAAD,CAAV;;AACA,UAAIL,aAAJ,EAAmB;AAACA,QAAAA,aAAa;AAAG;AACrC,KAHD,MAGO,IAAI,CAACE,UAAU,CAACK,OAAX,CAAmBK,OAApB,IAA+BR,OAAnC,EAA4C;AACjDC,MAAAA,UAAU,CAAC,KAAD,CAAV;;AACA,UAAIJ,YAAJ,EAAkB;AAACA,QAAAA,YAAY;AAAG;AACnC;AACF,GARO,CAAR;AAUA,sBACE;AAAO,IAAA,GAAG,EAAGC;AAAb,KACIN,QADJ,CADF;AAKD,CA1CD;;AA4CA,eAAeD,KAAf","sourcesContent":["/* eslint-disable no-underscore-dangle */\r\nimport { ArMarkerControls } from \"@ar-js-org/ar.js/three.js/build/ar-threex-nft\"\r\nimport { useFrame } from \"@react-three/fiber\"\r\nimport React, { useEffect, useRef, useState } from \"react\"\r\nimport { useAR } from \"./ar\"\r\n\r\nconst ARNft = ({\r\n children,\r\n type = \"nft\",\r\n descriptorsUrl,\r\n params,\r\n onMarkerFound,\r\n onMarkerLost\r\n}) => {\r\n const markerRoot = useRef()\r\n const { arToolkitContext } = useAR()\r\n const [isFound, setIsFound] = useState(false)\r\n\r\n useEffect(() => {\r\n if (!arToolkitContext) { return }\r\n\r\n const markerControls = new ArMarkerControls(arToolkitContext, markerRoot.current, {\r\n type,\r\n descriptorsUrl,\r\n ...params\r\n })\r\n\r\n return () => {\r\n const index = arToolkitContext._arMarkersControls.indexOf(markerControls)\r\n arToolkitContext._arMarkersControls.splice(index, 1)\r\n }\r\n }, [arToolkitContext, descriptorsUrl, params, type])\r\n\r\n useFrame(() => {\r\n if (markerRoot.current.visible && !isFound) {\r\n setIsFound(true)\r\n if (onMarkerFound) {onMarkerFound()}\r\n } else if (!markerRoot.current.visible && isFound) {\r\n setIsFound(false)\r\n if (onMarkerLost) {onMarkerLost()}\r\n }\r\n })\r\n\r\n return (\r\n \r\n { children }\r\n \r\n )\r\n}\r\n\r\nexport default ARNft\r\n"],"file":"arNFT.js"} \ No newline at end of file diff --git a/lib/ar/index.js b/lib/ar/index.js index 865f86d..5cb9309 100644 --- a/lib/ar/index.js +++ b/lib/ar/index.js @@ -1,4 +1,5 @@ import ARMarker from "./arMarker"; +import ARNft from "./arNFT"; import ARCanvas from "./arCanvas"; -export { ARCanvas, ARMarker }; +export { ARCanvas, ARMarker, ARNft }; //# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/lib/ar/index.js.map b/lib/ar/index.js.map new file mode 100644 index 0000000..dd656b6 --- /dev/null +++ b/lib/ar/index.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/ar/index.js"],"names":["ARMarker","ARNft","ARCanvas"],"mappings":"AAAA,OAAOA,QAAP,MAAqB,YAArB;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,QAAP,MAAqB,YAArB;AAEA,SAASA,QAAT,EAAmBF,QAAnB,EAA6BC,KAA7B","sourcesContent":["import ARMarker from \"./arMarker\";\r\nimport ARNft from \"./arNFT\";\r\nimport ARCanvas from \"./arCanvas\";\r\n\r\nexport { ARCanvas, ARMarker, ARNft };\r\n"],"file":"index.js"} \ No newline at end of file diff --git a/lib/index.js.map b/lib/index.js.map new file mode 100644 index 0000000..c8a297c --- /dev/null +++ b/lib/index.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/index.js"],"names":[],"mappings":"AAAA,cAAc,MAAd","sourcesContent":["export * from \"./ar\"\r\n"],"file":"index.js"} \ No newline at end of file diff --git a/src/ar/arNFT.js b/src/ar/arNFT.js new file mode 100644 index 0000000..cd853f8 --- /dev/null +++ b/src/ar/arNFT.js @@ -0,0 +1,51 @@ +/* eslint-disable no-underscore-dangle */ +import { ArMarkerControls } from "@ar-js-org/ar.js/three.js/build/ar-threex-nft" +import { useFrame } from "@react-three/fiber" +import React, { useEffect, useRef, useState } from "react" +import { useAR } from "./ar" + +const ARNft = ({ + children, + type = "nft", + descriptorsUrl, + params, + onMarkerFound, + onMarkerLost +}) => { + const markerRoot = useRef() + const { arToolkitContext } = useAR() + const [isFound, setIsFound] = useState(false) + + useEffect(() => { + if (!arToolkitContext) { return } + + const markerControls = new ArMarkerControls(arToolkitContext, markerRoot.current, { + type, + descriptorsUrl, + ...params + }) + + return () => { + const index = arToolkitContext._arMarkersControls.indexOf(markerControls) + arToolkitContext._arMarkersControls.splice(index, 1) + } + }, [arToolkitContext, descriptorsUrl, params, type]) + + useFrame(() => { + if (markerRoot.current.visible && !isFound) { + setIsFound(true) + if (onMarkerFound) {onMarkerFound()} + } else if (!markerRoot.current.visible && isFound) { + setIsFound(false) + if (onMarkerLost) {onMarkerLost()} + } + }) + + return ( + + { children } + + ) +} + +export default ARNft diff --git a/src/ar/index.js b/src/ar/index.js index cb95b19..006db03 100644 --- a/src/ar/index.js +++ b/src/ar/index.js @@ -1,4 +1,5 @@ -import ARMarker from "./arMarker" -import ARCanvas from "./arCanvas" +import ARMarker from "./arMarker"; +import ARNft from "./arNFT"; +import ARCanvas from "./arCanvas"; -export { ARCanvas, ARMarker } +export { ARCanvas, ARMarker, ARNft };