Open-source 3D Mini Map in Decentraland with SDK 7

Welcome to a fun project that brings interactive 3D mini maps to life in Decentraland using SDK 7! This open-source project allows users to click on pointers to see information about different areas and then use the "Jump In" button to teleport to those locations. This guide will take you through the steps to set up, customize, and deploy this project, making it a helpful addition to your Decentraland scenes.

open-source Features

• Interactive 3D Mini Map: Explore different areas of your scene using a 3D mini map.

• Clickable Pointers: Click on pointers to display detailed information about each area.

• Teleportation: Use the "Jump In" button to teleport to the selected location.

Step-by-Step Guide

1. Getting Started

To begin, you need to set up your development environment. Ensure you have Node.js and the Decentraland CLI installed.

Install the CLI

Run the following command to install the Decentraland CLI globally:

npm i -g decentraland

Clone the Repository

Clone the project repository from GitHub:

git clone https://github.com/KJwalker3D/miniMap.git

cd miniMap

2. Previewing the Scene

You can preview the scene using the Decentraland Editor.

Install the Decentraland Editor

Follow the Decentraland Editor installation guide to set up the editor in Visual Studio Code.

Run the Scene

1. Open the root folder of the scene in Visual Studio Code.

2. Open the Decentraland Editor tab and press Run Scene.

Alternatively, you can use the command line:

npm run start

This will start a local server where you can preview the scene in your browser.

3. Customizing the Mini Map

You can easily customize the mini map to fit your project's needs by modifying a few key files.

mapData.ts

This file defines the positions, names, and teleport locations of the pointers.

interface PointerData {

  position: Vector3 // Pointer position on mini map

  id: string // Pointer ID

  name: string // Pointer name

  mapPos: Vector3 // Teleport location

  details: string // Text to display on panel when pointer is active

}

export const POINTER_POSITIONS: PointerData[] = [

  { 

    position: Vector3.create(-0.625, 1.2, -0.67), 

    id: 'A', 

    name: 'Info Booth', 

    mapPos: Vector3.create(1, 1, 1),

    details: 'info booth ---------- learn about the project' 

  },

  // Add more pointers here...

]

resources.ts

This file manages resources like 3D models used in the scene.

factory.ts

Contains functions to create buttons, the base map, and hover effects.

4. Deploying the Scene

Once you're happy with your scene, you can deploy it to Decentraland.

Deploy to Decentraland

1. Ensure the scene parcels in scene.json match those you own or have permissions on.

2. Run dcl deploy in the project folder.

3. A browser tab will open for confirmation, and Metamask will prompt you to sign. Note: Use the wallet that owns the parcels or has permissions.

Deploy to a Free Server

If you don't own parcels or are not ready to publish to Decentraland, you can upload your scenes to a free hosting service. Follow the Upload a preview guide for instructions.

Conclusion

This 3D mini map project is an open-source addition to your Decentraland scenes, providing an interactive way for users to explore and teleport to various locations. Customize it to fit your needs and deploy it to make your Decentraland experience even more engaging.

Further Reading

For more detailed documentation on building scenes in Decentraland, visit the Decentraland documentation.

License

This project is licensed under the MIT License. See the terms and conditions in the LICENSE file.

Feel free to integrate this mini map into your projects and contribute to its development. Happy building!