Skip to content

Commit

Permalink
Updated README file with updated importmap instructions and other fixes
Browse files Browse the repository at this point in the history 
- npm packages upgrade and dist lib rebuild
  • Loading branch information
@kalwalt
kalwalt committed Nov 4, 2024
1 parent 6c36711 commit 3a052fe
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 49 deletions.
61 changes: 49 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@

# ARnft - WebAR with NFT

<img src="examples/Data/arNFT-logo.gif" width="250px"/>
<img alt="ARnft official logo" src="examples/Data/arNFT-logo.gif" width="250px"/>

A small javascript library to develop WebAR apps. It is based on [jsartoolkitNFT](https://github.com/webarkit/jsartoolkitNFT) a lighter version of jsartoolkit5 only with **NFT** markerless technology. It use [ARnft-threejs](https://github.com/webarkit/ARnft-threejs) for the rendering part.
A small javascript library to develop WebAR apps. It is based on [jsartoolkitNFT](https://github.com/webarkit/jsartoolkitNFT) a lighter version of jsartoolkit5 only with **NFT** markerless technology. It uses [ARnft-threejs](https://github.com/webarkit/ARnft-threejs) for the rendering part.

## Start using it !

Expand All @@ -30,43 +30,80 @@ or with npm:

:three: &nbsp; Run the node server:

`http-server . -p 8000`
`npx http-server`

:four: &nbsp; Go to the examples:

http://localhost:8000/examples/arNFT_example.html

:five: &nbsp; Point your device 📱 to the pinball image 👇 a red cube will appear !

<img src= https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg width="250"/>
<img alt="pinball image" src= https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg width="250"/>

## Usage

Download the zipped dist lib package from the releases page: [webarkit/ARnft/releases](https://github.com/webarkit/ARnft/releases)
and use it in a script tag:
and import it as a module:

```html
<script src="path/to/dist/ARnft.js"></script>
<script type="importmap">
{
"imports": {
"three": "./js/third_party/three.js/three.module.min.js",
"arnft-threejs": "./js/ARnftThreejs.module.js",
"arnft": "./../dist/ARnft.module.js"
}
}
</script>

<script type="module">
import * as THREE from "three";
import arnft from "arnft";
const { ARnft } = arnft;
import ARnftThreejs from "arnft-threejs";
const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;
// Follow code for rendering ect. see the examples.
```
or you can use raw.githack services (for development):
```html
<script src="https://raw.githack.com/webarkit/ARnft/master/dist/ARnft.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.min.js",
"arnft-threejs": "https://raw.githack.com/webarkit/ARnft-threejs/master/dist/ARnftThreejs.module.js",
"arnft": "https://raw.githack.com/webarkit/ARnft/master/dist/ARnft.module.js"
}
}
</script>

<script type="module">
// as the above code snippet
```
or raw.cdn (for production, you need to add the hash):
```html
<script src="https://rawcdn.githack.com/webarkit/ARnft/<hash>/dist/ARnft.js"></script>
```
// As the examples above import three.js, Arnft-threejs and Arnft in an importmap
"arnft": "https://rawcdn.githack.com/webarkit/ARnft/<hash>/dist/ARnft.js"
```
or if you want to import as a module with npm:
```
// In your package.json:
"devDependencies": {
"@webarkit/ar-nft": "^0.14.8"
},
```
```javascript
// Then in your .ts or .js file
import { ARnft } from "@webarkit/ar-nft";
```
## Examples
Test the examples in the `/examples` folder:
Expand Down Expand Up @@ -95,7 +132,7 @@ Donate to **ARnft** ![opencollective](https://flat.badgen.net/badge/icon/opencol
You can build the docs with this command:
`yarn docs`
Then run a live server and go to the docs folder.
Then run a live server and go to the docs' folder.
## Features
Expand All @@ -120,11 +157,11 @@ yarn add @webarkit/ar-nft
We are using [Prettier](https://prettier.io/) as code formatter. You only need to run `yarn format` to write the formatted code with Prettier. If you want to check if the code is well formatted run instead: `yarn format-check`
## Build
If you make changes to the code, run these commands to build the distribution libray, install all the dependencies with:
If you make changes to the code, run these commands to build the distribution library, install all the dependencies with:
```
yarn --include=dev i
```
For a development build, that is the code will be rebuilt for every changes, run:
For a development build, that is the code will be rebuilt for every change, run:
```
yarn dev-ts
```
Expand Down
6 changes: 3 additions & 3 deletions dist/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@
},
"devDependencies": {
"@types/node": "22.7.5",
"@types/stats.js": "^0.17.0",
"@types/stats.js": "^0.17.3",
"@types/uuid": "10.0.0",
"prettier": "^3.3.3",
"rimraf": "6.0.1",
"stats.js": "^0.17.0",
"ts-loader": "^9.5.1",
"typedoc": "0.26.10",
"typedoc": "0.26.11",
"typescript": "^5.5.4",
"webpack": "5.94.0",
"webpack": "5.96.1",
"webpack-cli": "^5.1.4",
"worker-loader": "^3.0.8"
},
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@
},
"devDependencies": {
"@types/node": "22.7.5",
"@types/stats.js": "^0.17.0",
"@types/stats.js": "^0.17.3",
"@types/uuid": "10.0.0",
"prettier": "^3.3.3",
"rimraf": "6.0.1",
"stats.js": "^0.17.0",
"ts-loader": "^9.5.1",
"typedoc": "0.26.10",
"typedoc": "0.26.11",
"typescript": "^5.5.4",
"webpack": "5.94.0",
"webpack": "5.96.1",
"webpack-cli": "^5.1.4",
"worker-loader": "^3.0.8"
},
Expand Down
92 changes: 61 additions & 31 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,23 @@
resolved "https://registry.yarnpkg.com/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz#b2f1776e488c1d6c2b6cd129bab62f71bbc9c7ab"
integrity sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==

"@types/estree@^1.0.5":
"@types/eslint-scope@^3.7.7":
version "3.7.7"
resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
integrity sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==
dependencies:
"@types/eslint" "*"
"@types/estree" "*"

"@types/eslint@*":
version "9.6.1"
resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-9.6.1.tgz#d5795ad732ce81715f27f75da913004a56751584"
integrity sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==
dependencies:
"@types/estree" "*"
"@types/json-schema" "*"

"@types/estree@*", "@types/estree@^1.0.6":
version "1.0.6"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
Expand All @@ -138,6 +154,11 @@
dependencies:
"@types/unist" "*"

"@types/json-schema@*":
version "7.0.15"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==

"@types/json-schema@^7.0.8":
version "7.0.9"
resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz"
Expand All @@ -162,10 +183,10 @@
dependencies:
undici-types "~6.19.2"

"@types/stats.js@^0.17.0":
version "0.17.0"
resolved "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.0.tgz"
integrity sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==
"@types/stats.js@^0.17.3":
version "0.17.3"
resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.3.tgz#705446e12ce0fad618557dd88236f51148b7a935"
integrity sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==

"@types/unist@*", "@types/unist@^3.0.0":
version "3.0.3"
Expand Down Expand Up @@ -341,15 +362,10 @@
resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==

acorn-import-attributes@^1.9.5:
version "1.9.5"
resolved "https://registry.yarnpkg.com/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz#7eb1557b1ba05ef18b5ed0ec67591bfab04688ef"
integrity sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==

acorn@^8.7.1:
version "8.8.1"
resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz"
integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
acorn@^8.14.0:
version "8.14.0"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==

acorn@^8.8.2:
version "8.11.2"
Expand Down Expand Up @@ -436,7 +452,7 @@ braces@^3.0.1:
dependencies:
fill-range "^7.0.1"

browserslist@^4.21.10:
browserslist@^4.24.0:
version "4.24.2"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580"
integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==
Expand Down Expand Up @@ -1270,8 +1286,16 @@ stats.js@^0.17.0:
resolved "https://registry.yarnpkg.com/stats.js/-/stats.js-0.17.0.tgz#b1c3dc46d94498b578b7fd3985b81ace7131cc7d"
integrity sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==

"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
name string-width-cjs
"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"

string-width@^4.1.0:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand All @@ -1297,8 +1321,14 @@ stringify-entities@^4.0.0:
character-entities-html4 "^2.0.0"
character-entities-legacy "^3.0.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
name strip-ansi-cjs
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"

strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand Down Expand Up @@ -1380,10 +1410,10 @@ ts-loader@^9.5.1:
semver "^7.3.4"
source-map "^0.7.4"

[email protected].10:
version "0.26.10"
resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.26.10.tgz#d372f171dc2c4458cbac6c473be9591042ab781d"
integrity sha512-xLmVKJ8S21t+JeuQLNueebEuTVphx6IrP06CdV7+0WVflUSW3SPmR+h1fnWVdAR/FQePEgsSWCUHXqKKjzuUAw==
[email protected].11:
version "0.26.11"
resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.26.11.tgz#124b43a5637b7f3237b8c721691b44738c5c9dc9"
integrity sha512-sFEgRRtrcDl2FxVP58Ze++ZK2UQAEvtvvH8rRlig1Ja3o7dDaMHmaBfvJmdGnNEFaLTpQsN8dpvZaTqJSu/Ugw==
dependencies:
lunr "^2.3.9"
markdown-it "^14.1.0"
Expand Down Expand Up @@ -1520,18 +1550,18 @@ webpack-sources@^3.2.3:
resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==

webpack@5.94.0:
version "5.94.0"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.94.0.tgz#77a6089c716e7ab90c1c67574a28da518a20970f"
integrity sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==
webpack@5.96.1:
version "5.96.1"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.96.1.tgz#3676d1626d8312b6b10d0c18cc049fba7ac01f0c"
integrity sha512-l2LlBSvVZGhL4ZrPwyr8+37AunkcYj5qh8o6u2/2rzoPc8gxFJkLj1WxNgooi9pnoc06jh0BjuXnamM4qlujZA==
dependencies:
"@types/estree" "^1.0.5"
"@types/eslint-scope" "^3.7.7"
"@types/estree" "^1.0.6"
"@webassemblyjs/ast" "^1.12.1"
"@webassemblyjs/wasm-edit" "^1.12.1"
"@webassemblyjs/wasm-parser" "^1.12.1"
acorn "^8.7.1"
acorn-import-attributes "^1.9.5"
browserslist "^4.21.10"
acorn "^8.14.0"
browserslist "^4.24.0"
chrome-trace-event "^1.0.2"
enhanced-resolve "^5.17.1"
es-module-lexer "^1.2.1"
Expand Down

0 comments on commit 3a052fe

Please sign in to comment.