How to Use 8th Wall with echo3D
Tags: echo3d, 8thwall, augmentedreality, tutorial
Published: 2021-11-15 10:09:48

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636970229525/dnl0ibqrg.png)

Here’s a great demo of how to integrate [echo3D ](https://www.echo3d.co/) with [8th Wall](https://www.8thwall.com/). The full demos can also be found on echo3D’s [GitHub](https://github.com/echo3Dco/8thWall-echo3D-example).


![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636970265845/xsz6LEO5p.png)

## Register
Don’t have an API key? Make sure to register for FREE at [echo3D](https://console.echo3d.co/#/auth/register).

## Setup
* Create a new 8th Wall project.
* Add [echoAR.js](https://github.com/echo3Dco/8thWall-echo3D-example/blob/main/echoAR.js) to the project files.
* On the JavaScript file that runs your scene, type `import {echoAR} from './echoAR.js'; to` import the echoAR class.
* Create a new echoAR object using `var echo = new echoAR(YOUR_API_KEY);`.
* To download the 3D models from your echo3D console, use the `findObject()` method. Each model will be placed as entries into a JavaScript map.
* Use `echo.models.get(ENTRY_ID)` to access these entries in your main JavaScript file, where ENTRY_ID is the `Entry ID` listed in the console.
* Look through the examples folder to see how echo3D can be implemented on existing 8th Wall demos. Replace any files in the 8th Wall console with their counterparts in the examples folder.

## Map Attributes
* `echo.models.get(ENTRY_ID).hologram` is the .glb model whose physical properties can be changed programmatically.
* `echo.models.get(ENTRY_ID).direction` is the direction information that is pulled down from the console in `transformations()`. Look at the examples below to see how to rotate models in an animate() function.
* `echo.models.get(ENTRY_ID).url` is the URL of the .glb model.
* `echo.models.get(ENTRY_ID).imageTarget` is the file name of the image target if one exists. Otherwise it is null.

## ThreeJS
* To initially load the models into the JavaScript map, type `echo.findObject(false, function(data) { // CODE })`, where any code put inside the callback function will run after the models are fully loaded into the map.

**Accessing and changing physical characteristics**
* Position: `echo.models.get(ENTRY_ID).hologram.position`
* Rotation: `echo.models.get(ENTRY_ID).hologram.rotation`
* Scale: `echo.models.get(ENTRY_ID).hologram.scale`

## A-Frame
* To initially load the models into the JavaScript map, type `echo.findObject(true, function(data) { // CODE })`, where any code put inside the callback function will run after the models are fully loaded into the map.

**Accessing and changing physical characteristics**
* Position: `echo.models.get(ENTRY_ID).hologram.object3D.position`
* Rotation: `echo.models.get(ENTRY_ID).hologram.object3D.rotation`
* Scale: `echo.models.get(ENTRY_ID).hologram.object3D.scale`

## Run
* Press `Save+Build` to build your 8th Wall project.
* Press `Preview` and scan the QR code to run the project on your phone.

## Full Code examples
The full demos can also be found on echo3D’s [GitHub](https://github.com/echo3Dco/8thWall-echo3D-example).

## Learn more
Refer to our [documentation](https://docs.echoar.xyz/) to learn more about how to use echo3D.

## Support
Feel free to reach out at support@echo3D.co or join our [support channel on Slack](https://join.slack.com/t/echoar/shared_invite/enQtNTg4NjI5NjM3OTc1LWU1M2M2MTNlNTM3NGY1YTUxYmY3ZDNjNTc3YjA5M2QyNGZiOTgzMjVmZWZmZmFjNGJjYTcxZjhhNzk3YjNhNjE).

## Screenshots
A-Frame Place Ground Example

[2.gif](https://i.postimg.cc/VkCsQ7BZ/2.gif)

AFrame Image Target Example

![3.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1636970743944/P0fK6AMQX.gif)

AFrame Manipulate 3D Model Example

![4.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1636970754402/o0FsUm1Xv.gif)

***
> echo3D (www.echo3D.co; Techstars 19’) 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.

![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636970644833/_jiC2Jdf3.png)