# Load .STL model provided by .net api

**URL:** <https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083>\
**Category:** Questions\
**Created:** [April 17, 2020, 1:14pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083 "2020-04-17T13:14:08Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![adrian](https://avatars.discourse-cdn.com/v4/letter/a/82dd89/32.png) [@adrian](https://forum.babylonjs.com/u/adrian)\
**Post date:** [April 17, 2020, 1:14pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/1 "2020-04-17T13:14:08Z")

</div>

Hi there,

i want to load .STL model provided by my .net api but i receive such error

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/5/5b46999e287d005e72042fb13d370c3353a1cf7e.png)

my .net api:

```
    [HttpGet]
    [EnableCors("AllowOrigin")]
    public IActionResult GetFile()
    {
        try
        {
            var bytes = System.IO.File.ReadAllBytes(_settings.TestPath);
            return File(bytes, GetContentType(_settings.TestPath), "A-0006801.STL");
        }
        catch
        {
            return StatusCode(500, new { StatusMessage = "Internal server error" });
        }
    }
    private string GetContentType(string path)
    {
        var provider = new FileExtensionContentTypeProvider();
        string contentType;
        if (!provider.TryGetContentType(path, out contentType))
        {
            contentType = "application/octet-stream";
        }
        return contentType;
    }

```

in my .ts file im using **SceneLoader** as follows:

public createScene(): void {  
var canvas = document.getElementById(‘rendererCanvas’) as HTMLCanvasElement;  
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });  
var scene = new BABYLON.Scene(engine);

```
scene.createDefaultCameraOrLight(true, true, true);
scene.createDefaultEnvironment();

BABYLON.SceneLoader.ImportMesh("", "http://localhost:8002/api/test", "", scene, function (scene) {
});

engine.runRenderLoop(function () {
  if (scene) {
    scene.render();
  }
});

```

}

my imports are:

import { SceneLoader, Scene, Engine, FreeCamera, Mesh, Camera, FilesInput } from ‘babylonjs’;  
import 'babylonjs-loaders

every suggestions welcome.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 17, 2020, 1:37pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/2 "2020-04-17T13:37:16Z")

</div>

