---
# System prepended metadata

title: A Frame AR INTERFACE WEB

---

## AI

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTSdgF2jn4RmIlporGtkoPXm3c0F7Gca9W0ootUqvexy3MAMLMme8_uwehfHrQqUCgKhQcULPd_zR21/embed?start=false&loop=false&delayms=3000" frameborder="0" width="700" height="450" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

## AR/VR
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQFTVh2Cm1QdTmHQGyighiDpATQuT48wk1wqv1MfTWKi0oIA4Cs63G1J1nSbD3G1hUrxGx3YEh8qPVF/embed?start=false&loop=false&delayms=3000" frameborder="0" width="700" height="450" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>




### Links

<div class="sketchfab-embed-wrapper">
    <iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/951466585a424860ae8d05fc85c47d14/embed?autostart=0&amp;ui_controls=1&amp;ui_infos=1&amp;ui_inspector=1&amp;ui_stop=1&amp;ui_watermark=1&amp;ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
        <a href="https://sketchfab.com/3d-models/valldaura-951466585a424860ae8d05fc85c47d14?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Valldaura</a>
        by <a href="https://sketchfab.com/5freerider5?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">5freerider5</a>
        on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
    </p>
</div>



https://sketchfab.com/3d-models/valldaura-951466585a424860ae8d05fc85c47d14


# A Frame AR INTERFACE WEB

https://codepen.io/jeromeetienne/pen/mRqqzb

# 3D PRINT MAT

![](https://i.imgur.com/EPbABFg.png)


# AR CODE OF THE CITY MODEL TO SHOW ON THE PHONE


Link de codepen(exercise-1) : https://codepen.io/jeromeetienne/pen/mRqqzb?editors=1000


If you copy this whole code and substitute the one on the link you will AR view the city on your phone.


    <!-- AR.js by @jerome_etienne - github: https://github.com/jeromeetienne/ar.js - info: https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf -->
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>

    <body style='margin : 0px; overflow: hidden;'>
        <a-scene embedded arjs='sourceType: webcam;'>

          <a-assets>
        <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item>
      </a-assets>
      <a-entity scale="1 1 1"gltf-model="#cityModel" modify-materials></a-entity>


            <a-marker-camera preset='hiro'></a-marker-camera>
        </a-scene>
    </body>
    
    
# AR AVOCADO

   <!-- AR.js by @jerome_etienne - github: https://github.com/jeromeetienne/ar.js - info: https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf -->
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>

    <body style='margin : 0px; overflow: hidden;'>
        <a-scene embedded arjs='sourceType: webcam;'>

      <a-assets>
        <a-asset-item id="cityModel" src="https://raw.githubusercontent.com/dougsillars/glTF_optimization/master/Avocado/glTF-pbrSpecularGlossiness/Avocado.gltf"></a-asset-item>
      </a-assets>
      <a-entity scale="30 30 30"gltf-model="#cityModel" modify-materials></a-entity>


            <a-marker-camera preset='hiro'></a-marker-camera>
        </a-scene>
    </body>
    
    
# References

### Block by Block Project 
![](https://i.imgur.com/n2SEQbf.png)


Created by Un-Habitat's Programme Officer Pontus Westerberg, an intervention to use Minecraft as a game to co-design cities, and allow for participatory practices within communities at risk:

https://www.blockbyblock.org/

