Collaborative 3D Editor

3D modeling, made collaborative.

Comment 1

Inspiration

Our inspiration for this project came from our recent exploration of Three.js for developing 3D web games. While using Three.js editor, my friends and I found it cumbersome to collaborate effectively. We had to resort to screen sharing and manually export Three.js editor configurations to work on 3D models together. During this time, we came across Ably and were impressed by how Ably's SDK simplified the integration of real-time collaboration into the existing Three.js editor.

What It Does

We have created a clone of the Three.js editor by extending its fork and adding real-time collaboration support. Currently, our collaborative editor offers a subset of features compared to the original Three.js editor, including:

  1. Adding 3D objects to the scene.
  2. Moving 3D objects.
  3. Rescaling/Resizing 3D objects.

Additionally, we display the cursors of multiple users in the same space to indicate if others are also editing the same component.

How We Built It

When a user opens our collaborative editor, we allocate a dedicated space to that user based on the spaceName query parameter in the URL. Users who open the URL with the same spaceName query parameter are connected to the same collaborative space, enabling simultaneous editing.

Internally, we leverage Ably's Pub/Sub channels to broadcast user edits to all other users. Furthermore, we use Ably's Spaces product to track all members within a space, as well as their cursor positions.

Challenges We Encountered

We faced several challenges during the development process:

  1. The Three.js Editor does not have an ES6 code base, making it tricky to integrate Ably's SDKs into a vanilla JavaScript project.
  2. Initially, we considered sharing the entire editor state with all users rather than sharing incremental updates. However, this approach posed limitations due to Ably's 64kb size transmission limit. The editor state, being a large JSON object, couldn't be transmitted in its entirety.

Accomplishments We're Proud Of

Our project has achieved some significant milestones:

  1. Real-time collaborative platforms for 3D frameworks are scarce, so developing one was a notable accomplishment.
  2. In an era dominated by React for web development, our project allowed us to explore traditional development using jQuery. This experience provided insights into how React simplifies web development.

What We Learned

Throughout this project, we gained valuable knowledge:

  1. We deepened our understanding of how Three.js and similar 3D modeling frameworks store data related to components in the world, including their properties, geometry, and state data.
  2. This deeper understanding helped us learn how to efficiently transmit changes across multiple users in a collaborative environment.
  3. Building this product with Ably gave us insights into how straightforward it is to make an application collaborative.
  4. Our experience with Ably has inspired us to consider building collaboration-first platforms in the future.

What's Next for Collaborative 3D Editor

We have exciting plans for the future of our Collaborative 3D Editor:

  1. Expanding Features: We intend to enhance our 3D editor by adding all the functionalities currently supported by the original Three.js Editor.
  2. Utilizing React SDKs: We plan to explore the use of React SDKs provided by Ably to simplify integration.
  3. Transition to ES6: We aim to migrate our proof of concept (POC) to an ES6-based module for easier integration.
  4. Persistent Storage: To enable persistence of the editor state even after the page reloads, we plan to incorporate a database. Ably will facilitate transmitting changes to users and writing to the database.

Built With

Share this project:

Updates