If you’re looking to quickly display your 3D model in augmented reality (AR), using Scene Viewer with echo3D is a great way to do so.
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 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 to the echo3D platform, you can add content by clicking the “Add To Cloud” button.
You can upload your own models and also use the search 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.
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.
- 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.
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>
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 to make it fit the screen view.
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, Business, and Enterprise 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.
Switch between the holograms by clicking their thumbnail in the hologram carousel.
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 to change the default mode or placement. After adding metadata, relaunch the experience.
See here 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 after adding metadata with Scene Viewer experiences for the change to take effect.
Adding Text to 3D Content
If you’d like to annotate the content, go back to the console and add metadata to add text. After adding metadata relaunch the experience.
See here for a list of words the system uses as pre-defined metadata keys to add and design text.
Remember to relaunch the experience after adding metadata with Scene Viewer experiences for the change to take effect.
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.
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.
If you’d like to inject your own JavaScript scripts into the webpage, go back to the console and add metadata to add code to the experience. After adding metadata relaunch the experience. See here for a list of words the system uses as pre-defined metadata keys to control built-in animations.
Remember to relaunch the experience after adding metadata with Scene Viewer experiences for the changed to take effect.
Adding scripts into webAR experiences is only available in the Enterprise plan.
Troubleshooting
Troubleshoot issues here. You can check out our full documentation for other useful tutorials here and also reach out to our support team here.
Final Thoughts
echo3D allows users to view 3D models quickly, and with ease. With echo3D, you can create customized WebAR experience for a variety of uses — sports, fashion (try before you buy!), shopping, healthcare, real estate, and so much more! Try echo3D 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 and our website. You can check out our full documentation for other useful tutorials here.
How do I get in touch?
If you have any other questions, join our Slack, send us an email, reach out on Facebook, connect on LinkedIn, or tweet to say hello.
By Nino Debarros
echo3D (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.
