This repo is currently not maintained
Social VR is a code base that modifies a Mozilla Hubs room via code injection in order to provide experimental tools for VR meetings. To learn more about the tools, go to the Social Superpowers website.
Iteration cycles for custom Mozilla Hubs functionality can involve tedious modification of back-end code and redeployment. With code injection, a developer works on self contained scripts hosted on an external server that are loaded when a user joins a room. This method has several advantages:
- Faster iteration speed - external servers can redeploy faster than a Mozilla Hubs instance
- Interfaces agnostic to room environment - these external scripts can be injected into any room
- Improves collaboration - developers can contribute to the development without Mozilla Hubs expertise
rollup.config.js - The project is a Rollup project. Configuration for development is contained here.
netlify.toml - Netlify was used for a development and production build pipeline
main.js - Root entry point of the app. Determines whether it should be a time barge or toolbox and instantiates appropriate components
util.js - Collection of functions that are referenced across files such as logging or NAF schema modification
config.js - Configurations for avatar colors in conversation balance and time barge
Barge components
barge-button.js - Base component for interactable button on barge
barge-clock.js - Displays users current time on barge (location defined on main.js)
barge-data.js - Generates and handles user behavioral data related to time management study
barge-slot.js -Geometry that contains a single point in order to determine block ranking by distance
world-mover.js - Generic component that loads a model and moves it through waypoints
Toolbox components
emoji-target.js - Permits entity to receive emojis
speech.js - Conversation Visualization tool
toolbox-button.js - (deprecated)
toolbox-dashboard-button.js - Base class for all toolbox buttons for toggling them ON/OFF
toolbox-dashboard.js - Instantiates toolbox features such as conversation visualization and emoji sending
This code base requires a custom Mozilla Hubs instance. In order to use this script, it must be compiled and hosted on an external server that is cleared for cross scripting via the admin panel. When you create a room, put the link to the external script in More > Room Info & Settings > Edit > Custom Script URL
In order to determine whether the scene should as barge or toolbox, an item in the world must have selectors denoted in config.js. This is done in Spoke
npm run build builds the application to build/production.js, along with a sourcemap file for debugging.
npm run dev builds the application to build/development.js, along with a sourcemap file for debugging.
npm run dev starts server at localhost:3000
ngrok http 3000 starts ngrok server at url in terminal output
injection url: ngrok_terminal_output_url/development.js