Share 3D Models with WebSockets Demo

Baby shark, doo doo doo doo doo doo
  1. index.html which has the Babylon.js engine and loaders, a canvas to render scenes, a simple UI to upload model files, and a WebSocket listener for new models.
  2. index.js which has a Node.js server. This serves index.html and shares models to connected clients.
// socket.io listener
io.on('connection', (socket) => {
const id = clientCount;
addClient(currentConnectedClients, id)

// if there is already a model being shared, new connected clients will get it
if(currentFile){
socket.emit('file uploaded', currentFile);
}
// when a new model is shared, send to all other connected clients
socket.on('file uploaded', (fileData) => {
currentFile = fileData;
socket.broadcast.emit('file uploaded', fileData);
});
// when a user leaves, remove them from the list
socket.on('disconnect', () => {
removeClient(currentConnectedClients, id);
// if there are no users left, reset the file to null
if(currentConnectedClients.length === 0){
currentFile = null;
}
});
});
  1. “connection”: When a new client (a new tab or window loading the index.html for example) is connected, the “connection” event is received and in response, a “socket” between the server and the page is created. If there was a model already being shared with other clients, the server sends the file data to it.
  2. “file uploaded”: When a client fires a “file uploaded” message, it sends with it some file data. The server then updates the current file stored in state and sends out the new file data to all the other sockets attached.
  3. “disconnect”: When a client closes (like a page refresh, or closes the tab), it sends a “disconnect” event. Here, I just remove the client and update the app state.
Client-side code for sharing models via WebSockets
Share with ALL the clients! Every direction! Even NEW ones!

--

--

--

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Destructuring in javascript

Algorithm — quickSort

Free Tutorial — How to use React with webpacker and Rails 5.1

The fastest cache for your web apps

Simple Javascript Promise pool

A journey from individual Angular projects to an Angular workspace

CKEditor5 With Custom Image Uploader on React

Winners

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Babylon.js

Babylon.js

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/

More from Medium

Customizing Materials: The Community Ninja Tale

Distributed Ledger Frameworks Comparison: Corda vs Hyperledger Fabric

Practice Rust and TAURI: Make an Image Viewer #4

An example of selecting an image file.

How To Fix ‘Failed to register a ServiceWorker’ For Flutter Web

HTML brackets