Croquet Microverse (Beta)

Overview

Croquet Microverse (Beta)

Microverse Screenshot

https://croquet.io

Description

Croquet Microverse is a framework to build multiplayer immersive 3D virtual worlds on the web. It is built on the Croquet OS and the Worldcore framework.

  • Croquet OS provides a clean substrate to build multiuser applications.
  • Worldcore Framework provides an abstraction to build 3D applications on top of Croquet OS.
  • "Cards" and "Behaviors" abstractions provides a uniform object model, and pluggable behavior descriptions for those objects.It also allows integration with your text editor to support multiuser live programming.
  • Three.JS provides industrial strength 3D rendering backend.
  • All Web technology in your browser is available to access different media, real world data into the virtual world, and vice versa.

By combining all together, Croquet Microverse helps developers to create a metaverse world interactively and quickly. And, the deployed web app requires zero-installation to run on users computers.

License

The source code and assets in this repository are licensed under Apache License 2.0.

Documentation

The documentation for the Croquet Microverse is located in the docs directory.

Installation

Please refer to the docs/QuickStart.md to get started.

If you just want to try it out quickly, follow these steps:

  1. Clone or fork the Github repository from https://github.com/croquet/microverse.
    git clone https://github.com/croquet/microverse.git
  2. Obtain your Croquet API Key from https://croquet.io/keys/.
  3. Open a terminal and change the working directory to your new microverse folder.
    cd microverse
  4. Create the apiKey.js file from apiKey.js-example and the API Key above.
    cp apiKey.js-example apiKey.js # and edit apiKey.js
  5. In the terminal run: npm i and then npm start

2. Make apiKey.js

Create a file called apiKey.js by copying apiKey.js-example to apiKey.js and then edit the two properties called apiKey and appId in the file.

const apiKey = "paste your apiKey from croquet.io/keys";
const appId = "type your own appId such as com.example.david.mymicroverse";
export default {apiKey, appId};

// you may export other Croquet session parameters to override default values.

3. Run npm install

Run npm install in the directory.

4. Run npm install in servers

Run npm install in the servers directory.

5. Run npm start

Run npm start in the directory. This will start a webpack dev server and the watch server. A modification to source code triggers recompilation of the dev build but automatic relaoding upon file change is disabled. This is because the common workflow is to modify behavior files. In addition to it, typically you need to create a new session by removing the session name parameters in the URL.

Note: If you want to run the watch server in a different directory, you can run the webpack dev server by running npm run dev-server and then specify the watch-server's target directory by npm run watch-server -- aDirectory.

6. Launch Microverse, and Connect to Watch Server

After launching Microverse by visiting http://localhost:9684 in a browser, bring up the world menu from top right, and press "Connect". This will establish the connection to the watch-server started in step 5.

Note: Instead of localhost you may want to visit the local network URL listed in the server output which will enable you to scan the QR code to join the session from a phone on the same Wi-Fi:

