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.
1️⃣ Clone the repository:
git clone https://github.com/webarkit/ARnft.git
2️⃣ Install the npm packages:
yarn install
3️⃣ Run the node server:
http-server . -p 8000
4️⃣ Go to the example:
http://localhost:8000/examples/arNFT_example.html
5️⃣ 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="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_container_example.htmlExample with an alternative container.arNFT_event_example.htmlExample with objVisibility and eventListener.arNFT_example.htmlThe simplest example displaying a red cube.arNFT_gltf_brave_robot_example.htmlMore advanced example with a gltf model and threejs events.arNFT_gltf_example.htmlExample showing a gltf model (Duck).arNFT_image_example.htmlExample showing an image.arNFT_video_example.htmlExample showing a video.
You can try also a live example with React at this link: kalwalt.github.io/ARnft-ES6-react/
- NFT (Natural Feature Tracking) Markers, read my article: NFT natural feature tracking with jsartoolkit5
- ES6 standard. You can install it as a npm package and use it as a module (experimental). Install it with:
npm i @webarkit/ar-nft
- Configuration data in an External .json file.