Aframe Objects

Virtual Reality

Aframe Objects and Models

Aframe Adding Objects

If you don’t remember your username and password refer to the spreadsheets below.

Adding Text

To guide users on how to interact with your VR World you would need to add text to your scene. Luckily aframe has a built in text system where you can place the text anywhere in your scene.

We modify the same attributes as we’ve done before such as color, position, scale. The new attribute we’re dealing with is value which shows the text that will be shown.

<a-text value="Hello, modify this text" color="#BBB" position="-0.9 0.2 -3" scale="1.5 1.5 1.5"><\a-text>

Explore

Add text into your VR scene. Properly place the text so that its the first thing users see when they spawn.

Adding Audio

To add immersion to our VR experience we need to add some audio. Aframe allows us to do this very easily via two ways:

First Way:
Adding audio via <\a-assets>like so:

<a-assets>
  <audio src="https:\\s3.amazonaws.com\tag-audio-assets\creepy.wav" loop autoplay preload><\audio>
<\a-assets>
<!--  We add everything here!  -->

We add audio via the src attribute just like we do with images.

Second Way:
We can position audio so when you walk closer and away from where it’s positioned. We do this by adding to our a-scene and utilize the position attribute to place the audio source in the scene

<a-sound src="https:\\s3.amazonaws.com\tag-audio-assets\creepy.wav" autoplay="true" position="-3 1 -4"><\a-sound>

Explore

Place two audio sources in the scene via positioned audio and stagnant audio.
– Place one audio source attached to an object in the scene
– Have another audio source playing stagnantly

Feel free to find some other music but it has to be in wav format.

Below are some links you can use for audio for you to get started:
– https:\cdn.glitch.com\aaf7dc42-c203-4439-82f2-b9d563e1a08f%2Fa03d448b-7a32-46de-9802-2fe7cb9fbce7_Substantial%20-%20Seeds%20EP%20-%2005%20Blown.wav?1520659938837
– https:\cdn.glitch.com\aaf7dc42-c203-4439-82f2-b9d563e1a08f%2Fa03d448b-7a32-46de-9802-2fe7cb9fbce7_Substantial%20-%20Seeds%20EP%20-%2003%20Chopovich.wav?1520659945884
– https:\cdn.glitch.com\aaf7dc42-c203-4439-82f2-b9d563e1a08f%2Fa03d448b-7a32-46de-9802-2fe7cb9fbce7_Substantial%20-%20Seeds%20EP%20-%2002%20The%20Little%20Things.wav?1520659969308
– https:\cdn.glitch.com\aaf7dc42-c203-4439-82f2-b9d563e1a08f%2Fa03d448b-7a32-46de-9802-2fe7cb9fbce7_Substantial%20-%20Seeds%20EP%20-%2004%20Moment.wav?1520659986986
– https:\cdn.glitch.com\aaf7dc42-c203-4439-82f2-b9d563e1a08f%2Fa03d448b-7a32-46de-9802-2fe7cb9fbce7_Substantial%20-%20Seeds%20EP%20-%2006%20The%20Fading%20Artist.wav?1520660020227

More Audio here:

Adding 3D Models

Adding shapes and textures are cool but we want to take the customization a step further with adding 3D models.

To add 3D models we need to add it to our assets section and reference that asset from an entity.

<a-assets>
  <a-asset-item id="our-model" src="https:\\s3.amazonaws.com\tag-3d-assets\fortnite-character\scene.gltf"><\a-asset-item>
<\a-assets>
<!-- Add entity model here: --> 
<a-entity gltf-model="#our-model" position="3 0 -3" scale="0.01 0.01 0.01"><\a-entity>

We reference the asset via the gltf attribute. This references the model preloaded from the src attribute.

List of 3D models to use in your theme:
– fortnite-character https:\s3.amazonaws.com\tag-3d-assets\fortnite-character\scene.gltf
– knight https:\s3.amazonaws.com\tag-3d-assets\knight\scene.gltf
– lambo https:\s3.amazonaws.com\tag-3d-assets\lambo\scene.gltf
– landscape https:\s3.amazonaws.com\tag-3d-assets\landscape\scene.gltf
– mushrooms https:\s3.amazonaws.com\tag-3d-assets\mushrooms\scene.gltf
– pine-tree https:\s3.amazonaws.com\tag-3d-assets\pine-tree\scene.gltf
– pizza https:\s3.amazonaws.com\tag-3d-assets\pizza\scene.gltf
– saturn https:\s3.amazonaws.com\tag-3d-assets\saturn\scene.gltf
– sci-fi-level https:\s3.amazonaws.com\tag-3d-assets\sci-fi-level\scene.gltf
– spaceman https:\s3.amazonaws.com\tag-3d-assets\spaceman\scene.gltf
– squirrel https:\s3.amazonaws.com\tag-3d-assets\squirrel\scene.gltf
– starship https:\s3.amazonaws.com\tag-3d-assets\starship\scene.gltf
– supermarine https:\s3.amazonaws.com\tag-3d-assets\supermarine\scene.gltf
– t-rex https:\s3.amazonaws.com\tag-3d-assets\t-rex\scene.gltf

Explore

  • Place a 3d model in your VR scene. Scale your 3D model to your liking. Make sure the models are in proportion to other 3D models.

Follow us online