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

Questions
1

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(event.data 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;
                scene.add(root);
                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?

2

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

https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader.parse

1 Like