> [@adrian](#):
>
> BABYLON.SceneLoader.ImportMesh(“”, “[http://localhost:8002/api/test](http://localhost:8002/api/test)”, “”

Looks like you are missing the file name in here. the 3rd double quote should contain the filename.stl

---

<div class="post-metadata">

**Author:** ![adrian](https://avatars.discourse-cdn.com/v4/letter/a/82dd89/32.png) [@adrian](https://forum.babylonjs.com/u/adrian)\
**Post date:** [April 20, 2020, 9:24am UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/3 "2020-04-20T09:24:07Z")

</div>

Thank you for your answer @sebavan, but my api method GetFile(), for test purposes, takes no arguments and returns only one specific file. Therefore address [http://localhost:8002/api/test](http://localhost:8002/api/test) is valid to obtain that .STL file and in this case third optional argument of BABYLON.SceneLoader.ImportMesh() may be empty.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 20, 2020, 11:28am UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/4 "2020-04-20T11:28:27Z")

</div>

You can try :

```auto
BABYLON.SceneLoader.ImportMesh("", "http://localhost:8002/api/", "test",
    undefined, 
    undefined,
    undefined,
    undefined,
    ".stl")

```

To force the stl loader 🙂

---

<div class="post-metadata">

**Author:** ![adrian](https://avatars.discourse-cdn.com/v4/letter/a/82dd89/32.png) [@adrian](https://forum.babylonjs.com/u/adrian)\
**Post date:** [April 20, 2020, 12:41pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/5 "2020-04-20T12:41:37Z")

</div>

I changed the function call to BABYLON.SceneLoader.ImportMesh("", “[http://localhost:8002/api/](http://localhost:8002/api/)”, “test”, scene, undefined, undefined, undefined, “.STL”); but recived same error message ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/96450640f33e85017a3317252017af162226e5c4.png)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 20, 2020, 2:08pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/6 "2020-04-20T14:08:55Z")

</div>

Can you check if the stl loader is present?

Run `console.log(SceneLoader._getPluginForExtension(".stl"))` right before the import - does it output anythying?

---

<div class="post-metadata">

**Author:** ![adrian](https://avatars.discourse-cdn.com/v4/letter/a/82dd89/32.png) [@adrian](https://forum.babylonjs.com/u/adrian)\
**Post date:** [April 20, 2020, 2:34pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/7 "2020-04-20T14:34:44Z")

</div>

Thank you for your answer @RaananW, yes it does, the output is:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/e/e175a3e5ea0afefd8dee7e4a84c4f921d8e96240.png)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 20, 2020, 3:34pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/8 "2020-04-20T15:34:51Z")

</div>

Will it be possible to see your code? what version of babylon are you using?

The stl extension is there, you are setting the plugin extension correctly (seems to be, at least), but still - the .babylon file loader is triggered.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 20, 2020, 3:37pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/9 "2020-04-20T15:37:21Z")

</div>

a repro in the playground is the key as always!

[https://doc.babylonjs.com/resources/external\_pg\_assets](https://doc.babylonjs.com/resources/external_pg_assets)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 20, 2020, 3:42pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/10 "2020-04-20T15:42:23Z")

</div>

That is, if he can get his .net server deployed online somehow 🙂

---

<div class="post-metadata">

**Author:** ![belfortk](https://avatars.discourse-cdn.com/v4/letter/b/ed8c4c/32.png) [@belfortk](https://forum.babylonjs.com/u/belfortk)\
**Post date:** [April 20, 2020, 5:52pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/11 "2020-04-20T17:52:27Z")

</div>

Wouldn’t the file name be “A-0006801.stl” ?

What happens if you try

```
BABYLON.SceneLoader.ImportMesh("", "http://localhost:8002/api/test", "A-0006801.stl",
    undefined, 
    undefined,
    undefined,
    undefined,
    ".stl")
```

---

<div class="post-metadata">

**Author:** ![adrian](https://avatars.discourse-cdn.com/v4/letter/a/82dd89/32.png) [@adrian](https://forum.babylonjs.com/u/adrian)\
**Post date:** [May 13, 2020, 2:15pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/12 "2020-05-13T14:15:38Z")

</div>

Hi there,  
sorry for not answering to this topic earlier, I was involved in other project. I still haven’t found sollution to this problem. Here is what I want to achieve: [https://www.babylonjs-playground.com/#8LFTCH#250](https://www.babylonjs-playground.com/#8LFTCH#250), in this playground i used my .stl model hosted on dropbox and it works as should. At this moment i am unable to deploy online my .net api but code of TestController is as follows

```
[Route("api/test")]
[ApiController]
public class TestController : Controller
{
    private readonly Settings _settings;

    public TestController(IOptions<Settings> settings)
    {
        _settings = settings.Value;
    }

    [HttpGet]
    [EnableCors("AllowOrigin")]
    public IActionResult GetFile()
    {
        try
        {
            var bytes = System.IO.File.ReadAllBytes(_settings.TestPath);
            return File(bytes, GetContentType(_settings.TestPath), "A-0006801.STL");
        }
        catch
        {
            return StatusCode(500, new { StatusMessage = "Internal server error" });
        }
    }
    private string GetContentType(string path)
    {
        var provider = new FileExtensionContentTypeProvider();
        string contentType;
        if (!provider.TryGetContentType(path, out contentType))
        {
            contentType = "application/octet-stream";
        }
        return contentType;
    }

    [HttpGet("alien")]
    [EnableCors("AllowOrigin")]
    public IActionResult GetAlien()
    {
        try
        {
            var bytes = System.IO.File.ReadAllBytes(@"wwwroot/database/test/alien.glb");

            return File(bytes, "model/gltf-binary", "alien.glb");

        }
        catch
        {
            return StatusCode(500, new { StatusMessage = "Internal server error" });
        }
    }
}

```

}

My Angular client - package.json

```
{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.6",
    "@angular/common": "~9.0.6",
    "@angular/compiler": "~9.0.6",
    "@angular/core": "~9.0.6",
    "@angular/forms": "~9.0.6",
    "@angular/platform-browser": "~9.0.6",
    "@angular/platform-browser-dynamic": "~9.0.6",
    "@angular/router": "~9.0.6",
    "babylonjs": "^4.1.0",
    "babylonjs-loaders": "^4.1.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.6",
    "@angular/cli": "~9.0.6",
    "@angular/compiler-cli": "~9.0.6",
    "@angular/language-service": "~9.0.6",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }
}

My Angular client component

import { Component, OnInit } from '@angular/core';
import { SceneLoader, Scene, Engine, FreeCamera, Vector3, HemisphericLight, Mesh, Camera, FilesInput } from 'babylonjs';
import 'babylonjs-loaders';
import { CanvasService } from 'src/app/services/canvas.service';
import { Customer } from 'src/app/model/Customer';
import { HttpEventType } from '@angular/common/http';
import { STLFileLoader } from 'babylonjs-loaders';

@Component({
  selector: 'app-canvas',
  templateUrl: './canvas.component.html',
  styleUrls: ['./canvas.component.css']
})

export class CanvasComponent implements OnInit {

  constructor(private canvasService: CanvasService) { }

  ngOnInit(): void {  
    this.byDropboxLink();
  }

  byDropboxLink(){
    var canvas = document.getElementById('rendererCanvas') as HTMLCanvasElement;
    var engine = new Engine(canvas);
    var scene = new Scene(engine); 
    SceneLoader.ImportMesh(
        "",
       //"https://dl.dropbox.com/s/oo64nfczss2xrz2/A-0006801.STL",
            "http://localhost:8002/api/test",
        undefined,
        scene,
        function (meshes) {          
            scene.createDefaultCameraOrLight(true, true, true);
            scene.createDefaultEnvironment();
            engine.runRenderLoop(function () { scene.render(); });
        }
    );
  }
}

```

Still wandering what may be the difference between using file hosted in dropbox which works fine and my .net api that gives this error  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/fe8a370c05a58abdf275b0159fb922dbb2ff93f5.png)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [May 13, 2020, 2:33pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/13 "2020-05-13T14:33:52Z")

</div>

This is impossible to troubleshoot without a repro at this point ☹ so either you do not have the loaders referenced in your page or the model does not load from the server.

---

<div class="post-metadata">

**Author:** ![geoidesic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/geoidesic/32/16947_2.png) [@geoidesic](https://forum.babylonjs.com/u/geoidesic)\
**Post date:** [June 17, 2021, 12:44pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/14 "2021-06-17T12:44:18Z")

</div>

I have the same error on Svelte.

The problem is that there’s no documentation available on how to use FileLoaders via npm. There’s this: [babylonjs-loaders - npm](https://www.npmjs.com/package/babylonjs-loaders)

But it doesn’t show any examples of how to actually use (e.g.) the stlFileLoader. It just shows how to import it and configure it.

When I do as shown in the NPM readme then use the importer:

```auto
BABYLON.SceneLoader.ImportMesh(null, "src/assets/3dmodels/", "modem", scene, function (meshes, particleSystems, skeletons) {
          console.log("meshes", meshes);
    });

```

I get the same error:

```auto
BJS - [13:43:46]: Unable to import meshes from src/assets/3dmodels/model.stl: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse

```

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [June 17, 2021, 12:56pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/15 "2021-06-17T12:56:14Z")

</div>

The end of the page here describes what you are probably referring to:

> **[Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking#loaders)**
>
> Learn about tree shaking and package management in Babylon.js.

You just need to import the right loader from the @babylonjs/loaders library.  
Make sure you are using the same version for both the core and loaders packages

---

<div class="post-metadata">

**Author:** ![geoidesic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/geoidesic/32/16947_2.png) [@geoidesic](https://forum.babylonjs.com/u/geoidesic)\
**Post date:** [June 17, 2021, 2:53pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/16 "2021-06-17T14:53:41Z")

</div>

I managed to get it working. The key for me was that Babylon must be imported after the DOM has mounted, while `babylonjs-loaders` can be imported normally. E.g.

```auto
<script>
  import 'babylonjs-loaders';
  let BABYLON: typeof import('babylonjs');
  onMount() {
     const babylonjs = await import('babylonjs');
     BABYLON = babylonjs.default;
  }
</script>

```

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [June 17, 2021, 2:55pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/17 "2021-06-17T14:55:40Z")

</div>

I would very much suggest you to use the es66 packages instead of the UMD packages if you want it to work better. The UMD packages are great if you want to use them as a script in your HTML page. the es6 modules (the page I linked) would be much better if you are working with bundlers

---

<div class="post-metadata">

**Author:** ![geoidesic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/geoidesic/32/16947_2.png) [@geoidesic](https://forum.babylonjs.com/u/geoidesic)\
**Post date:** [June 17, 2021, 3:03pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/18 "2021-06-17T15:03:46Z")

</div>

@RaananW I don’t understand. The page you linked doesn’t seem to tell me anything related. Have I linked to UMD packages in my example?

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [June 17, 2021, 3:05pm UTC](https://forum.babylonjs.com/t/load-stl-model-provided-by-net-api/10083/19 "2021-06-17T15:05:52Z")

</div>

I linked the ES6 support page. Here are the available packages:

[Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking#available-packages)

any package that doesn’t start with @babylonjs is a UMD package.