javascript - Is it possible to construct a THREE.Texture from byte array rather than file path? - Stack Overflow

admin管理员组

文章数量:1300174

I have a server client system where server parse the model file and send the vertex data to the client using socket. My problem arises when the model contains texture. I can read the texture(png file) to a byte array and send it to client using socket. But i have no idea how am i gonna create a THREE.Texture from the byte array.

So here is my question, is it possible to construct a THREE.Texture from the byte array? How can i achieve it?

Also, you can suggest other better approach to send texture from server to client.

Thanks.

I have a server client system where server parse the model file and send the vertex data to the client using socket. My problem arises when the model contains texture. I can read the texture(png file) to a byte array and send it to client using socket. But i have no idea how am i gonna create a THREE.Texture from the byte array.

So here is my question, is it possible to construct a THREE.Texture from the byte array? How can i achieve it?

Also, you can suggest other better approach to send texture from server to client.

Thanks.

• javascript
• three.js
• client-server

Share Improve this question Follow asked Jan 19, 2017 at 9:53 Rasheduzzaman SourovRasheduzzaman Sourov 1,51522 gold badges1919 silver badges3939 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

If you already have a byte-array from the websocket there is a more elegant-solution for this using Blobs:

// assuming `byteArray` came in from the websocket
var texture = new THREE.Texture();
var imageBlob = new Blob([byteArray.buffer], {type: "image/png"});
var url = URL.createObjectURL(imageBlob);

var image = new Image();
image.src = url;
image.onload = function() { 
    texture.image = image; 
    texture.needsUpdate = true; 
};

you now have a proper URL (something like blob:http://example./$uuid) that you can use whereever you want. The major benefit from this is that you save the time it takes to convert the data to base64 and it doesn't crash the devtools when they try to show you the hundreds-of-kilobytes long string of the base64-url.

But there is even one more option (unfortunately not very widely supported yet): createImageBitmap(). With that, i would be as simple as:

var texture = new THREE.Texture();
var imageBlob = new Blob([byteArray.buffer], {type: "image/png"});

createImageBitmap(imageBlob).then(function(imageBitmap) {
    texture.image = imageBitmap;
    texture.needsUpdate = true;
});

Okay, after some research around the web i have found a way to do it. I have to create data uri from the byte array and pass it to the THREE.TextureLoader. Here is the code to do it -

        let data_uri = "data:image/png;base64," + convert_to_base64_string(my_byte_array);

        // instantiate a loader
        let loader_t = new THREE.TextureLoader();
        loader_t.load(
            // resource URL
            data_uri,
            // Function when resource is loaded
            function ( texture ) {


                let plane = scene.getObjectByName("test-texture");
                plane.material.map = texture;

                plane.material.needsUpdate = true;
            },
            // Function called when download progresses
            function ( xhr ) {
                console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
            },
            // Function called when download errors
            function ( xhr ) {
                console.log( 'An error happened' );
            }
        );

you have to follow some steps:

convert bytes to base64: jou can use a library like https://github./beatgammit/base64-js

create an image with base64 datas:

var image = new Image();
image.src =  "data:image/png;base64," + myBase64Datas;

create texture from image.

var texture = new THREE.Texture();
texture.image = image;
image.onload = function() {
    texture.needsUpdate = true;
};

If you have troubles you can check the conversion from bytearray to base64 with online base64 viewer like this: http://codebeautify/base64-to-image-converter

本文标签： javascriptIs it possible to construct a THREETexture from byte array rather than file pathStack Overflow