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.
// 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
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!



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: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best.