Jump to content

stl/obj file loader


Recommended Posts

Hey guys,

i get this error message

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

if i run this code

<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="http://www.babylonjs.com/cannon.js"></script>
        <script src="http://www.babylonjs.com/oimo.js"></script>
        <script src="http://www.babylonjs.com/babylon.js"></script>
        //<script src="Babylon.js"></script>
        <script src="babylon.stlFileLoader.js"></script>
        //<script src="babylon.objFileLoader.js"></script>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
    <canvas id="renderCanvas"></canvas>

       // Erstelle Canvas und Engine
       var canvas = document.getElementById("renderCanvas");
       var engine = new BABYLON.Engine(canvas, true);

       var createScene = function () {

           // This creates a Babylon Scene object (not a shape/mesh)
           var scene = new BABYLON.Scene(engine);

           // This creates and positions an free camera
           var camera = new BABYLON.FreeCamera("camera1",
                   new BABYLON.Vector3(0, 5, -10), scene);

           // This targets the camera to scene origin
           camera.setTarget(new BABYLON.Vector3.Zero());

           // This attaches the camera to the canvas
           camera.attachControl(canvas, false);

           // This creates a light - aimed 0,1,0 - to the sky.
           var light = new BABYLON.HemisphericLight("light1",
                   new BABYLON.Vector3(0, 1, 0), scene);

           // Dim the light a small amount
           light.intensity = .5;

           // Leave this function
           return scene;

       // Erstelle Scene
       var scene = createScene();
       // Lade .STL ein

      BABYLON.SceneLoader.Load("/samples/", "ship.stl", engine, scene);
       /*BABYLON.SceneLoader.Load("", "ship.stl", engine, function (newScene) {
           newScene.activeCamera.attachControl(canvas, false);
           engine.runRenderLoop(function () {

       // Zeichne
       engine.runRenderLoop(function () {

       // Resize
       window.addEventListener("resize", function () {



in FireFox.

I just want to load and show a stl or obj File.


Link to comment
Share on other sites

You most likely either need to setup IIS ( https://support.microsoft.com/en-us/kb/323972 ) or Apache ( https://www.google.com/?gws_rd=ssl#q=configure+apache ) or your favorite webserver.

Then you can add a webconfig ( http://blogs.iis.net/bills/how-to-add-mime-types-with-iis7-web-config ) to allow the specific MIME type.


OR (recommended for debugging only, not browsing the internet)

If you want to avoid that for now, create a new Chrome shortcut > Right Click the icon > Click Properties. Add --disable-web-security to the end, ie:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security

to open Chrome without security.




Link to comment
Share on other sites

Still doesnt work. 

I added a second option to chrome settings:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --allow-file-access-from-files

On the Picture is the Error Report (with this Code:

BABYLON.SceneLoader.Load("http://localhost/3D/", "ship.stl", engine, scene); 


If i delete the path, the GET-Error doesnt appear.


Link to comment
Share on other sites

If you are still getting a CORS error (with the --disable-web-security method) you might not be loading Chrome with the security disabled. If you have any instances of Chrome already open when you click on the link, it will open a new window, but will not be with the options you passed it. You will want to make sure no Chrome windows are open, then open the shortcut with those options passed. Chrome will give you a warning below your address bar if it opened in this mode correctly.

If this still fails, it might be worth trying to set up a webserver instead. But as far as I know, this should work (I do this all the time for testing).

Also, have you tried a relative path?

BABYLON.SceneLoader.Load("./3D/", "ship.stl", engine, scene); 



Link to comment
Share on other sites

Chrome has disabled web security. I got this Message:

"You are using an unsupported command-line flag: --disable-web-security. Stability and Security will suffer."


Now i get no Errors, just a "Babylon.JS engine is launched" message. But still nothing to see from ship.stl.

I tried:

engine. enableOfflineSupport  = false; 

and every path i can imagine.

So, i should configure Xampp. I edited the httpd.conf file and added this code:




            <mimeMap fileExtension=".stl" mimeType="application/sla" />




Am I wrong?

Link to comment
Share on other sites


You don't seem to have a camera. Take a look at this playground:




Let us know if this helps.


Also, you may want to follow this example instead:




This will give you more freedom to manipulate the mesh easier after it is loaded. In addition, double check your scale. You may want to scale up your .stl (it could be too small).

Link to comment
Share on other sites

I don't understand it. The code with a babylon file works, but not with stl or obj files.

Yesterday,I installed a add-on for chrome which CORS disabled and it does its job, but now i cant open chrome settings without a crash :"D

However, I created a camera and tested my code in chrome, firefox and opera but still not works.



Link to comment
Share on other sites

Okay, so, I have verified that the airboat.obj does work with the objloader, but I cannot get the STL loader to work. Please see the attached. Take a look at the code and understand the differences between your submitted code and the changes.


As far as the STL loader, @Deltakosh or someone else will have to weigh in, as to why the STL loader is not working properly. I puled the loaders from ( https://github.com/BabylonJS/Babylon.js/tree/master/loaders ) and used the model provided in the attached files (ship.stl). I pulled it into Blender and it's there, so I am unsure why this does not work.


Link to comment
Share on other sites

Hi @denis_in,

a quick check regarding your STL file - The babylon STL loader is loading ASCII STL only, and you provided a binary STL. try loading an ASCII STL and see how it works.

about CORS - If you develop locally (which you should, if you test your scenes on your own computer), there shouldn't be any CORS problem. If you are simply opening your index.html file using your browser it won't work correctly. You will need a local server, like NPM's http-server module, or any IDE local server.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...