From 60fdf9896b52c59933a78eb3a38b297bd0c5f7f6 Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Sat, 1 Aug 2020 17:37:12 +0530 Subject: Publish deploy 2020-08-01 17:37 --- posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html') diff --git a/posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html b/posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html index 8a62169..9623ffc 100644 --- a/posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html +++ b/posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html @@ -425,6 +425,6 @@ Serving HTTP on 0.0.0.0 port 8000 <a-torus-knot radius='0.26' radius-tubular='0.05' ></a-torus-knot> </ a-box> </ a-nft> -

Where are the GIFs?

Now that we know how to place a box in the scene and add a torus knot in it, what do we do next? We bring the classic internet back!

AFrame GIF Shader is a gif shader for A-Frame created by mayognaise.

First things first

Add <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script> to <head>

🎦

Change the box's material to add the GIF shader

...
+

Where are the GIFs?

Now that we know how to place a box in the scene and add a torus knot in it, what do we do next? We bring the classic internet back!

AFrame GIF Shader is a gif shader for A-Frame created by mayognaise.

First things first

Add <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script> to <head>

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

Bonus Idea: Integrate it with GitHub's new profile Readme Feature!

1) Host the code using GitHub Pages

2) Create a new repository ( the name should be your GitHub username )

3) Add QR Code to the page and tell the users to scan your profile picture

Profit 💸

Here is a demo of me scanning a rounded version of my profile picture ( It still works! Even though the image is cropped and I haven't changed any line of code )

Tagged with: \ No newline at end of file +

Bonus Idea: Integrate it with GitHub's new profile Readme Feature!

1) Host the code using GitHub Pages

2) Create a new repository ( the name should be your GitHub username )

3) Add QR Code to the page and tell the users to scan your profile picture

??) Profit 💸

Here is a screenshot of me scanning a rounded version of my profile picture ( It still works! Even though the image is cropped and I haven't changed any line of code )

Tagged with: \ No newline at end of file -- cgit v1.2.3