Using Scene Viewer with echo3D to Display 3D Models in AR
Tags: tutorial, augmentedreality, 3d, sceneviewer
Published: 2022-09-06 23:43:15

If you’re looking to quickly display your 3D model in augmented reality (AR), using Scene Viewer with [**echo3D**](https://www.echo3d.co/)  is a great way to do so.

<center> ![](https://miro.medium.com/max/444/0*m6qq7KqgkpI50cJv)</center> 

Many developers and content creators are overwhelmed by the complexity of creating AR experiences, and would prefer to use a solution that allows you to test the result and how it will look without having to finalize the application first. This is where [**echo3D**](https://www.echo3d.co/) comes in. With echo3D, no technical knowledge is required to display your 3D model of choice in augmented reality.

**Here is a step-by-step guide to quickly and easily display your model in Scene Viewer:**

Adding a 3D Model
=================

Once your [register](https://console.echo3d.co/#/auth/register) to the echo3D platform, you can add content by clicking the “**Add To Cloud**” button.

<center> ![](https://miro.medium.com/max/1400/0*SFeG6v0T-en_dDDZ)</center> 

You can upload your own models and also use the [**search**](https://docs.echoar.xyz/quickstart/add-a-3d-model)  bar to find free 3D models that you can instantly add to the console.

Launching the Scene Viewer App
==============================

Option 1: Scan a QR code
------------------------

Once the 3D hologram is set you can view it instantly with Scene Viewer. Click on the icon below to generate and show the QR codes.

<center> ![](https://miro.medium.com/max/86/0*t9rE4XyG82y0vGD7)</center> 

Make sure the “See on the floor” tab or “See on the wall” tab is selected and shows a QR code that can be detected by the camera. Scan the QR code with your phone’s camera app or with a QR reader app. 
Latest iOS and Android phones are able to read QR code with their default camera apps.

<center> ![](https://miro.medium.com/max/1044/1*QA9H7NOy-E5xal7hXkFJaw.png)![](https://miro.medium.com/max/516/0*DFuwbVEizEFi46JI)</center> 

*   **You did it! 🎉**

Option 2: Go directly to website
--------------------------------

Instead of scanning the QR code, you can click the “share” icon to automatically copy a short link to the model into your clipboard.

<center> ![](https://miro.medium.com/max/1400/0*Ch4xfktpq9aHL5Fv)</center> 

You can browse directly to the short link:

`https://go.echo3D.co/<CODE>`

Alternately, you can also browse directly to:

`https://api.echo3D.co/webar?key=<YOU_API_KEY>&entry=<ENTRY_ID>`

<center> ![](https://miro.medium.com/max/446/0*w0fJoLvEEg9MtAnk)</center> 

Seeing 3D Content in AR
=======================

Click the “See in AR” button. Move the phone around until it detects the surface around you. The 3D model should appear on top of the detected surface. You might need to [scale the model](https://docs.echo3d.co/scene-viewer/transforming-content#scaling-3d-content) to make it fit the screen view.

<center> ![](https://miro.medium.com/max/516/0*NBL316Q-RlFepbc8)</center> 

Switching between 3D Content
============================

You can instantly view all 3D holograms in a particular project through Scene Viewer.

> Viewing multiple holograms is only available in the [Team](https://www.echo3d.co/pricing), [Business](https://www.echo3d.co/pricing), and [Enterprise](mailto:enterprise@echo3D.co) plans.

Go directly to:

`https://api.echo3D.co/webar?key=<YOU_API_KEY>`

If your project includes more than one 3D hologram, a carousel of 3D holograms will appear at the bottom of the screen.

<center> ![](https://miro.medium.com/max/476/0*L1OxwORlu8BO2QwZ)</center> 

Switch between the holograms by clicking their thumbnail in the hologram carousel.

<center> ![](https://miro.medium.com/max/516/0*kuYGyxdKzbyFqvdy)</center> 

> The carousel of 3D holograms can also appear in the AR view but only on Android devices.

Changing the Default AR Mode or Placement
=========================================

Different AR modes allow for different features (such as occlusion, UI, wall placement, etc.) to take effect in the web AR viewer.

If you’d like to change the default AR mode or placement used to view the 3D content, go back to the console and [add metadata](https://docs.echo3d.co/web-console/manage-pages/data-page/how-to-add-data#adding-metadata) to change the default mode or placement. After adding metadata, [relaunch the experience.](https://docs.echo3d.co/scene-viewer/deploy-experience#launching-the-scene-viewer-app)       

See [here](https://docs.echo3d.co/scene-viewer/deploy-experience) for a list of words the system uses as pre-defined metadata keys to set the default AR mode or placement.

> Remember to [relaunch the experience](https://medium.com/scene-viewer/deploy-experience#launching-the-scene-viewer-app) after adding metadata with Scene Viewer experiences for the change to take effect.

<center> ![](https://miro.medium.com/max/444/0*TMSGG5mUHuR4bEll)</center> 

Adding Text to 3D Content
=========================

If you’d like to annotate the content, go back to the console and [add metadata](https://medium.com/web-console/manage-pages/data-page/how-to-add-data#adding-metadata) to add text. After adding metadata [relaunch the experience](https://medium.com/scene-viewer/deploy-experience#launching-the-scene-viewer-app).

See [here](https://docs.echo3d.co/scene-viewer/transforming-content) for a list of words the system uses as pre-defined metadata keys to add and design text.

> Remember to [relaunch the experience](https://medium.com/scene-viewer/deploy-experience#launching-the-scene-viewer-app) after adding metadata with Scene Viewer experiences for the change to take effect.

<center> ![](https://miro.medium.com/max/516/0*vk3jtCk0Z28g0e5S)</center> 

> **Can’t see the text?** The original size of the model might affect the annotations’ coordinate system and displace the location of text. We recommend placing your annotations at 0,0,0 first and then fine tuning the coordinate of each axis.

Getting 3D Content based on Location
====================================

You can choose to retrieve only 3D holograms that include a geolocation target set to a specific location around a specific radius.

Go directly to:

`https://api.echo3D.co/webar?key=<YOU_API_KEY>&location=<LAT>,<LONG>&radius=<RADIUS>`

**Embed into Website or App**
=============================

You can easily embed the Scene Viewer experience generated and hosted through the console to any web page. The web page can be part of a website or integrated in a mobile app.

Using iframe
------------

In order to embed the Scene Viewer experience you must declare an `iframe` tag and set its source to the address of the hosted experience. You can use the full URL as the source:

`<iframe src=”[https://api.echo3D.co/webar?key=](https://api.echo3D.co/webar?key=)<YOUR_API_KEY>&entry=<ENTRY-ID>"/>`

Or the short shareable link:

`<iframe src="[https://go.echo3D.co/](https://go.echo3D.co/)<SHORT-CODE>"/>`

You can find a code example for a full styled HTML page with an embedded Scene Viewer experience [here](https://docs.echo3d.co/scene-viewer/embed-into-website-or-app).

**Add Code** to your Scene Viewer project.
==========================================

Now that you are able to embed the Scene Viewer experience generated and hosted through the console, it’s time to [inject your own scripts into the webpage.](https://docs.echo3d.co/scene-viewer/add-code)

If you’d like to inject your own JavaScript scripts into the webpage, go back to the console and [add metadata](https://docs.echoar.xyz/web-console/manage-pages/data-page/how-to-add-data#adding-metadata) to add code to the experience. After adding metadata [relaunch the experience](https://docs.echoar.xyz/scene-viewer/deploy-experience#launching-the-scene-viewer-app). See [here](https://docs.echo3d.co/scene-viewer/add-code) for a list of words the system uses as pre-defined metadata keys to control built-in animations.

Remember to [relaunch the experience](https://docs.echoar.xyz/scene-viewer/deploy-experience#launching-the-scene-viewer-app) after adding metadata with Scene Viewer experiences for the changed to take 
effect.

> Adding scripts into webAR experiences is only available in the [Enterprise](mailto:enterprise@echo3D.co) plan.

Troubleshooting
===============

Troubleshoot issues [here](https://docs.echo3d.co/scene-viewer/troubleshooting). You can check out our full documentation for other useful tutorials [here](https://docs.echo3d.co/) and also reach out to our support team [here](http://go.echoar.xyz/join).

**Final Thoughts**
==================

[**echo3D**](https://www.echo3d.co/) allows users to view 3D models quickly, and with ease. With echo3D, you can create customized WebAR experience for a variety of uses — [sports](https://medium.com/echo3d/all-the-ways-augmented-reality-and-virtual-reality-are-shaping-sports-ef91b6f4423f), [fashion](https://medium.com/echo3d/augmented-reality-virtual-reality-fashion-try-before-you-buy-fcd281ef6d4b) (try before you buy!), [shopping](https://medium.com/echo3d/how-augmented-reality-is-redefining-online-shopping-and-my-own-shopping-experience-125fa42e921c), [healthcare](https://medium.com/echo3d/how-augmented-reality-and-virtual-reality-are-revolutionizing-healthcare-db46c462d8bf), [real estate](https://medium.com/echo3d/how-ar-vr-are-transforming-the-real-estate-industry-25d183d7e5), and so much more! Try [echo3D](https://www.echo3d.co/) today.

Frequently Asked Questions (FAQs):
==================================

**_Is echo3D compatible with different AR/VR technologies?_**

Yes! You can use echo3D to create no-code WebAR experiences but this is just the tip of the iceberg. Our cross-platform system supports any AR/VR client-side SDK for developers to choose to build their app, such as ARCore, ARKit, Vuforia, WebXR, AR.js, Swift, Flutter, Oculus SDK, Unity-based SDKs, Microsoft HoloLens, MagicLeap, and more. echo3D is also a Unity Verified Solutions Partner.

**_Where can I learn more?_**

Check out our AR/VR dev workshop recording on [YouTube](https://www.youtube.com/watch?v=3ylZzKYREko) and our [website](https://www.echo3d.co/). You can check out our full documentation for other useful tutorials [here](http://docs.echo3d.co/).

**_How do I get in touch?_**

If you have any other questions, join our [Slack](https://medium.com/echo3d/go.echo3d.co/join), send us an email, reach out on [Facebook](https://www.facebook.com/echo3DInc/), connect on [LinkedIn](https://www.linkedin.com/company/echo3d/), or [tweet](https://twitter.com/_echo3D_) to say hello.

_By Nino Debarros_

***

>**_echo3D_** _(_[_www.echo3D.co_](http://www.echo3d.co/)_) is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content._

![](https://miro.medium.com/max/1400/0*iFk6-5qYK9SNBJlt.png)