Win MANA and LAND in Decentraland's Creator Contest! Sign up today
Hello! Please choose your
desired language:
Dismiss

Let’s build the metaverse together

The Decentraland SDK provides everything you need to build interactive 3D content for Decentraland.

Shortcuts

Install the CLI

To get started, install the Command Line Interface (CLI).

The CLI allows you to compile and preview your scene locally. After testing your scene locally, you can use the CLI to upload your content.

Note: Install the following dependencies before you install the CLI:

To install the CLI, run the following command in your command line tool of choice:

npm install -g decentraland

Read Installation guide for more details about installing the CLI.

Create your first scene

Create a new scene by running the following code in an empty folder:

dcl init

Preview the 3D scene in your browser by running the following command in that same folder:

dcl start

Read more about the scene preview in preview a scene

Edit the scene

Open the src/game.ts file from your scene folder with the source code editor of your choice.

/// --- Set up a system ---

class RotatorSystem {
  // this group will contain every entity that has a Transform component
  group = engine.getComponentGroup(Transform)

  update(dt: number) {
    // iterate over the entities of the group
    for (let entity of this.group.entities) {
      // get the Transform component of the entity
      const transform = entity.get(Transform)

      // mutate the rotation
      transform.rotate(Vector3.Up(), dt * 10) 
    }
  }
}

// Add a new instance of the system to the engine
engine.addSystem(new RotatorSystem())

/// --- Spawner function ---

function spawnCube(x: number, y: number, z: number) {
  // create the entity
  const cube = new Entity()

  // set a transform to the entity
  cube.add(new Transform({ position: new Vector3(x, y, z) }))

  // set a shape to the entity
  cube.add(new BoxShape())

  // add the entity to the engine
  engine.addEntity(cube)

  return cube
}

/// --- Spawn a cube ---

const cube = spawnCube(5, 1, 5)

cube.add(
  new OnClick(() => {
    cube.get(Transform).scale.z *= 1.1
    cube.get(Transform).scale.x *= 0.9

    spawnCube(Math.random() * 8 + 1, Math.random() * 8, Math.random() * 8 + 1)
  })
)

Change anything you want from this code, for example change the x position of the first cube entity that’s spawned. If you kept the preview running in a browser tab, you should now see the changes show in the preview.

Download this 3D model of an avocado from Google Poly in glTF format. link

Create a new folder under your scene’s directory named /models. Extract the downloaded files and place them all in that folder.

At the end of your scene’s code, add the following lines:

let avocado = new Entity()
avocado.add(new GLTFShape("models/avocado.gltf"))
avocado.add(new Transform({ 
    position: new Vector3(3, 1, 3), 
    scale: new Vector3(10, 10, 10)
    }))
engine.addEntity(avocado)

Check your scene preview once again to see that the 3D model is now there too.

The lines you just added create a new entity, give it a shape based on the 3D model you downloaded, and set its position.

Note that the avocado you added rotates, just like all other entities in the scene. That’s because the RotatorSystem system defined in this scene is iterating over every entity in the scene and rotating it.

Read coding-scenes for a high-level understanding of how Decentraland scenes function.

Scene examples

See sample scenes for more scene examples.

Also see tutorials for detailed instructions for building scenes like these.

Other useful information