DEV Community

Cover image for How to Create a Twitter Hashtag Visualizer in Augmented Reality (AR) in 15 Minutes or Less
echo3D for echo3D

Posted on

How to Create a Twitter Hashtag Visualizer in Augmented Reality (AR) in 15 Minutes or Less

Looking to build an app where you can visualize tweets from Twitter in augmented reality (AR)? This Twitter hashtag visualizer is a great place to start. Type a hashtag search query such as #election2020 or #BlackLivesMatter (with no spaces for now!) into a search bar to spawn up to 15 local tweets containing your hashtag. The full demo can also be found on echoAR’s GitHub.

1.png

Register

Don’t have an API key? Make sure to register for FREE at echoAR.

Setup

Twitter

  1. Create a Twitter account if you don’t have one already. This will allow you to access the Twitter developer site
  2. Head to the Twitter developer site and create a new application.
  3. Fill out all the details and once you complete it you will receive an API Key and an API Secret Key which will be used in the Unity app.

Unity

  1. Clone echoAR-Twitter-Demo sample code.
  2. Add and Open repo in Unity Hub as Unity 3D Project
  3. Download echoAR Unity SDK and import the package into the project
  4. Set the echoAR API key in the echoAR.cs script inside the Assets/echoAR/echoAR.prefab using the the Inspector.
  5. In Assets/echoAR/CustomBehaviour.cs, comment out line 27 this.gameObject.AddComponent<RemoteTransformations>().entry = entry;

and replace with:

// Set Rotation to parent
this.gameObject.transform.rotation = this.gameObject.transform.parent.transform.rotation;
// Set Scale
this.gameObject.transform.localScale = new Vector3(0.001f, 0.001f, 0.001f);

  1. Open Assets/Scenes/Main.
  2. Click on the TweetManager game object in the heirarchy and in the Inspector > TweetManager(Script) add your Twitter API Key and API Secret Key.
  3. In the TweetManager game object, in the Inspector > TweetGenerator(Script)
  • Add Assets/Prefabs/TweetObject.Prefab to the Tweet Prefab field.
  • Add Assets/echoAR/echoAR.prefab to the Object To Spawn field.
  • Add ARCamera from the hierarchy to the Spawn Point field.

2.png

Build & Run

Build and run the AR application. Verify that the Assets/Scenes/Main scene is ticked in the Scenes in Build list and click Build And Run.

3.png

Learn More

Refer to our documentation to learn more about how to use Unity and echoAR.

Support

Feel free to reach out at support@echoAR.xyz or join our support channel on Slack.


echoAR (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.

4.png

Top comments (0)