Jump to content

Unexpected token error


Recommended Posts

I have successfully created a scene and imported it, which shows up on my localhost, but when I put it on a live server (http://www.cosmiqcloud.com/webgl), I get an endless loading screen and this error in the console in Chrome:


Uncaught SyntaxError: Unexpected token ,
e.SceneLoader.RegisterPlugin.load @ babylon.js:17
u @ babylon.js:17
e.onreadystatechange @ babylon.js:4
And this error in Firefox:
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 454 column 23 of the JSON data babylon.js:16:26015
Here is the code for the app
<!DOCTYPE html><head>    <title>3D Real Estate Application | Babylon.js version</title>        <script src="http://cdn.babylonjs.com/2-1/babylon.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>        window.addEventListener('DOMContentLoaded', function(){            // get the canvas DOM element            var canvas = document.getElementById('renderCanvas');            // load the 3D engine            var engine = new BABYLON.Engine(canvas, true);            // createScene function that creates and return the scene            var createScene = function(){                // create a basic BJS Scene object                var scene = new BABYLON.Scene(engine);                scene.clearColor = new BABYLON.Color3(.25, .181, .240);                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 0,13), scene);                // target the camera to scene origin                camera.setTarget(BABYLON.Vector3.Zero());                // attach the camera to the canvas                camera.attachControl(canvas, false);BABYLON.SceneLoader.Load("", "realestate.babylon", engine, function(newScene){            if (!newScene.activeCamera) {                 newScene.activeCamera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(3, 2,0), newScene);                         }                newScene.executeWhenReady(function() {                    newScene.activeCamera.attachControl(canvas);                                        // Once the scene is loaded, just register a render loop to render it                     engine.runRenderLoop(function() {                         newScene.render();                     });                });            });                  // return the created scene                return scene;            };            // call the createScene function            var scene = createScene();            // run the render loop            engine.runRenderLoop(function(){                scene.render();            });            // the canvas/window resize event handler            window.addEventListener('resize', function(){                engine.resize();            });        });    </script></body></html>

I have also attached a screenshot of what is supposed to appear in the browser.


I wanted to make sure it wasn't something in my code that is causing this. Thank you for your help.



Link to comment
Share on other sites

I think I have sort of figured this out. I have another version of this scene built with Three.js. The JSON file that loads seems to work fine. 


That link is here:





With this scene, I believe that my server doesn't recognize the .babylon file as JSON. I believe this because it keeps adding JavaScript at the end of the .babylon file that causes the error. At least that is my theory anyway. Problem is, I am not sure how to fix that. I may have to just have a chat with the administrator.


So I have one more question.


Once, I import a scene, is there a way to add materials to each individual mesh, or do I need to place the materials on them before they are imported?

Link to comment
Share on other sites

Your realestate.json file is not a babylon file. it does not suffices rename .json in .babylon for this to work. I think this is your error.
The your file is not done to Babylon, but to this old ThreeJS.
Anyway, this error comes is the way, not good path or not good file.


Link to comment
Share on other sites

I took a look at that file of yours and it ends like that:

"cameras":[],"activeCamera":"Camera","lights":[{"name":"Torchiere Light.001","id":"Torchiere Light.001","type":0,"position":[0,1.7034,0],"intensity":1,"diffuse":[1,1,1],"specular":[1,1,1]},{"name":"Sun","id":"Sun","type":1,"position":[16.663,3.4832,16.5793],"direction":[-0.7899,-0.1332,-0.5986],"intensity":1,"diffuse":[1,1,1],"specular":[1,1,1]},{"name":"Torchiere Light","id":"Torchiere Light","type":0,"position":[0,1.7034,0],"intensity":1,"diffuse":[1,1,1],"specular":[1,1,1]}],"shadowGenerators":[],<script type="text/javascript">(function (d, w) {var x = d.getElementsByTagName('SCRIPT')[0];var f = function () {var s = d.createElement('SCRIPT');s.type = 'text/javascript';s.async = true;s.src = "//np.lexity.com/embed/YW/454fac790ad7f7c41310bbb9e7868a48?id=a4df5e1a9777";x.parentNode.insertBefore(s, x);};w.attachEvent ? w.attachEvent('onload',f) :w.addEventListener('load',f,false);}(document, window));</script>

So that's probably the problem (as you have already found out). The question is why there a script tag instead of a properly closed file. Are you using the latest blender exporter? Can you confirm that the file does not have this script thingy in it right after you create it on you PC? Was there a problem during the upload? Too little space on you websrver to upload the file and that is some weird server configuration? Just throwing ideas around :P

Link to comment
Share on other sites

iiceman, that was my theory too. It doesn't get added until I upload it to my server, which is a real problem. I am going to talk to the admin of this server space and figure out why that gets added. I have been meaning to look at another option for server space anyway.


Which leads me to my last question, maybe this has been asked before, but is there a thread that explains how to use Babylon with Node.js? I am sure I will find it in a search, but I figured I'd ask just in case there are resources elsewhere for that. Thank you.

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