---
title: A-Frame
slug: a-frame
icon: 🅰️
docTags: 
createdAt: 2022-03-30T11:09:34.000Z
---

[A-Frame](https://aframe.io/) is an easy to use web framework for building 3D/AR/VR experiences. You can easily use Sense of Space Streamable models in A-Frame. 

### Usage

To use the Sense of Space geometry streaming in AFrame you will need to include the following script tag in your html in addition to your AFrame:

```xml
<script src="https://assets.senseofspace.io/streamablemodel/0.0.10/sosStreamableModelAframe.js"></script>
```

If you wish to use a version of AFrame that has been most tested with the Sense of Space Geometry Streaming plugin, you can use the following line:

```xml
<script src="https://assets.senseofspace.io/streamablemodel/0.0.10/lib/aframe-v1.1.0.min.js"></script>
```

Now you can add one or more streamable models to your scene by adding a-entity tags with the component sosstreamablemodel. E.g.:

```xml
<a-entity position="0 0 0" sosstreamablemodel="path:model.sxrweb;equirecEnvMap:env-sky.jpg;shadows:true;quality:2"></a-entity>
```

This will place a streamable model from a file model.sxrweb into the origin. It'll enable shadows in the materials and load an environment map from env-sky.jpg.

### Supported Parameters

As can be seen in the example above you can set a number of parameters to the **sosstreamablemodel&#x20;**&#x63;omponent:

| **Name**                 | **Description**                                                                                                                                                                                                                                                                                     | **Default value** |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
| **path**                 | The path to the streamable asset.                                                                                                                                                                                                                                                                   | './model.sxrweb'  |
| **useAlpha**             | Enable semi-transparent materials                                                                                                                                                                                                                                                                   | false             |
| **useMetalRoughness**    | Use PBR shading. Can be set to false if you want flat shading for e.g. photogrammetry models.                                                                                                                                                                                                       | true              |
| **occlusionCulling**     | Use occlusion culling. This will reduce the amount of rendered triangles and can speed up rendering significantly, but does not work well with shadows.                                                                                                                                             | true              |
| **equirecEnvMap**        | Path to an equirectangular environment map. Currently only the jpg format is supported. Can be left empty.                                                                                                                                                                                          | ''                |
| **doubleSidedMaterials** | Will switch on double sided surfaces in materials.                                                                                                                                                                                                                                                  | false             |
| **quality**              | A number for adjusting the quality level (and bandwidth requirement). Can be any number, but should normally be between 0 and 3.<br />Reference:<br />- 0 = low quality<br />- 1 = medium quality<br /> - 2 = high quality<br /> - \< 0 = extremely low quality<br /> - > 2 extremely high quality. | 1.0               |
| **shadows**              | This needs to be set to true if you wish the streamable asset to cast and receive threejs shadows.                                                                                                                                                                                                  | false             |