Loading Raw STL Files Directly into Scene

Questions
1

Hello,

I am still getting used to Babylon.

I am trying to load an STL file directly into a scene.

I noticed that ImportMesh required API to load implants. Is there a way to load directly into a scene from an STL file not via API?

Thank You in advance!

Here is a playground example.

    const res = await fetch('https://raw.githubusercontent.com/BabylonJS/MeshesLibrary/master/Channel9/Channel9.stl');
    const blob = await res.blob();

    let base64;

    const reader = new FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = async function() {
        base64 = reader.result;                
        const file = `data:application/octet-stream;base64,${base64}`;

        try {
            const importedMesh = await BABYLON.SceneLoader.ImportMeshAsync(
                'test',
                '',
                file,
                scene,
                null,
                '.stl',
            );

            console.log('importedMesh', importedMesh);

            //above log returning
            
            //   importedMesh {
            //     meshes: [],
            //     particleSystems: [],
            //     skeletons: [],
            //     animationGroups: [],
            //     transformNodes: [],
            //     geometries: [],
            //     lights: []
            //   }

        } catch (err) {
            console.log(err);
        }
        return scene;
    }

With the resulting base64, how does one add into a Scene Successfully? Currently I am getting an empty array. I feel this should not be difficult to do. But I have been stuck on this for quite a while.

Please help.

2

Welcome to the forums!

I’m not sure I understand what you want, but maybe the Babylon Sandbox will do what you want? You can drag and drop an STL file to show it.

3

updated the post, thanks for reaching out!

4

The PG link doesn’t work because of CORS:

Access to fetch at ‘https://www.amtekcompany.com/STL/plane.stl’ from origin ‘https://www.babylonjs-playground.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Maybe try something from this doc page: Using External Assets In the Playground | Babylon.js Documentation (babylonjs.com)

5

Ok, updated the asset to load from Babylon mesh library to bypass CORs.

now getting …

Error: Unable to load from data:application/octet-stream;base64,data:text/plain;base64,c29…

Am not writing the file string input for ImportMeshAsync incorrectly?

The goal is to get the fetched base64 to get added to the null scene.

6

Do you have the playground link?

Looking at the error, this base64 url is not correctly formatted since there are two chunks of data:. You probably should put the base64 directly without prepending it with more text.

7

Oh, I see you edited the OP. Please don’t do this. It’s very confusing for others to read later. :slight_smile:

1 Like
8

Here you go: https://www.babylonjs-playground.com/#10FF4M#52

Note you can also just load the url directly: https://www.babylonjs-playground.com/#10FF4M#53

1 Like
9

bghgary,

Thank you for the continued support and my apologies for the edit confusion.

The goal is to load a base64.

In the example, you showed in this link: https://www.babylonjs-playground.com/#10FF4M#52

Seems to be able to load the mesh into the null scene but the mesh data arrays are empty as shown in the image below.

Thus seems like it did not work?

Screen Shot 2022-02-06 at 1.15.50 PM
Screen Shot 2022-02-06 at 1.15.50 PM1102×852 94.1 KB

Please advise a solution.

1 Like
10

This is because you pass in to importMesh a mesh name to load and that mesh name doesn’t exist in the STL.

PG: https://www.babylonjs-playground.com/#10FF4M#67

2 Likes