Hello! Please choose your
desired language:
Dismiss

XML static scenes

You can create a static scene with XML. The advantage of this is that the code is simpler and straight forward, very similar to the code of an A-frame scene. The disadvantage is that you can’t make the scene dynamic or interactive in any way, users will only be able to walk around it.

Create a static scene

Copy the XML sample scene, following the steps in the create scene to clone a sample scene.

Elements of a static scene

Each XML tag in the scene represents an entity. Entities are nested into a single tree structure where child entities inherit properties from the parent entities, so for example if a parent is rotated, its children will be rotated in the same degree as well.

The scene tree structure must start with a <scene> tag in the root level.

<scene>
  <box position="5 5 1" ></box>
  <entity position=" 1 3 1"></ entity>
    <box position="0 0 0" ></box>
  </entity>
</scene>

Primitive shapes

You can add primitive shapes like boxes, cones, or spheres.

<box color="#ff00aa" position="1 2 3" ></box>
<sphere color="#00aaff" position="1 2 3" scale="4 4 4"></sphere>
<plane color="#00aaff" position="1 2 3" scale="4 4 4" rotation="-90 0 0" ></plane>

3D Models

You can import 3D models in glTF format into your scene. See 3D model considerations for details about what can be supported in 3D models.

<gltf-model position="1 2 3" scale="4 4 4" src="models/dog.gltf"></gltf-model>

All gltf-model entities need to have an src attribute, pointing to a file for the 3D model.

Wrapper entities

You can use basic entities as wrappers to group and transform child entities. These entities are invisible, but any attributes they have are inherited by their children, which can make it easier to scale, rotate or position several entities as a group.

<entity position="5 0 0" rotation="0 90 0">
   <box color="#ff00aa" position="-2 0 0"></box>
   <box color="#00aaff" position="2 0 0"></box>
 </entity>

XML attributes

Entities have different attributes depending on their type, for example it only makes sense for a cylinder to have radiusTop and radiusBottom.

All entities have the following attributes:

  • position: Requires three numbers, detailing the x, y and z coordinates.
  • rotation: Requires three numbers, detailing x, y and z rotation angles, in degrees.
  • scale: Can either have a single number, to maintain the entity’s proportions, or three numbers, in case you want to scale the x, y and z axis in different proportions.

See entity interfaces for a full list of all the available components per type of entity. Each component is expressed as an attribute in XML. Some of these components are only supported in TypeScript scenes.

Migrate an A-frame to a Decentraland static scene

To migrate a scene that was developed in A-frame into decentraland:

  • Create a new static scene with the CLI as explained in Create scene.

    Note: If the size of the A-frame scene is larger than 1 Decentraland parcel, make sure you configure the scene to have enough parcels to fit it.

  • Copy the entire entity structure from your the A-Frame’s index.html file. Paste it in the Decentraland’s scene.xml file, in between the <scene> and </scene> lines. Delete the existing boilerplate box, sphere and cylinder primitives from the scene.
  • Make the following changes to the A-frame primitives:
    • In every tag name that starts with a- remove the a-. So tags like <a-entity> and <a-gltf-model> become <entity> and <gltf-model>.
    • For all position attributes, inverse the z axis. For example position=”10 5 15” should become position=”10 5 -15”.