@kalwalt/ar-nft

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 !

<img 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 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.