@kalwalt/ar-nft
v0.9.0-beta
Published
WebAR Javscript library for markerless AR
Downloads
107
Maintainers
Readme
ARnft - WebAR with NFT
A small javascript library to develop WebAR apps. It is based on jsartoolkitNFT a lighter version of jsartoolkit5 only with NFT markerless technology.
Start using it !
:one: Clone the repository:
git clone https://github.com/webarkit/ARnft.git
:two: Install the npm packages:
yarn install
:three: Run the node server:
http-server . -p 8000
:four: Go to the example:
http://localhost:8000/examples/arNFT_example.html
:five: Point your device 📱 to the pinball image 👇 a red cube will appear !
Usage
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 '@kalwalt/ar-nft';
Examples
Test the examples in the /examples
folder:
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_image_example.html
Example showing an image.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/
Features
- 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 @kalwalt/ar-nft
❗️👉️ from 0.9.0 version npm package updates only from Webarkit npmjs package profile !!
- Configuration data in an External .json file.