# Shapediver Augmented Reality Example / Template

**URL:** <https://discourse.mcneel.com/t/shapediver-augmented-reality-example-template/133182>\
**Category:** ShapeDiver\
**Tags:** windows\
**Created:** [November 11, 2021, 3:33pm UTC](https://discourse.mcneel.com/t/shapediver-augmented-reality-example-template/133182 "2021-11-11T15:33:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![user924](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/user924/32/532846_2.png) [@user924](https://discourse.mcneel.com/u/user924)\
**Post date:** [November 11, 2021, 3:33pm UTC](https://discourse.mcneel.com/t/shapediver-augmented-reality-example-template/133182/1 "2021-11-11T15:33:15Z")

</div>

Dear shapediver team,

is there any template, code example to get started with the new AR feature?

I have seen that there is some info in the API documentation. Still, some kind of example or template would be highly appreciated to get started quickly.

All the best,  
Daniel

---

<div class="post-metadata">

**Author:** ![mathieu1](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/mathieu1/32/491677_2.png) [@mathieu1](https://discourse.mcneel.com/u/mathieu1)\
**Post date:** [November 12, 2021, 10:53am UTC](https://discourse.mcneel.com/t/shapediver-augmented-reality-example-template/133182/2 "2021-11-12T10:53:07Z")

</div>

Thank you for the suggestion. We will work on a simple code example and get back to you.

---

<div class="post-metadata">

**Author:** ![mathieu1](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/mathieu1/32/491677_2.png) [@mathieu1](https://discourse.mcneel.com/u/mathieu1)\
**Post date:** [November 18, 2021, 2:14pm UTC](https://discourse.mcneel.com/t/shapediver-augmented-reality-example-template/133182/3 "2021-11-18T14:14:41Z")

</div>

Please review the following documentation and let me know if something is unclear: [Augmented Reality (AR)](https://help.shapediver.com/doc/Augmented-Reality-(AR).1842184247.html)

---

<div class="post-metadata">

**Author:** ![user924](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/user924/32/532846_2.png) [@user924](https://discourse.mcneel.com/u/user924)\
**Post date:** [November 20, 2021, 11:52am UTC](https://discourse.mcneel.com/t/shapediver-augmented-reality-example-template/133182/4 "2021-11-20T11:52:04Z")

</div>

Dear Mathieu,

thanks for the answer. Yes, I have seen this part of the documentation. What I would be interested in is how to generate UI elements within the AR environment that enable users to interact with the shapediver model. From what I have seen, the example in the documentation is limited to simply displaying an already configured part in AR.

Best regards,  
Daniel

---

<div class="post-metadata">

**Author:** ![mathieu1](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/mathieu1/32/491677_2.png) [@mathieu1](https://discourse.mcneel.com/u/mathieu1)\
**Post date:** [December 1, 2021, 8:07am UTC](https://discourse.mcneel.com/t/shapediver-augmented-reality-example-template/133182/5 "2021-12-01T08:07:56Z")

</div>

The version 3 of the viewer provides an out-of-the-box functionality to export the entire scene as a glTF or USDZ file and load it in the quick look environment for both Android and iOS devices. This provides an easy to implement way of visualizing on specific configuration in AR, while the parameter updates happen in a traditional web environment.

It is possible to build your own AR native application using our API, since all outputs are sent to the client as glTF files. We will soon also provide a functionality to get those outputs as USDZ files. That being said, we do not have examples of implementation of this approach at the moment.

---

<div class="post-metadata">

**Author:** ![miguelayora3](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/miguelayora3/32/762571_2.png) [@miguelayora3](https://discourse.mcneel.com/u/miguelayora3)\
**Post date:** [December 2, 2021, 7:18am UTC](https://discourse.mcneel.com/t/shapediver-augmented-reality-example-template/133182/6 "2021-12-02T07:18:49Z")

</div>

tutorial for beginners, please.

---

<div class="post-metadata">

**Author:** ![mathieu1](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/mathieu1/32/491677_2.png) [@mathieu1](https://discourse.mcneel.com/u/mathieu1)\
**Post date:** [December 2, 2021, 10:56am UTC](https://discourse.mcneel.com/t/shapediver-augmented-reality-example-template/133182/7 "2021-12-02T10:56:22Z")

</div>

This codepen provides a full example for embedding a ShapeDiver model in a website and creating a button that opens the scene in AR: [https://codepen.io/ShapeDiver/pen/WNEbxYM](https://codepen.io/ShapeDiver/pen/WNEbxYM)