A small javascript library to develop WebAR apps. It is based on jsartoolkitNFT a lighter version of jsartoolkit5 only with NFT markerless technology. It use ARnft-threejs for the rendering part.
:one: Clone the repository:
git clone https://github.com/webarkit/ARnft.git
:two: Install the npm packages with yarn:
yarn install
or with npm:
npm install
:three: Run the node server:
http-server . -p 8000
:four: Go to the examples:
http://localhost:8000/examples/arNFT_example.html
:five: Point your device š± to the pinball image š a red cube will appear !
Download the zipped dist lib package from the releases page: webarkit/ARnft/releases and use it in a script tag:
<script src="https://github.com/webarkit/ARnft/raw/master/path/to/dist/ARnft.js"></script>
or you can use raw.githack services (for development):
<script src="https://raw.githack.com/webarkit/ARnft/master/dist/ARnft.js"></script>
or raw.cdn (for production, you need to add the hash):
<script src="https://rawcdn.githack.com/webarkit/ARnft/<hash>/dist/ARnft.js"></script>
or if you want to import as a module with npm:
import { ARnft } from "@webarkit/ar-nft";
Test the examples in the /examples
folder:
arNFT_autoupdate_example.html
Example with the autopdate routine.arNFT_container_example.html
Example with an alternative container.arNFT_event_example.html
Example with objVisibility and eventListener.arNFT_example.html
The simplest example displaying a red cube.arNFT_gltf_brave_robot_example.html
More advanced example with a gltf model and threejs events.arNFT_gltf_example.html
Example showing a gltf model (Duck).arNFT_gltf_flamingo_example.html
Example showing an animated gltf model (Flamingo).arNFT_image_example.html
Example showing an image.arNFT_initialize_raw_example.html
Example using the custom initialize function for the CameraRenderer (video).arNFT_multi_example.html
Example with multi NFT markers.arNFT_multi_dispose_example.html
Example with multi NFT markers and disposing worker.arNFT_multi_one_worker_example.html
Example with multi NFT markers in one Worker.arNFT_video_example.html
Example showing a video.You can try also a live example with React at this link: kalwalt.github.io/ARnft-ES6-react/
Donate to ARnft
You can build the docs with this command:
yarn docs
Then run a live server and go to the docs folder.
npm i @webarkit/ar-nft
or with yarn:
yarn add @webarkit/ar-nft
Configuration data in an external .json file.
Filtering of the matrix with the OneEuroFilter.
We are using Prettier 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
If you make changes to the code, run these commands to build the distribution libray, install all the dependencies with:
yarn --include=dev i
For a development build, that is the code will be rebuilt for every changes, run:
yarn dev-ts
Instead for a production build, with more optimizations in the code and smaller size, run:
yarn build-ts