├── .babelrc ├── .browserlistrc ├── .eslintrc ├── .gitignore ├── .prettierrc ├── LICENSE.txt ├── README.md ├── example ├── .babelrc ├── .browserlistrc ├── .eslintrc ├── .prettierrc ├── LICENSE.txt ├── README.md ├── data │ ├── camera_para.dat │ └── marker │ │ ├── pinball.fset │ │ ├── pinball.fset3 │ │ └── pinball.iset ├── package-lock.json ├── package.json ├── pinball.jpg ├── src │ ├── app.js │ ├── index.html │ └── index.js └── webpack.config.js ├── js └── arnft.worker.js ├── package-lock.json ├── package.json └── src ├── arnft ├── arnft.js ├── arnftContext.js ├── components │ ├── arCanvas.js │ └── nftMarker.js ├── index.js └── utils.js └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "modules": false, 7 | "useBuiltIns": "usage", 8 | "corejs": 3 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ] 13 | } -------------------------------------------------------------------------------- /.browserlistrc: -------------------------------------------------------------------------------- 1 | defaults -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "standard", 4 | "plugin:react/recommended", 5 | "plugin:prettier/recommended" 6 | ], 7 | "env": { 8 | "browser": true 9 | }, 10 | "globals": { 11 | "THREE": true 12 | }, 13 | "rules": { 14 | "react/prop-types": 0 15 | } 16 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | example/cert.pem 4 | example/key.pem 5 | lib -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": false, 4 | "trailingComma": "all" 5 | } -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-three-arnft 2 | 3 | Image tracking with [@kalwalt/jsartoolkit-nft](https://github.com/webarkit/jsartoolkitNFT) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). 4 | 5 | ``` 6 | npm install react-three-arnft 7 | ``` 8 | 9 | ## Usage 10 | 11 | ### Example 12 | 13 | ```jsx 14 | import ReactDOM from "react-dom" 15 | import React from "react" 16 | 17 | import { ARCanvas, NFTMarker } from "react-three-arnft" 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | , 29 | document.getElementById("root"), 30 | ) 31 | ``` 32 | 33 | ## API 34 | 35 | ### ARCanvas 36 | 37 | ```jsx 38 | 41 | interpolationFactor = 1, // increase to enable smoother but slower tracking 42 | /> 43 | ``` 44 | 45 | ### NFTMarker 46 | 47 | ```jsx 48 | 52 | ``` 53 | 54 | ## Notes 55 | 56 | - [Camera parameters file](./example/data/camera_para.dat) must be served from `data/camera_para.data` 57 | - Start with the [example](./example) using webpack for bundling. 58 | 59 | ## ToDos 60 | 61 | - [x] Support multiple NFT Markers: https://github.com/webarkit/jsartoolkitNFT/issues/32 62 | - [x] NPM Module 63 | - [ ] CI Build 64 | - [ ] Host example 65 | - [ ] Demo Video/GIF 66 | -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "modules": false, 7 | "useBuiltIns": "usage", 8 | "corejs": 3 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ] 13 | } -------------------------------------------------------------------------------- /example/.browserlistrc: -------------------------------------------------------------------------------- 1 | defaults -------------------------------------------------------------------------------- /example/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "standard", 4 | "plugin:react/recommended", 5 | "plugin:prettier/recommended" 6 | ], 7 | "env": { 8 | "browser": true 9 | }, 10 | "globals": { 11 | "THREE": true 12 | }, 13 | "rules": { 14 | "react/prop-types": 0 15 | } 16 | } -------------------------------------------------------------------------------- /example/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": false, 4 | "trailingComma": "all" 5 | } -------------------------------------------------------------------------------- /example/LICENSE.txt: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # react-three-arnft-example 2 | 3 | Example using [react-three-arnft](https://github.com/j-era/react-three-arnft). 4 | 5 | ``` 6 | npm i 7 | npm run watch 8 | ``` 9 | -------------------------------------------------------------------------------- /example/data/camera_para.dat: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j-era/react-three-arnft/4c7a031ebb81604ae561c1687bc1cd667ae6c722/example/data/camera_para.dat -------------------------------------------------------------------------------- /example/data/marker/pinball.fset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j-era/react-three-arnft/4c7a031ebb81604ae561c1687bc1cd667ae6c722/example/data/marker/pinball.fset -------------------------------------------------------------------------------- /example/data/marker/pinball.fset3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j-era/react-three-arnft/4c7a031ebb81604ae561c1687bc1cd667ae6c722/example/data/marker/pinball.fset3 -------------------------------------------------------------------------------- /example/data/marker/pinball.iset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j-era/react-three-arnft/4c7a031ebb81604ae561c1687bc1cd667ae6c722/example/data/marker/pinball.iset -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-three-arnft-example", 3 | "description": "Example using https://github.com/j-era/react-three-arnft", 4 | "main": "src/index.js", 5 | "scripts": { 6 | "start": "http-serve -S -C cert.pem dist/", 7 | "build": "webpack --mode=production", 8 | "watch": "webpack serve --mode=development" 9 | }, 10 | "engines": { 11 | "node": ">= 16.14.2" 12 | }, 13 | "dependencies": { 14 | "@react-three/drei": "^9.34.4", 15 | "@react-three/fiber": "^8.8.10", 16 | "@webarkit/jsartoolkit-nft": "^1.1.5", 17 | "react": "^18.2.0", 18 | "react-dom": "^18.2.0", 19 | "react-three-arnft": "^0.3.0", 20 | "three": "^0.145.0" 21 | }, 22 | "license": "LGPL-3.0", 23 | "devDependencies": { 24 | "@babel/cli": "^7.19.3", 25 | "@babel/core": "^7.19.3", 26 | "@babel/preset-env": "^7.19.4", 27 | "@babel/preset-react": "^7.18.6", 28 | "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8", 29 | "babel-loader": "^8.2.5", 30 | "copy-webpack-plugin": "^11.0.0", 31 | "core-js": "^3.25.5", 32 | "eslint": "^8.25.0", 33 | "eslint-config-prettier": "^8.5.0", 34 | "eslint-config-standard": "^17.0.0", 35 | "eslint-plugin-import": "^2.26.0", 36 | "eslint-plugin-node": "^11.1.0", 37 | "eslint-plugin-prettier": "^4.2.1", 38 | "eslint-plugin-promise": "^6.1.0", 39 | "eslint-plugin-react": "^7.31.10", 40 | "eslint-plugin-react-hooks": "^4.6.0", 41 | "html-webpack-plugin": "^5.5.0", 42 | "prettier": "^2.7.1", 43 | "react-refresh": "^0.14.0", 44 | "webpack": "^5.74.0", 45 | "webpack-cli": "^4.10.0", 46 | "webpack-dev-server": "^4.11.1" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /example/pinball.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j-era/react-three-arnft/4c7a031ebb81604ae561c1687bc1cd667ae6c722/example/pinball.jpg -------------------------------------------------------------------------------- /example/src/app.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { ARCanvas, NFTMarker } from "react-three-arnft" 3 | 4 | const App = () => { 5 | return ( 6 | { 9 | gl.setSize(window.innerWidth, window.innerHeight) 10 | }} 11 | > 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | } 22 | 23 | export default App 24 | -------------------------------------------------------------------------------- /example/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jsartoolkit-nft-test 5 | 6 | 7 | 8 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { createRoot } from "react-dom/client" 3 | import App from "./app" 4 | 5 | 6 | const params = new URLSearchParams(window.location.search) 7 | 8 | const preview = params.has("preview") 9 | 10 | createRoot(document.getElementById("root")).render() 11 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('webpack').Configuration} */ 2 | /* eslint-disable import/no-commonjs */ 3 | 4 | const path = require("path") 5 | const HtmlWebpackPlugin = require("html-webpack-plugin") 6 | const CopyPlugin = require("copy-webpack-plugin") 7 | const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin") 8 | const webpack = require("webpack") 9 | 10 | module.exports = (_, { mode }) => ({ 11 | entry: "./src/index.js", 12 | devServer: { 13 | server: "https", 14 | host: "0.0.0.0", 15 | hot: true 16 | }, 17 | resolve: { 18 | alias: { 19 | three: path.resolve("./node_modules/three"), 20 | react: path.resolve("./node_modules/react"), 21 | "react-dom": path.resolve("./node_modules/react-dom"), 22 | "@react-three/fiber": path.resolve("./node_modules/@react-three/fiber"), 23 | }, 24 | }, 25 | plugins: [ 26 | mode === "development" && new ReactRefreshWebpackPlugin(), 27 | new HtmlWebpackPlugin({ template: "src/index.html" }), 28 | new CopyPlugin({ 29 | patterns: [ 30 | { from: "data", to: "data" }, 31 | { from: "node_modules/react-three-arnft/js", to: "js" }, 32 | { from: "node_modules/@webarkit/jsartoolkit-nft/dist", to: "js" }, 33 | ], 34 | }), 35 | ].filter(Boolean), 36 | devtool: mode === "development" ? "eval-source-map" : "source-map", 37 | module: { 38 | rules: [ 39 | { 40 | test: /\.js$/, 41 | exclude: /node_modules/, 42 | use: [ 43 | { 44 | loader: "babel-loader", 45 | options: { 46 | plugins: [mode === "development" && "react-refresh/babel"].filter( 47 | Boolean, 48 | ), 49 | }, 50 | }, 51 | ], 52 | }, 53 | ], 54 | }, 55 | }) 56 | -------------------------------------------------------------------------------- /js/arnft.worker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | 3 | const browser = (function () { 4 | const test = function (regexp) { 5 | return regexp.test(navigator.userAgent) 6 | } 7 | switch (true) { 8 | case test(/edg/i): 9 | return "Microsoft Edge" 10 | case test(/trident/i): 11 | return "Microsoft Internet Explorer" 12 | case test(/firefox|fxios/i): 13 | return "Mozilla Firefox" 14 | case test(/opr\//i): 15 | return "Opera" 16 | case test(/ucbrowser/i): 17 | return "UC Browser" 18 | case test(/samsungbrowser/i): 19 | return "Samsung Browser" 20 | case test(/chrome|chromium|crios/i): 21 | return "Google Chrome" 22 | case test(/safari/i): 23 | return "Apple Safari" 24 | default: 25 | return "Other" 26 | } 27 | })() 28 | 29 | if (browser === "Apple Safari") { 30 | importScripts("./ARToolkitNFT.js") 31 | } else { 32 | importScripts("./ARToolkitNFT_simd.js") 33 | } 34 | 35 | let arController = null 36 | let currentMarkerResult = null 37 | let nextImageData = null 38 | let interpolationFactor = 1 39 | 40 | const currentMatrix = { 41 | delta: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 42 | interpolated: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 43 | } 44 | 45 | self.onmessage = function (e) { 46 | const msg = e.data 47 | switch (msg.type) { 48 | case "load": { 49 | load(msg) 50 | return 51 | } 52 | case "loadMarkers": { 53 | loadMarkers(msg.markers) 54 | return 55 | } 56 | case "process": { 57 | nextImageData = msg.imagedata 58 | process() 59 | } 60 | } 61 | } 62 | 63 | async function load(msg) { 64 | console.log("Loading camera at: ", msg.cameraParamUrl) 65 | console.log("Setting interpolation factor to: ", msg.interpolationFactor) 66 | 67 | try { 68 | arController = await ARToolkitNFT.ARControllerNFT.initWithDimensions( 69 | msg.pw, 70 | msg.ph, 71 | msg.cameraParamUrl, 72 | ) 73 | 74 | arController.addEventListener("getNFTMarker", function (e) { 75 | currentMarkerResult = e.data 76 | }) 77 | 78 | interpolationFactor = msg.interpolationFactor 79 | 80 | postMessage({ 81 | type: "loaded", 82 | proj: JSON.stringify(arController.getCameraMatrix()), 83 | }) 84 | } catch (error) { 85 | console.error(error) 86 | } 87 | } 88 | 89 | function loadMarkers(markers) { 90 | arController.loadNFTMarkers( 91 | markers, 92 | function (ids) { 93 | const markers = ids.map((id, index) => { 94 | arController.trackNFTMarkerId(id) 95 | return arController.getNFTData(arController.id, index) 96 | }) 97 | 98 | postMessage({ 99 | type: "markerInfos", 100 | markers, 101 | }) 102 | 103 | console.log("loadNFTMarkers -> ", ids) 104 | 105 | postMessage({ type: "markersLoaded", end: true }) 106 | }, 107 | function (err) { 108 | console.error("Error in loading marker on Worker", err) 109 | }, 110 | ) 111 | } 112 | 113 | function process() { 114 | if (arController && arController.process) { 115 | arController.process(nextImageData) 116 | } 117 | 118 | if (currentMarkerResult) { 119 | const matrix = currentMarkerResult.matrixGL_RH 120 | 121 | for (let i = 0; i < matrix.length; i++) { 122 | currentMatrix.delta[i] = matrix[i] - currentMatrix.interpolated[i] 123 | currentMatrix.interpolated[i] = 124 | currentMatrix.interpolated[i] + 125 | currentMatrix.delta[i] / interpolationFactor 126 | } 127 | 128 | postMessage({ 129 | type: "found", 130 | index: JSON.stringify(currentMarkerResult.index), 131 | matrixGL_RH: JSON.stringify(currentMatrix.interpolated), 132 | }) 133 | } else { 134 | postMessage({ 135 | type: "lost", 136 | }) 137 | } 138 | 139 | currentMarkerResult = null 140 | 141 | postMessage({ type: "processNext" }) 142 | } 143 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-three-arnft", 3 | "version": "0.3.1", 4 | "description": "Image tracking with @kalwalt/jsartoolkit-nft and @react-three/fiber", 5 | "main": "lib/index.js", 6 | "files": [ 7 | "lib/" 8 | ], 9 | "scripts": { 10 | "watch": "babel --watch src --out-dir lib", 11 | "build": "babel src --out-dir lib --source-maps" 12 | }, 13 | "engines": { 14 | "node": ">= 16.15.x" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/j-era/react-three-arnft.git" 19 | }, 20 | "keywords": [ 21 | "react", 22 | "react-three-fiber", 23 | "jsartoolkit-nft", 24 | "arnft", 25 | "imagetracking", 26 | "ar", 27 | "three" 28 | ], 29 | "license": "LGPL-3.0", 30 | "bugs": { 31 | "url": "https://github.com/j-era/react-three-arnft/issues" 32 | }, 33 | "homepage": "https://github.com/j-era/react-three-arnft#readme", 34 | "peerDependencies": { 35 | "@react-three/fiber": "^8.8.10", 36 | "@webarkit/jsartoolkit-nft": "^1.1.5", 37 | "react": "^18.2.0", 38 | "react-dom": "^18.2.0" 39 | }, 40 | "devDependencies": { 41 | "@babel/cli": "^7.19.3", 42 | "@babel/core": "^7.19.3", 43 | "@babel/preset-env": "^7.19.4", 44 | "@babel/preset-react": "^7.18.6", 45 | "@react-three/fiber": "^8.8.10", 46 | "core-js": "^3.25.5", 47 | "eslint": "^8.25.0", 48 | "eslint-config-prettier": "^8.5.0", 49 | "eslint-config-standard": "^17.0.0", 50 | "eslint-plugin-import": "^2.26.0", 51 | "eslint-plugin-node": "^11.1.0", 52 | "eslint-plugin-prettier": "^4.2.1", 53 | "eslint-plugin-promise": "^6.1.0", 54 | "eslint-plugin-react": "^7.31.10", 55 | "eslint-plugin-react-hooks": "^4.6.0", 56 | "prettier": "2.7.1", 57 | "react": "^18.2.0", 58 | "react-dom": "^18.2.0" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/arnft/arnft.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable camelcase */ 2 | import { isMobile, setMatrix } from "./utils" 3 | 4 | const workerScript = "./js/arnft.worker.js" 5 | 6 | export class ARNft { 7 | constructor( 8 | cameraParamUrl, 9 | video, 10 | renderer, 11 | camera, 12 | onLoaded, 13 | interpolationFactor, 14 | ) { 15 | this.inputWidth = video.videoWidth 16 | this.inputHeight = video.videoHeight 17 | 18 | this.cameraParamUrl = cameraParamUrl 19 | this.video = video 20 | this.renderer = renderer 21 | this.camera = camera 22 | this.onLoaded = onLoaded 23 | 24 | this.camera.matrixAutoUpdate = false 25 | 26 | this.markers = [] 27 | 28 | this.canvasProcess = document.createElement("canvas") 29 | this.contextProcess = this.canvasProcess.getContext("2d") 30 | 31 | this.initRenderer() 32 | 33 | this.worker = new Worker(workerScript) 34 | this.worker.onmessage = (e) => this.onWorkerMessage(e) 35 | this.worker.postMessage({ 36 | type: "load", 37 | pw: this.pw, 38 | ph: this.ph, 39 | cameraParamUrl: this.cameraParamUrl, 40 | interpolationFactor, 41 | }) 42 | } 43 | 44 | initRenderer() { 45 | const pScale = 320 / Math.max(this.inputWidth, (this.inputHeight / 3) * 4) 46 | const sScale = isMobile() ? window.outerWidth / this.inputWidth : 1 47 | 48 | const sw = this.inputWidth * sScale 49 | const sh = this.inputHeight * sScale 50 | 51 | this.w = this.inputWidth * pScale 52 | this.h = this.inputHeight * pScale 53 | 54 | this.pw = Math.max(this.w, (this.h / 3) * 4) 55 | this.ph = Math.max(this.h, (this.w / 4) * 3) 56 | 57 | this.ox = (this.pw - this.w) / 2 58 | this.oy = (this.ph - this.h) / 2 59 | 60 | this.canvasProcess.style.clientWidth = this.pw + "px" 61 | this.canvasProcess.style.clientHeight = this.ph + "px" 62 | this.canvasProcess.width = this.pw 63 | this.canvasProcess.height = this.ph 64 | 65 | console.log( 66 | "processCanvas:", 67 | this.canvasProcess.width, 68 | this.canvasProcess.height, 69 | ) 70 | 71 | this.renderer.setSize(sw, sh, false) // false -> do not update css styles 72 | } 73 | 74 | loadMarkers(markers) { 75 | markers.forEach((marker) => (marker.root.matrixAutoUpdate = false)) 76 | 77 | this.markers = markers 78 | this.worker.postMessage({ 79 | type: "loadMarkers", 80 | markers: markers.map((marker) => marker.url), 81 | }) 82 | } 83 | 84 | process() { 85 | this.contextProcess.fillStyle = "black" 86 | this.contextProcess.fillRect(0, 0, this.pw, this.ph) 87 | this.contextProcess.drawImage( 88 | this.video, 89 | 0, 90 | 0, 91 | this.inputWidth, 92 | this.inputHeight, 93 | this.ox, 94 | this.oy, 95 | this.w, 96 | this.h, 97 | ) 98 | 99 | const imageData = this.contextProcess.getImageData(0, 0, this.pw, this.ph) 100 | this.worker.postMessage({ type: "process", imagedata: imageData }, [ 101 | imageData.data.buffer, 102 | ]) 103 | } 104 | 105 | onWorkerMessage(e) { 106 | const msg = e.data 107 | switch (msg.type) { 108 | case "loaded": { 109 | const proj = JSON.parse(msg.proj) 110 | const ratioW = this.pw / this.w 111 | const ratioH = this.ph / this.h 112 | const f = 2000.0 113 | const n = 0.1 114 | 115 | proj[0] *= ratioW 116 | proj[5] *= ratioH 117 | proj[10] = -(f / (f - n)) 118 | proj[14] = -((f * n) / (f - n)) 119 | 120 | setMatrix(this.camera.projectionMatrix, proj) 121 | 122 | this.onLoaded(msg) 123 | break 124 | } 125 | case "markersLoaded": { 126 | if (msg.end === true) { 127 | console.log(msg) 128 | } 129 | this.process() 130 | break 131 | } 132 | case "markerInfos": { 133 | this.onMarkerInfos(msg.markers) 134 | break 135 | } 136 | case "found": { 137 | console.log("found", msg) 138 | this.onFound(msg) 139 | break 140 | } 141 | case "lost": { 142 | console.log("lost", msg) 143 | this.onLost(msg) 144 | break 145 | } 146 | case "processNext": { 147 | this.process() 148 | break 149 | } 150 | } 151 | } 152 | 153 | onMarkerInfos(markerInfos) { 154 | console.log("markerInfos", markerInfos) 155 | markerInfos.forEach((markerInfo) => { 156 | this.markers[markerInfo.id].root.children[0].position.x = 157 | ((markerInfo.width / markerInfo.dpi) * 2.54 * 10) / 2.0 158 | this.markers[markerInfo.id].root.children[0].position.y = 159 | ((markerInfo.height / markerInfo.dpi) * 2.54 * 10) / 2.0 160 | }) 161 | } 162 | 163 | onFound(msg) { 164 | const matrix = JSON.parse(msg.matrixGL_RH) 165 | const index = JSON.parse(msg.index) 166 | 167 | setMatrix(this.markers[index].root.matrix, matrix) 168 | 169 | this.markers.forEach((marker, i) => { 170 | marker.root.visible = i === index 171 | }) 172 | } 173 | 174 | onLost(msg) { 175 | this.markers.forEach((marker) => { 176 | marker.root.visible = false 177 | }) 178 | } 179 | } 180 | -------------------------------------------------------------------------------- /src/arnft/arnftContext.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | createContext, 3 | useMemo, 4 | useContext, 5 | useEffect, 6 | useRef, 7 | useState, 8 | useCallback, 9 | } from "react" 10 | import { useThree } from "@react-three/fiber" 11 | import { ARNft } from "./arnft" 12 | 13 | const constraints = { 14 | audio: false, 15 | video: { 16 | facingMode: "environment", 17 | width: 640, 18 | height: 480, 19 | }, 20 | } 21 | 22 | const ARNftContext = createContext({}) 23 | 24 | const ARNftProvider = ({ children, video, interpolationFactor, arEnabled }) => { 25 | const { gl, camera } = useThree() 26 | 27 | const [arnft, setARNft] = useState(null) 28 | 29 | const markersRef = useRef([]) 30 | const arnftRef = useRef() 31 | 32 | const onLoaded = useCallback((msg) => { 33 | console.log("onLoaded", msg) 34 | 35 | setARNft(arnftRef.current) 36 | }, []) 37 | 38 | useEffect(() => { 39 | async function init() { 40 | const stream = await navigator.mediaDevices.getUserMedia(constraints) 41 | video.current.srcObject = stream 42 | video.current.onloadedmetadata = async (event) => { 43 | console.log(event.srcElement.videoWidth) 44 | console.log(event.srcElement.videoHeight) 45 | 46 | video.current.play() 47 | 48 | gl.domElement.width = event.srcElement.videoWidth 49 | gl.domElement.height = event.srcElement.videoHeight 50 | 51 | gl.domElement.style.objectFit = "cover" 52 | 53 | camera.updateProjectionMatrix() 54 | 55 | const arnft = new ARNft( 56 | "../data/camera_para.dat", 57 | video.current, 58 | gl, 59 | camera, 60 | onLoaded, 61 | interpolationFactor, 62 | ) 63 | 64 | arnftRef.current = arnft 65 | } 66 | } 67 | 68 | if (arEnabled) { 69 | init() 70 | } 71 | }, []) 72 | 73 | useEffect(() => { 74 | if (!arnft) { 75 | return 76 | } 77 | 78 | arnft.loadMarkers(markersRef.current) 79 | }, [arnft]) 80 | 81 | const value = useMemo(() => { 82 | return { arnft, markersRef, arEnabled } 83 | }, [arnft, markersRef, arEnabled]) 84 | 85 | return {children} 86 | } 87 | 88 | const useARNft = () => { 89 | const arValue = useContext(ARNftContext) 90 | return useMemo(() => ({ ...arValue }), [arValue]) 91 | } 92 | 93 | const useNftMarker = (url) => { 94 | const ref = useRef() 95 | 96 | const { markersRef } = useARNft() 97 | 98 | useEffect(() => { 99 | const newMarkers = [...markersRef.current, { url, root: ref.current }] 100 | markersRef.current = newMarkers 101 | }, []) 102 | 103 | return ref 104 | } 105 | 106 | export { ARNftProvider, useARNft, useNftMarker, ARNftContext } 107 | -------------------------------------------------------------------------------- /src/arnft/components/arCanvas.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable indent */ 2 | /* eslint-disable react/jsx-indent */ 3 | /* eslint-disable react/jsx-pascal-case */ 4 | 5 | import { Canvas } from "@react-three/fiber" 6 | import React, { useRef } from "react" 7 | import { ARNftProvider } from "../arnftContext" 8 | 9 | const ARCanvas = ({ 10 | arEnabled = true, 11 | interpolationFactor = 1, 12 | children, 13 | ...props 14 | }) => { 15 | const ref = useRef() 16 | 17 | return ( 18 | <> 19 | {arEnabled && ( 20 | 36 | )} 37 | 41 | 46 | {children} 47 | 48 | 49 | 50 | ) 51 | } 52 | 53 | export default React.memo(ARCanvas) 54 | -------------------------------------------------------------------------------- /src/arnft/components/nftMarker.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useARNft, useNftMarker } from "../arnftContext" 3 | 4 | const NFTMarker = ({ children, url }) => { 5 | const { arEnabled } = useARNft() 6 | const ref = useNftMarker(url) 7 | 8 | return ( 9 | 10 | {children} 11 | 12 | ) 13 | } 14 | 15 | export default NFTMarker 16 | -------------------------------------------------------------------------------- /src/arnft/index.js: -------------------------------------------------------------------------------- 1 | import ARCanvas from "./components/arCanvas" 2 | import NFTMarker from "./components/nftMarker" 3 | 4 | export { ARCanvas, NFTMarker } 5 | -------------------------------------------------------------------------------- /src/arnft/utils.js: -------------------------------------------------------------------------------- 1 | export function isMobile() { 2 | return /Android|mobile|iPad|iPhone/i.test(navigator.userAgent) 3 | } 4 | 5 | export const setMatrix = function (matrix, value) { 6 | const array = [] 7 | for (const key in value) { 8 | array[key] = value[key] 9 | } 10 | if (typeof matrix.elements.set === "function") { 11 | matrix.elements.set(array) 12 | } else { 13 | matrix.elements = [].slice.call(array) 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export * from "./arnft" 2 | --------------------------------------------------------------------------------