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 scene.tsx file in your scene folder with the source code editor of your choice.

import * as DCL from "decentraland-api"

export default class SampleScene extends DCL.ScriptableScene {
  async render() {
    return (
      <scene>
        <box
          position={{ x: 5, y: 0.5, z: 5 }}
          rotation={{ x: 0, y: 45, z: 0 }}
          color="#4CC3D9"
        />
        <sphere position={{ x: 6, y: 1.25, z: 4 }} color="#EF2D5E" />
        <cylinder
          position={{ x: 7, y: 0.75, z: 3 }}
          radius={0.5}
          scale={{ x: 0, y: 1.5, z: 0 }}
          color="#FFC65D"
        />
        <plane
          position={{ x: 5, y: 0, z: 6 }}
          rotation={{ x: -90, y: 0, z: 0 }}
          scale={4}
          color="#7BC8A4"
        />
      </scene>
    )
  }
}

Change anything you want from this code, for example change the x position of one of the entities. 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.

In your scene’s code, add the following line in between the other XML entities:

<gltf-model
  src="models/Avocado.gltf"
  position={{ x: 3, y: 0.75, z: 2 }}
  scale={10}
/>

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

Read coding-scenes for a high-level understanding of how Decentraland scenes function. Check scene-content for specifics about how to add content to a scene.

Scene examples

See sample scenes for more scene examples.

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

Other useful information