This project implements a minimal 3d 'playground' powered by MML (Metaverse Markup Language) and the (MML) 3D Web Experience project. It serves as a great starting point to create your own end-to-end live, multiplayer experience using the the unique, real-time nature of MML.
It can be easily deployed to environments that support Node.js and expose ports to the internet.
-
Multiple players can connect to the playground and interact with it in real time.
-
The MML-based playground showcases example MML documents in the defined slots.
-
Players can showcase their own MML creations by adding them via their WebSocket URL to any available slots on the playground.
-
Players can interact with any of the showcased documents simultaneously.
The project contains the following packages:
server: an ExpressJS server which serves the page and handles all WebSocket connections using the@mml-io/3d-web-experience-serverpackage from (MML) 3D Web Experience.- Additionally, it runs the main MML document,
playground.html, and all documents within theserver/examplesdirectory.
- Additionally, it runs the main MML document,
web-client: implements the browser-based 3d experience by using the@mml-io/3d-web-experience-clientpackage from (MML) 3D Web Experience.
The server/examples directory contains the MML documents that are loaded in the playground by
default.
To add a new example, simply create a new HTML file, such as new-example.html inside the
examples directory. The server will automatically detect it and make it available at
ws://localhost:8080/examples/new-example.html. You can then copy this WebSocket URL and add it to
a free slot.
Click the button below to create a new sandbox on CodeSandbox.io (It might take a minute or two to install dependencies).
Making sure you have Node.js installed, run the following from the root of the repository:
npm install
npm run iterateOnce the server is running, open http://localhost:8080 in your browser.