Eth Metaverse Template


This template allows you to create your own multiplayer Metaverse DApp, that lets users interact with smart contracts through the use of solidity, and engage with other users inside a 3D environment in real-time via the use of Websockets.

Table of Contents


Building on that last point.. 👇

What does this template do?

This template helps you create all cloud resources and setup a local host development environment for your own custom multiplayer Metaverse Decentralised App (DApp).

Toggle the below tabs to understand how this works:

This template allows you to create a multiplayer Metaverse DApp that can render on different devices by

  • using the users account address from the Metamask Wallet as part of the Web3 login process
  • once logged in, they gain access to the web 3d environment created with React Three Fiber (three.js and react.js)
  • then their positional data in the 3d environment is sent in real time to a database and stored against the account address that they used to sign in with
  • as that data is sent in real time to the database, the websockets also then update the DApp front ends of all other users with your position, so all users can see each other moving and interacting with the DApp in real-time


The below image over simplifies how this concept works across multiple users signed in on Metamask using their laptops.


This template is powered by Terraform, Serverless Framework and Next.js, the breakdown of what they each do is as follows.

Terraform is responsible for creating all cloud resources, excluding lambda functions.

Serverless Framework creates the lambda functions that run the Back End business logic (e.g retrieving/saving DynamoDB data, Auth with Web3.js and STS tokens etc) and deploys them to the API Gateway created by Terraform.

Next.js is the Front End that, once statically served from the S3 bucket – renders the 3D environment, communicates with the Back End via HTTP requests / Web Sockets and authenticates/interacts with the Ethereum Blockchain via Metamask and Web3.js.

The way a user would then interact with the app is as follows:

  1. A user visits the url for your web app using their devices web browser, the Next.js pages and content is served to them from the S3 bucket.
  2. Once the page loads, the user signs in using their Metamask wallet (see here how this works for further explanation on the details)
  3. Once they have successfully logged in:
    • their positional data is sent in real time to the Web Socket API and stored in DynamoDB for other users to render and see
    • they can use their metamask wallet to interact with smart contracts in 3d, as they normally would do in a DApp

How to use this template

To use this template follow the below steps.

Step 1: Install

Look at the Installation instructions to install the required libraries.

Step 2: Unwrap

Follow the steps outlined in the Setup instructions until you get to Step 3, at that point please bear the below points in mind:

  • choose this metaverse template by running the command unwrap Eth-Metaverse.
  • if you decide that you’d rather create the AWS Secret yourself manually, then the JSON format you want to adapt is below – be sure to replace all values as appropriate to your configuration.
  "eth_tf_sls_service_name": "eth-metaverse",
  "tf_sls_next_stage": "dev",
  "tf_sls_next_region": "eu-west-2",
  "tf_sls_next_root_domain_name": "",
  "tf_sls_next_domain_name": "",
  "tf_state_s3_bucket": "",
  "tf_state_s3_key": "terraform.tfstate",
  "eth_network": "goerli",
  "eth_network_api_url": "",
  "eth_account_address": "678910",
  "next_greeter": "abcdefg", // address of deployed greeter contract, add manually after deploying contract
  "next_jmbToken": "hijklmnop", // address of deployed erc20 token contract, add manually after deploying contract
  "next_greeterArtifact": {...}, // ABI for the deployed greeter contract, add manually after deploying contract
  "next_jmbTokenArtifact": {...}, // ABI for the deployed ERC20 token contract, add manually after deploying contract
Step 3: Gobble

Continue on from Step 3 until you’ve completed Step 6 of the Setup instructions,  you can now run gobble dev to run the application and access the webpage on https://localhost:3000.

Please note WebXR API requires https and Wrapperjs uses an autogenerated SSL certificate – if an error message like the below appears, this is expected and you can click to proceed onto next step.

And there you go – you’re in!! 

To move,  use your ‘W’ / ‘A’ / ‘S’ / ‘D’ and ‘↑’ / / ‘←’ /→’ keys!  



You will notice if you check the logs, that there are some error messages.

This is because the WebSocket and HTTP APIs haven’t had lambda functions deployed to them yet.

If you want to get rid of these error logs and enable the real-time multiplayer functionality, then you must run gobble serverless deploy to deploy the appropriate Back End web socket resources