From d75527f7eecc4e2fcdd18ab157412506717c8adb Mon Sep 17 00:00:00 2001 From: navanchauhan Date: Mon, 7 Nov 2022 23:36:11 -0700 Subject: add blog post --- .../2020-08-01-Natural-Feature-Tracking-ARJS.html | 24 ++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) (limited to 'docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html') diff --git a/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html b/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html index 6b28206..560996e 100644 --- a/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html +++ b/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html @@ -184,7 +184,8 @@ me.fset me.fset3 me.iset

Create a new file called index.html in your project folder. This is the basic template we are going to use. Replace me with the root filename of your image, for example NeverGonnaGiveYouUp.png will become NeverGonnaGiveYouUp. Make sure you have copied all three files from the output folder in the previous step to the root of your project folder.

-
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
+

+
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
 <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
 
 <style>
@@ -231,7 +232,8 @@ me.fset  me.fset3 me.iset
     <a-entity camera></a-entity>
   </a-scene>
 </body>
-

+
+

In this we are creating a AFrame scene and we are telling it that we want to use NFT Tracking. The amazing part about using AFrame is that we are able to use all AFrame objects!

@@ -239,10 +241,12 @@ me.fset me.fset3 me.iset

Let us add a simple box!

-
<a-nft .....>
+

+
<a-nft .....>
     <a-box position='100 0.5 -180' material='opacity: 0.5; side: double' scale="100 100 100"></a-box>
 </a-nft>
-

+
+

Now to test it out we will need to create a simple server, I use Python's inbuilt SimpleHTTPServer alongside ngrok

@@ -277,12 +281,14 @@ Serving HTTP on 0.0.0.0 port 8000 ...

Edit your index.html

-
<a-nft ..>
+

+
<a-nft ..>
     <a-box ..>
         <a-torus-knot radius='0.26' radius-tubular='0.05' ></a-torus-knot>
     </ a-box>
 </ a-nft>
-

+
+

@@ -298,9 +304,11 @@ Serving HTTP on 0.0.0.0 port 8000 ...

Change the box's material to add the GIF shader

-
...
+

+
...
 <a-box position='100 0.5 -180' material="shader:gif;src:url(https://media.tenor.com/images/412b1aa9149d98d561df62db221e0789/tenor.gif);opacity:.5" .....>
-

+
+

-- cgit v1.2.3