Jump to content

Creating a WebAR image in my homepage

Recommended Posts

Hi, 

I want to add the following code to my home page and create e folder  .img  - 

 

Can you please help me? 

 

 

<!DOCTYPE html>
<html>
<head>
    <title>AR Demo</title>
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script>
        // We're going to register a custom event listener through a-frame that will fire
        // whenever a marker has entered the camera view and is found through ar.js
        AFRAME.registerComponent('registerevents', {
            init: function() {
                var marker = this.el;

                // Element emits events when found and lost
                marker.setAttribute('emitevents', 'true');

                marker.addEventListener('markerFound', function() {
                    // Alright, a marker has been found. Let's get the video element
                    var vid = document.getElementById('waterVideo');

                    // Make sure that the video a-frame object is visible
                    document.querySelector('#water').setAttribute('visible', true);

                    // Reset the video to the beginning and play it through
                    vid.currentTime = 0;                    
                    vid.play();

 

 

More information about WebAR can be found here.

https://ar-js-org.github.io/AR.js-Docs/

Link to comment
  • Replies 1
  • Views 300
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

 

Hi, 

I want to add the following code to my home page and create e folder  .img  - 

 

Can you please help me? 

 

 

<!DOCTYPE html>
<html>
<head>
    <title>AR Demo</title>
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script>
        // We're going to register a custom event listener through a-frame that will fire
        // whenever a marker has entered the camera view and is found through ar.js
        AFRAME.registerComponent('registerevents', {
            init: function() {
                var marker = this.el;

                // Element emits events when found and lost
                marker.setAttribute('emitevents', 'true');

                marker.addEventListener('markerFound', function() {
                    // Alright, a marker has been found. Let's get the video element
                    var vid = document.getElementById('waterVideo');

                    // Make sure that the video a-frame object is visible
                    document.querySelector('#water').setAttribute('visible', true);

                    // Reset the video to the beginning and play it through
                    vid.currentTime = 0;                    
                    vid.play();

 

 

More information about WebAR can be found here.

https://ar-js-org.github.io/AR.js-Docs/

 
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.