Reading a blob from a WebSocket and using the threejs glTF loader to load the GLB

So I have established a WebSocket connection from my client to the server.

    var ws = new WebSocket("ws://localhost:4567/websocket/test");
    ws.binaryType = "arraybuffer";

    ws.onopen = function (event) {
        console.log("Connection opened!");

    ws.onmessage = function(event) {
        if( instanceof Blob) {


But I am unsure how I can use the THREE,GLTFLoader to load in this blob? I have used this interface previously to load in GLB files from disk using the URL field:

            const gltfLoader = new THREE.GLTFLoader();
            const url = '/assets/horse_model.glb';
            gltfLoader.load(url, (gltf) => {
                const root = gltf.scene;
                console.log("loaded scene graph!!")

Has this been done before? Could we wrap the blob in a Uint8Array and would the GLTFLoader be able to read that in?

If the result is an array buffer, you can directly call GLTFLoader.parse(). More information about the method here:

1 Like