[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: http://localhost:9684/
[webpack-dev-server] On Your Network (IPv4): http://192.168.1.137:9684/

7. Edit or add a new behavior file

You can add a new behavior file in the watched directory (by default under behaviors), and if the file follows the structure of other files, it will become automatically available.

8. Other npm scripts.

  • npm run build build a production build in the directory called dist. npm run build-dev simulated the dev server's output and allows you to see what is generated as files.
  • npm run file-server runs a vanilla file server. This is useful to test the files in dist directory.
  • npm run create-version creates a one line file that contains the commit hash.
  • npm run build-lib creates a minimum set of files needed to run a test installation in the directory called dist. This directory can be published as an npm package, and in turn, used to create a simple application by runniing npm init croquet-microverse in an empty directory.
  • npm run three-lib creates a concatenated js file called /three/bundledThreeLibs.js. This generated file is included in this repository to help developers get started easily. If you decide to use a newer version of Three.js, or add more libraries, it is recommended to edit scripts/getThreeLibs.sh and run it to create a new bundledThreeLibs.js.

Copyright (c) 2022 Croquet Corporation

Comments
  • Firefox can only rotate objects on Mac.

    Firefox can only rotate objects on Mac.

    You can use ctrl-click to rotate an object while using Firefox on Mac, but that's it. You can't drag an object around. You can do both on other combinations. For example, Win10/Firefox or Mac/Chrome. But not Mac/Firefox.

    You can drag objects around on iPad/Firefox too, but that has the problem where mobile devices can only drag because that's the only option available.

    opened by IcarusCD 3
  • Basic gizmos

    Basic gizmos

    This PR includes:

    • improvements to pointer events (for manual ray intersections)
    • translate, rotate and scaling gizmos on shift-clicking an object
    • basic logic for multiplayer gizmos
    opened by aeplay 2
  • Opera crashes on iPad

    Opera crashes on iPad

    As long as a portal is open, Opera repeatedly crashes on my iPad. I don't experience this on other devices. Regardless of Opera vs Opera mini. The app says the iPad's is vanilla Opera.

    opened by IcarusCD 2
  • I can't use voice chat in Firefox on Android devices.

    I can't use voice chat in Firefox on Android devices.

    I can't use voice chat in Firefox on Android devices. I click the green button and it darkens a bit, showing I clicked it, but the button doesn't turn red and I can't use it to talk to anyone.

    opened by IcarusCD 1
  • New UI issues

    New UI issues

    In https://croquet.io/dev/microverse/ -The control stick doesn't work well with being in the bottom-left corner. -There is no FPS space for the QR code that I know of.

    opened by IcarusCD 1
  • QR codes on mobile Apple devices

    QR codes on mobile Apple devices

    In the case of my iPad mini, scanning the QR code of a Microverse world brings up Safari but it doesn't successfully load up Microverse until I try it a second time. My iPad pro doesn't have this problem. Maybe it's because my mini is a weaker device.

    opened by IcarusCD 1
  • Basic setup to add i18n support

    Basic setup to add i18n support

    • I'm willing to translate Microverse basic interface with users (usersComeHereBttn, worldMenu, etc) to another language.
    • My initial intention was to do this translation in my own Microverse project I created by npm create croquet-microverse but soon I realized that I don't have straightforward access to the text I want to translate in my own project because Microverse is a library my project depends on.
    • My second approach is ok, let's add i18n support to Microverse framework. This PR is the progress so far of adding i18n support to Microverse framework.
    • My questions: Is this a valid approach to add i18n support to Microverse framework? In the case, I want to translate basic interface with users (usersComeHereBttn, worldMenu, etc.) to another language, do you recommend any other approach?
    opened by ortegacmanuel 1
  • voice chat Microverse enter button

    voice chat Microverse enter button

    On my Android phone, I either can just barely see and click the enter button on the touch screen or not at all depending on the browser and how I'm viewing Microverse. I obviously can't enter Microverse if the button is unreachable.

    opened by IcarusCD 1
  • Factory(s), Default Updates [FEAT]

    Factory(s), Default Updates [FEAT]

    • Small Factory Update => QR Crane Added
    • Factory Update => Crane Overhaul
    • Default Update => Cradle Overhaul
    • Physics Timestep Decreased To Account For Changes
    opened by TrevorDohm 1
  • [portals] consolidated changes from smoother-portals branch

    [portals] consolidated changes from smoother-portals branch

    Some rationalisation of when an avatar will jump through a portal, where it ends up on the other side, and what happens to followers if the avatar is presenting at the time.

    opened by aranlunzer 1
  • Adding Newton's Cradle In Default World

    Adding Newton's Cradle In Default World

    Standard Newton's Cradle Implemented:

    • 5 Balls That Show Conservation of Momentum
    • Physics Engine Displaying Joint, Link Control
    • No Interference With Other Physics-Related Items (Pendulum)

    Note: The cradle is in a stable state, but can be improved. This is true with the pendulum as well. Thus I plan to come back to these eventually or maybe others could pick up the work.

    opened by TrevorDohm 1
  • Can't load .glb in world js file. Needs to be .glb.zip

    Can't load .glb in world js file. Needs to be .glb.zip

    This does NOT work: dataLocation: "./assets/3D/ArtGallery1.glb", but this does: dataLocation: "./assets/3D/ArtGallery1.glb.zip", We should not require a file to be zipped to use it. I think this is an error.

    opened by Croquetx 2
  • Refinery lag

    Refinery lag

    When I'm in the refinery world and moving the globe or the camera, especially, the frames drop pretty badly and Microverse shows lag issues that aren't a problem if I go to the factory and either mess with its globe or move the camera around while there.

    opened by IcarusCD 0
  • Handedness options are backwards

    Handedness options are backwards

    It could be considered more of a QoL idea than an issue, but the avatar settings menu's right handedness option is on the left and the left handed box is on the right.

    opened by IcarusCD 1
  • Apple's Metal

    Apple's Metal

    If Apple's "Metal" graphics API is on, Microverse worlds are oddly squeezed into themselves. I do not recall ever turning it on, so it could have been an automatic occurrence from an update? My system is from 2015, if that matters.

    opened by IcarusCD 0
  • voice chat Microverse crashes on iPad with Opera

    voice chat Microverse crashes on iPad with Opera

    The voiceChat=true Microverse crashed on all browsers on my iPad mini when a portal is open. Specifically when I look at the portal. It was originally just Opera that crashed before but I'm guessing the extra work to process the more complicated avatars is problematic enough for all of them to be affected.

    opened by IcarusCD 1
Owner
Croquet
Croquet
ScraperTools BETA Version 1.0.1

ScraperTools Official ScraperTools NPM Package Get Started Via NPM: $ npm install scraper-tools Cara Menggunakan const scrapertools = require('scraper

Zahir Hadi Athallah 21 Sep 28, 2022
Add issues to projects (beta)

Add Issue/PR to Project (BETA) ➕ This GitHub action adds issues or pull requests to a Project (beta). Usage Create a workflow (eg: .github/workflows/o

Austen Stone 5 Aug 12, 2022
🤖A Tic-Tac-Toe solver that uses the minimax algorithm and alpha-beta pruning to make it unbeatable

Tic-Tac-Toe AI A Tic-Tac-Toe solver that uses the minimax algorithm and alpha-beta pruning to make it unbeatable How it Works Tic-Tac-Toe is what is k

Martin 4 May 20, 2022
CodAre'ın resmi sitesi için yapılmış v12tov13 sistemi (BETA)

V12toV13 CodAre'ın resmi sitesi için yapılmış v12tov13 sistemi (BETA) Kurulum Projeyi klonladıktan sonra proje klasörünün içine girin ve klasörde bir

CodAre 14 Aug 14, 2022
Automate adding issues and pull requests to GitHub projects (beta)

actions/add-to-project Use this action to automatically add the current issue or pull request to a GitHub project. Note that this is for GitHub projec

GitHub Actions 293 Jan 3, 2023
🌌 Fast, in-memory, full-text search engine written in TypeScript. Now in beta.

Installation You can install Lyra using npm, yarn, pnpm: npm i @nearform/lyra yarn add @nearform/lyra pnpm add @nearform/lyra Usage Lyra is quite simp

NearForm 5.1k Dec 30, 2022
Gthub action for Project (beta) management. Allows to update fields

titoportas/update-project-fields Use this action to automatically update GitHub project (beta) item fields. Note that this action does not support Git

null 3 Nov 3, 2022
This project is in developer-preview status and will reach the beta in 2023 Q1

rescoped.io This project is in developer-preview status and will reach the beta in 2023 Q1. Currently, the datagrid is under massive refactoring, and

avodaq AG 7 Dec 30, 2022
BETA partytown-qwik

Qwik Partytown ?? This is a package that facilitates the implementation of PartyTown in Qwik. If you don't know what Qwik is See The implementation is

Leifer Mendez 7 Dec 20, 2022
This project is part of the 2nd Module 2 Block of Microverse curriculum

To-do list is a tool that helps to organize our day. It simply lists the things that you need to do and allows you to mark them as complete by using ES6 and Webpack!

Ravi Teja 14 Mar 14, 2022
Microverse project for practicing javascript coding skills

To Do list Microverse project for practicing javascript coding skills.. Additional description about the project and its features Built With HTML CSS

Bereket Adego Retta 2 Jan 30, 2022
Solo programming project for week one of module 2 of the Microverse Program

To-do List Solo programming project for week one of module 2 of the Microverse Program. "To-do List" is a simple website that displays a list of books

Ivan Silva 9 May 6, 2022
A microverse project that allows users to update tasks from a list using javascript modules

ToDo-list App This is a microverse project that allows users to update tasks from a list using javascript modules Our goal here is to Build a book app

faith Usor 5 Oct 19, 2022
A simple leaderboard project made while a student in Microverse using API to get scores for a game, JavaScript, HTML and basic CSS

A simple leaderboard project made while a student in Microverse using API to get scores for a game, JavaScript, HTML and basic CSS

Thiago Ponce 6 Nov 28, 2022
This web application was build the microverse program, it's about implementing functionalities using JavaScript

This web application was build the microverse program, it's about implementing functionalities using JavaScript

Mehdi Abdelaziz Rahal 11 Aug 18, 2022
A simple to-do list created while a student in Microverse using JavaScript to add and delete selected tasks.

To-Do List This is a simple To-Do list page I made following the requirements from Microverse. You can check it out here: https://thi-ponce.github.io/

Thiago Ponce 7 Nov 28, 2022
This is a Microverse (@microverseinc) project in which I created a To-do list using Webpack. User can add a task, delete it, edit its description, and clear the completed tasks.

Microverse To-Do list This is a Microverse (@microverseinc) project in which I created a To-do list using webpack. Requirements Build a Todo list usin

Manel Hammouche 11 Aug 3, 2022
I Built This project in microverse's second module, in this single web application the user Can add, remove and display the list of books.

Awsome Books I Built This project in microverse's second module, in this single web application the user Can add, remove and display the list of books

Nedjwa Bouraiou 7 Aug 3, 2022
Microverse Awesome Books ES6

This is a Microverse (@microverseinc) project which aims at creating a books library in which we can add/remove books, and view the available books.

Manel Hammouche 10 Aug 3, 2022