How can a PLYLoader load a buffer byte array?

Questions
1

Hi, in an ASP.NET solution, I have to load models in the client from a byte array that I get from this MeshController.cs (for the purpose of my test I use a local .ply file that I convert into a byte array):

[HttpGet]
    public async Task<IActionResult> GetMesh(string meshFileName)
    {
        byte[] result;
        using (FileStream fs = System.IO.File.OpenRead($@"{meshFileName}.ply"))
        {
            using (BinaryReader binaryReader = new BinaryReader(fs))
            {
                result = binaryReader.ReadBytes((int)fs.Length);
            }
        }
        return File(result, "application/octet-stream");
    }

Then the data that is read as such:

var meshData = await response.Content.ReadAsByteArrayAsync();

I try to get inspired from the file dialog ref: Load file from Buffer not Path - #5 by BretCameron.
So here is the load method in my .js:

loadModelFromData() {
        var loader = new PLYLoader();
        var plyGeometry = loader.parse(this.meshData);
        plyGeometry.sourceType = "ply";
        var plyMaterial = new THREE.MeshStandardMaterial({ color: 0xFFA500 });
        var plyMesh = new THREE.Mesh(plyGeometry, plyMaterial);
        thisScene.add(plyMesh);
    }

I tried different things with the parse method of the loader, but I remain unsuccessful.
What is it that I am missing?

2

I make it easy for you. Try to load the image, using pix_content

<script>
var pix_content = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 5, 0, 0, 0, 5, 8, 6, 0, 0, 0, 141, 111, 38, 229, 0, 0, 0, 28, 73, 68, 65, 84, 8, 215, 99, 248, 255, 255, 63, 195, 127, 6, 32, 5, 195, 32, 18, 132, 208, 49, 241, 130, 88, 205, 4, 0, 14, 245, 53, 203, 209, 142, 14, 31, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]);
</script>
<img src="duh" style="width: 100px; height:100px">
Answer

document.images[0].src = URL.createObjectURL( new Blob([content.buffer]), { type: ā€˜image/pngā€™ } );

1 Like
3

I never worked with PLYLoader, but just tried with TypedArray on OBJLoader 3JS version 103 without any problems.
If you like I can share it with you.

4

Hi, thank you for answering.

I think you seriously overestimate my .js abilites so Iā€™m not sure to get the point.

Do 3js loaders.load() and the source of a picture work the same way, which would mean I have to create a ObjectURL of a Blob based of the buffer property of my data array?

Gonna try all of that in my code, thenā€¦

Otherwise yes, please, I would like you to see the code of an OBJLoader loading (or parsing?) an array.

5

Oh, I think I got it! I wrote this code:

var urlData = URL.createObjectURL(new Blob([this.meshData]));
loader.load(urlData, function (geometry) {

and have my models displayed right now in my browser. Tons of joy, thank you so much rrrr_rrrr for your insight!

6

No need to create a Blob or Object URL. You can just pass the array buffer directly into the ā€œparseā€ function:

const loader = new PLYLoader();
const geometry = loader.parse( this.meshData );
7

As long as the loader doesnā€™t screen the user input, it should work. you can also use Data URLs.

Iā€™m glad it worked out for you. Finding a solution after spending hours of work, ā€‹makes it that much sweeter.

ā€‹Please read about URL.revokeObjectURL() to avoid memory leak.

1 Like