Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

stl/obj file loader

Arktius

By Arktius,
in Questions & Answers

 Share

Recommended Posts

Arktius Newbie

Arktius

Posted
Posted

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>
<html>
    <head>
        <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>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

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

       // 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 () {
               newScene.render();
           });
       });*/



       // Zeichne
       engine.runRenderLoop(function () {
           scene.render();
       });

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

    </script>

</body>
</html>

in FireFox.

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

 

Link to comment
Share on other sites
amorgan Newbie

amorgan

Posted
Posted

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.

 

-amorgan

 

Link to comment
Share on other sites
Arktius Newbie

Arktius

Posted
  • Author
Posted

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.

bbjs.PNG

Link to comment
Share on other sites
amorgan Newbie

amorgan

Posted
Posted

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);

 

-amorgan

Link to comment
Share on other sites
Arktius Newbie

Arktius

Posted
  • Author
Posted

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:

 

<configuration>

    <system.webServer>

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

    </system.webServer>

</configuration> 

 

Am I wrong?

Link to comment
Share on other sites
amorgan Newbie

amorgan

Posted
Posted

denis_in,

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

 

http://www.babylonjs-playground.com/#28YUR5#39

 

Let us know if this helps.

 

Also, you may want to follow this example instead:

 

http://www.babylonjs-playground.com/#28YUR5

 

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
Arktius Newbie

Arktius

Posted
  • Author
Posted

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.

 

index-for.html

Link to comment
Share on other sites
amorgan Newbie

amorgan

Posted
Posted

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.

BJS_LoadSTL.zip

Link to comment
Share on other sites
RaananW Newbie

RaananW

Posted
Posted

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.

Guest
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.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

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