diff options
Diffstat (limited to 'docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html')
| -rw-r--r-- | docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html | 24 |
1 files changed, 16 insertions, 8 deletions
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 <p>Create a new file called <code>index.html</code> in your project folder. This is the basic template we are going to use. Replace <code>me</code> with the root filename of your image, for example <code>NeverGonnaGiveYouUp.png</code> will become <code>NeverGonnaGiveYouUp</code>. Make sure you have copied all three files from the output folder in the previous step to the root of your project folder.</p> -<div class="codehilite"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +<div class="codehilite"> +<pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">style</span><span class="p">></span><span class="w"></span> @@ -231,7 +232,8 @@ me.fset me.fset3 me.iset <span class="p"><</span><span class="nt">a-entity</span> <span class="na">camera</span><span class="p">></</span><span class="nt">a-entity</span><span class="p">></span> <span class="p"></</span><span class="nt">a-scene</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> -</code></pre></div> +</code></pre> +</div> <p>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!</p> @@ -239,10 +241,12 @@ me.fset me.fset3 me.iset <p>Let us add a simple box!</p> -<div class="codehilite"><pre><span></span><code><span class="p"><</span><span class="nt">a-nft</span> <span class="err">.....</span><span class="p">></span> +<div class="codehilite"> +<pre><span></span><code><span class="p"><</span><span class="nt">a-nft</span> <span class="err">.....</span><span class="p">></span> <span class="p"><</span><span class="nt">a-box</span> <span class="na">position</span><span class="o">=</span><span class="s">'100 0.5 -180'</span> <span class="na">material</span><span class="o">=</span><span class="s">'opacity: 0.5; side: double'</span> <span class="na">scale</span><span class="o">=</span><span class="s">"100 100 100"</span><span class="p">></</span><span class="nt">a-box</span><span class="p">></span> <span class="p"></</span><span class="nt">a-nft</span><span class="p">></span> -</code></pre></div> +</code></pre> +</div> <p>Now to test it out we will need to create a simple server, I use Python's inbuilt <code>SimpleHTTPServer</code> alongside <code>ngrok</code> </p> @@ -277,12 +281,14 @@ Serving HTTP on 0.0.0.0 port 8000 ... <p>Edit your <code>index.html</code> </p> -<div class="codehilite"><pre><span></span><code><span class="p"><</span><span class="nt">a-nft</span> <span class="err">..</span><span class="p">></span> +<div class="codehilite"> +<pre><span></span><code><span class="p"><</span><span class="nt">a-nft</span> <span class="err">..</span><span class="p">></span> <span class="p"><</span><span class="nt">a-box</span> <span class="err">..</span><span class="p">></span> <span class="p"><</span><span class="nt">a-torus-knot</span> <span class="na">radius</span><span class="o">=</span><span class="s">'0.26'</span> <span class="na">radius-tubular</span><span class="o">=</span><span class="s">'0.05'</span> <span class="p">></</span><span class="nt">a-torus-knot</span><span class="p">></span> <span class="p"></</span> <span class="nt">a-box</span><span class="p">></span> <span class="p"></</span> <span class="nt">a-nft</span><span class="p">></span> -</code></pre></div> +</code></pre> +</div> <p><img src="/assets/posts/arjs/03-knot.png" alt="" /></p> @@ -298,9 +304,11 @@ Serving HTTP on 0.0.0.0 port 8000 ... <p>Change the box's material to add the GIF shader</p> -<div class="codehilite"><pre><span></span><code>... +<div class="codehilite"> +<pre><span></span><code>... <span class="p"><</span><span class="nt">a-box</span> <span class="na">position</span><span class="o">=</span><span class="s">'100 0.5 -180'</span> <span class="na">material</span><span class="o">=</span><span class="s">"shader:gif;src:url(https://media.tenor.com/images/412b1aa9149d98d561df62db221e0789/tenor.gif);opacity:.5"</span> <span class="err">.....</span><span class="p">></span> -</code></pre></div> +</code></pre> +</div> <p><img src="/assets/posts/arjs/04-nyan.gif" alt="" /></p> |