CGinSeattle Posted October 6, 2017 Share Posted October 6, 2017 I'm new to babylonJS, so please forgive if this question is stupid. I'd like to use the playground and import an OBJ from my computer into the scene. I've looked at the documentation, but it seems to indicate I need a special loader. The sample of which does not work on my computer/Chrome or IE browser (i.e. https://www.babylonjs-playground.com/#28YUR5) And the other way seems to be to just use playground and use Assetsmanager. But the forums seem to indicate that Assetsmanager is for loading scenes or .babylon file and/or you "simply cant' do that, the OBJ must be on the web") I'm a little unclear on this. It seems a simple request, to be able to load an OBJ into playground and then save it off again as a zip (babylon scene, I assume, or perhaps just a zip of html code). I even saw someone try using loader.addMeshTask("A2", "", "http://localhost:8080/A2/", "a2.obj"); Which apparently works for them, but again, not me (though perhaps one must somehow set up one's computer to act like a localhost? ) Also, the docs seem limited on this...if I'm missing something (other than the Assetsmanager tutorial and page, obj loader page, and link already provided) could someone point me at the docs I need? Much appreciated, Quote Link to comment Share on other sites More sharing options...
Nutiler Posted October 6, 2017 Share Posted October 6, 2017 (edited) I use this for loaders: https://doc.babylonjs.com/extensions/obj BABYLON.SceneLoader.ImportMesh("name", "./assets/models/name", "name.obj", scene, function(object) { // You can apply properties to object. object.scaling = new BABYLON.Vector3(0.9, 0.9, 0.9); }); If you want to apply properties to multiple objects if it is a complex object you can do object.forEach and apply all of the properties. You will get a WARN that name.obj.manifest is missing so if you create that file but empty it will be fine! To use localhost they have most likely set up a node.js server for their project, whereas you are using static javascript. Edited October 6, 2017 by Nutiler CGinSeattle and Sebavan 1 1 Quote Link to comment Share on other sites More sharing options...
CGinSeattle Posted October 6, 2017 Author Share Posted October 6, 2017 Hi @Nutiler, thank you! But... Just to clarify... This will load a file from disk? Like C:/mydir/myassets ? How do you use it from the playground? the docs, which aren't very clear, say to reference the OBJ loader .js file...but playground is well, playground (a website vs. one's own index.html file) Or is that the point? you can't do it from the playground editor/system? Thanks! I really do appreciate it! Quote Link to comment Share on other sites More sharing options...
JohnK Posted October 6, 2017 Share Posted October 6, 2017 Hi and welcome to the forum. Not a hundred percent clear from you playground and questions what you do or do not know. So please do not be insulted if you already know what I am saying. Some applications allows you to upload a file from your local computer to the applications server. This forum for example allows you to upload an image from your computer and then it can be displayed within the forum. The Babylon.js playground does not allow you to do this. The playground does allow files to be loaded from another website provided that the website is CORS compliant. Is it possible to load a local file into your own local HTML pages without using a server? Yes Is it possible to load a local file into an HTML page from a web URL? Yes provided the webpage has been written to do so and the browser has the correct settings. FF has the correct settings by default, Chrome does not. To understand how to do this requires the file api a good starting point being https://www.html5rocks.com/en/tutorials/file/dndfiles/ I have done this for one of my earlier projects for Babylon - this is a simplified version function doImport() { var f = browseBut.files[0]; if (f) { var r = new FileReader(); r.onloadend = function(evt) {doImport(evt.target.result) }; r.readAsText(f); } else { alert("Failed to load file"); } }; where 'browseBut' is a variable set to the element with document element id browseBut which is an input element of type file <input id = "browseBut" class='DBBut' type = 'file' accept = '.babylon,.obj,.txt' /> function doImport(data) { BABYLON.SceneLoader.ImportMesh(("name", "", 'data:'+data, scene, function(object) { // You can apply properties to object. object.scaling = new BABYLON.Vector3(0.9, 0.9, 0.9); }); } ImportMesh allows a data string rather than an url as parameter provided the path parameter is a blank string and file parameter is the data containing the scene or meshes with the string 'data' added in front of it. The other way is to have a local server on your computer. CGinSeattle 1 Quote Link to comment Share on other sites More sharing options...
CGinSeattle Posted October 6, 2017 Author Share Posted October 6, 2017 @JohnK Thank you so much. No insult taken at all, as stated, I am a total newbie here. My background is Unity, C/C++, C#, Maya, low level shader coding, app development etc. but not web based development. So I know I'm flailing a bit as I try to make sense of it, but webGL stuff and tools like BabylonJS and A-Frame are just too cool to ignore. So thank you. Now I know that the playground won't play the way I would like. And that I need to create static HTML pages with the .js stuff (as noted Nutiler) for loading or the filereader. And I need to look into how to use Chrome vs other browsers. Will go over your examples and link now and hopefully get something working with my own OBJ. Just wish the playground allowed for this, would make it easier for prototyping (at least in my situation). Again, thank you! Quote Link to comment Share on other sites More sharing options...
adam Posted October 6, 2017 Share Posted October 6, 2017 Maybe someone could add this feature to the PG. Here is just a test: https://playground.babylonjs.com/#5JBSHD#1 You should be able to load a .babylon file using that PG. Arte and JohnK 2 Quote Link to comment Share on other sites More sharing options...
JohnK Posted October 6, 2017 Share Posted October 6, 2017 @adam brilliant as always. Yes it works but it did take me half an hour to find the browse button on the menu bar at the top Arte and adam 2 Quote Link to comment Share on other sites More sharing options...
CGinSeattle Posted October 6, 2017 Author Share Posted October 6, 2017 @adam, very cool, thank you. Great for loading a .babylon file that I found. @JohnK thank you also! I learned a lot from your script. I made a slight alteration while I was playing with adam's, trying to understand how it works. I altered the HTML so that the button shows up on a navbar above the main navbar, and has a label describing what the file button will do. This was done simply to make it easier to find (so that it didn't get hidden by the other buttons on the main navbar) https://playground.babylonjs.com/#5JBSHD#7 Hmm...apparently those changes (to the HTML) don't propagate on a SAVE, so never mind that part. It only works on the locally changed machine/browser window apparently. sorry. On a second note, I tried to scale and move the incoming mesh of the babylon file. I finally figured out that you have to do it onLoad as this is simply a create function that is called by the playground. but even at that point, and with a couple of different models from github samples (babylon files), the mesh does not scale or reposition. Other objects created (not loaded) do take scale and position changes. https://playground.babylonjs.com/#5JBSHD#16 Am I doing something wrong? Reading the meshes array return wrong? I've checked a number of forum postings, so it seems I'm doing it right. But I am doing this onLoad of a babylon file from disk...perhaps that is an issue? One babylon file I used, and it loaded fine (but didn't resize) was the cat.babylon file from github samples. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 6, 2017 Share Posted October 6, 2017 This is a goood idea I really like it. We should at least keep a link to this playground. @CGinSeattle: Perhaps you are applying the transformation to the wrong mesh? The importMesh function returns a list of meshes. So perhaps you should try to add your transform to all meshes CGinSeattle 1 Quote Link to comment Share on other sites More sharing options...
CGinSeattle Posted October 6, 2017 Author Share Posted October 6, 2017 @DeltakoshYep, that was it. For whatever reason, the first mesh when loading a number of different .babylon samples, wasn't a good one to test with. But doing it to all of them in version17, did show an effect! Only wish this loader worked with straight obj's as well. I set the element to accept both .babylon and .obj like @JohnK 's example using @adam's code but no joy. The loader in adam's example must not accept obj's and adjusting for obj's isn't in my wheelhouse yet. I'm still using a plastic shovel and pail in the playground. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 6, 2017 Share Posted October 6, 2017 Lol!! But this is still a great start ;D For .babylon file, it's gonna be a bit harder as you need to provide all associated files (textures for instance). I would rather suggest using .glb files (where all data is in one single file) Quote Link to comment Share on other sites More sharing options...
CGinSeattle Posted October 6, 2017 Author Share Posted October 6, 2017 @Deltakosh actually the original goal was and still is to load OBJs for quick prototyping (no need for textures yet) and no need to try to get the mesh into a new format (new exporter, etc. etc.) Quick and easy. But .babylon file loading taught me a lot in my second day of play in a webgl/HTML/javascript world. Haven't hit shaders yet, as that will be a much bigger goal - save that for day 5 maybe. LOL. Being able to load up individual shaders quickly (from disk) to test before working out a way to test them quickly on a mobile device will be huge. And *not* having to setup a localserver (fake server) system like A-Frame requires just to test a prototype is a very good thing! Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 6, 2017 Share Posted October 6, 2017 So this is perfect Here is a bit of reading for your day 5 https://www.eternalcoding.com/?p=113 And some samples: https://www.babylonjs-playground.com/#10BT9S#36 https://www.babylonjs-playground.com/#16UICJ#3 CGinSeattle 1 Quote Link to comment Share on other sites More sharing options...
CGinSeattle Posted October 6, 2017 Author Share Posted October 6, 2017 (edited) @Deltakosh @adam @JohnK Did an update of adam's original to live create the upper navbar and label along with the choose file button. And included some comments and tests within and outside the callback just for completeness. Should work now in both Chrome and IE since it creates the button and new div's live. Learned alot, thanks all! https://playground.babylonjs.com/#5JBSHD#20 Edit: still can't get the objloader extension to work with the file chooser method. Don't know why yet, but in case, others are interested. If you're curious about that, see: https://www.babylonjs-playground.com/#6N13NV#7 This version has two buttons added dynamically to Playground, and two different methods being tried to load the obj file. Note: the button for OBJ loading also loads .babylon files. so I'm wondering if the objloader extension, despite being run (console log message confirms it starts to run), is being ignored? And I'm wondering why Playground won't just load an OBJ (I tried, it doesn't, at least not in my setup) since I looked at the HTML scripts Playground is loading, and an objloader js is one of them. Will update again if I get it running with file choosing from disk. Edited October 8, 2017 by CGinSeattle more info on progress with OBJ file loading part of question Quote Link to comment Share on other sites More sharing options...
Daiki Posted October 8, 2017 Share Posted October 8, 2017 Hello, I did not want to open a new topic. var loader = new BABYLON.AssetsManager(scene); var door = loader.addMeshTask("door", "", "http://www.jp-wolters.de/shop/helloworld/", "door.obj"); BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true; loader.load(); I have this script but the door is not displayed! Can this be that not all .obj files can be loaded into Babylon? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 9, 2017 Share Posted October 9, 2017 Try to call scene.debugLayer.show() This could help you debug and see if you have camera, lights and meshes Quote Link to comment Share on other sites More sharing options...
CGinSeattle Posted October 9, 2017 Author Share Posted October 9, 2017 @Daiki I tried loading your obj file using the code I'm working on in the Playground. see: https://www.babylonjs-playground.com/#6N13NV#8 It may not be the problem, because I am loading up the objloader based on another example in Playground, but I also couldn't load your file. the error (Mixed Content Error) indicated that the url must be HTTPS not HTTP Again, this might only be because I'm trying from the playground, which is https. Error Output from console follows: about to run loader for obj VM5027:136 about to try door babylon.js:30 Mixed Content: The page at 'https://www.babylonjs-playground.com/#6N13NV#7' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.jp-wolters.de/shop/helloworld/door.obj.manifest?1507584842956'. This request has been blocked; the content must be served over HTTPS. t.checkManifestFile @ babylon.js:30 t @ babylon.js:30 t._loadData @ babylon.js:29 t.ImportMesh @ babylon.js:29 i.runTask @ babylon.js:42 e.run @ babylon.js:42 t._runTask @ babylon.js:42 t.load @ babylon.js:42 reader.onload @ VM5027:149 FileReader (async) handleObjFileSelect @ VM5027:153 babylon.js:30 Mixed Content: The page at 'https://www.babylonjs-playground.com/#6N13NV#7' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.jp-wolters.de/shop/helloworld/door.obj.manifest'. This request has been blocked; the content must be served over HTTPS. (anonymous) @ babylon.js:30 XMLHttpRequest.send (async) t.checkManifestFile @ babylon.js:30 t @ babylon.js:30 t._loadData @ babylon.js:29 t.ImportMesh @ babylon.js:29 i.runTask @ babylon.js:42 e.run @ babylon.js:42 t._runTask @ babylon.js:42 t.load @ babylon.js:42 reader.onload @ VM5027:149 FileReader (async) handleObjFileSelect @ VM5027:153 babylon.js:3 Mixed Content: The page at 'https://www.babylonjs-playground.com/#6N13NV#7' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.jp-wolters.de/shop/helloworld/door.obj'. This request has been blocked; the content must be served over HTTPS. l @ babylon.js:3 t.LoadFile @ babylon.js:3 p @ babylon.js:29 t @ babylon.js:30 (anonymous) @ babylon.js:30 VM5027:115 something bad happened: Unable to import meshes from http://www.jp-wolters.de/shop/helloworld/door.obj: 0 :undefined Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 9, 2017 Share Posted October 9, 2017 Hey, this could be fixed by not laoding the prlayground with https (because if you do so, you are forced to only reference https resources) Quote Link to comment Share on other sites More sharing options...
CGinSeattle Posted October 9, 2017 Author Share Posted October 9, 2017 @Daiki Also, are you also doing something like this to force a render? loader.onFinish = function() { engine.runRenderLoop(function () { scene.render(); }); }; Quote Link to comment Share on other sites More sharing options...
CGinSeattle Posted October 9, 2017 Author Share Posted October 9, 2017 (edited) @Daiki @Deltakosh OK, tried running my code (again, it's in playground and based off loading the obj loader from another example) but ran it in http (not https) *** EDIT: I also tried on a local (static) version I'm working on. Same error as the playground (below). Caveats: I also can't load an obj created a few years ago with Blender (a local file) and shipped by a commercial AR kit maker, and it gives an error indicating that the loader I'm using doesn't like the OBJ file, while Unity is ok with the same OBJ file. I also tried using the obj loader the playground uses (namely) <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script> So the OBJ format expected/accepted by babylon objloaders (the two I've tried) may be different. But I haven't tried a number of different OBJs yet to see if I can get any to work. *** End Edit: Still no joy on your obj file, Daiki. But the error is different ***EDIT (same for both the obj loader from the example on OBJ loading, and the one used by the playground, and both in the playground and statically on my local machine). ***End Edi Hope this helps. Error follows: Failed to load http://www.jp-wolters.de/shop/helloworld/door.obj.manifest?1507585329366: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.babylonjs-playground.com' is therefore not allowed access. The response had HTTP status code 404. Edited October 9, 2017 by CGinSeattle updated some info re: different ways to test loading obj Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 9, 2017 Share Posted October 9, 2017 Yep this problem comes from the origin server which does not allow cross origin request Quote Link to comment Share on other sites More sharing options...
CGinSeattle Posted October 10, 2017 Author Share Posted October 10, 2017 @Daiki @Deltakosh I also tried a simple OBJ file exported from Maya 2015 and can't get it to load. I keep getting JSON parsing/undefined token errors (even when I strip it down to just vertex information). And any other attempt to load OBJ's directly (no manifest, no babylon file, etc.) with any objloader I've found on the babylon sites (demos and git) doesn't seem to work (playground or local/static). So I'm thinking now that perhaps the Objloader is pretty finicky and perhaps looking for some special stuff that an older Blender or Maya doesn't do. I don't have any new OBJ files to play with, so I guess the next step would be to debug the obj loader to see if I can spot why it's rejecting a perfectly fine, plain old OBJ file. Or it simply doesn't work on pure .obj files anymore for some reason, i.e. .obj not .babylon. In fact, the OBJ demo doesn't seem to work any more either. https://doc.babylonjs.com/extensions/obj I assumed it was because maybe the obj urls were no longer good, but now, I'm wondering if perhaps it's the objreader itself. The demo was dependent on babylon js 2.1. Basically, I'm out of ideas for now. Pure OBJs would be lovely, vs having to pack them inside some other format via Blender or whatever, but if it is possible, I can't seem to find the right combination. Please let me know if you get your OBJ to load, as I'd like to compare it with the ones I'm using and the code your using to make it work with the current version of babylonJS. Quote Link to comment Share on other sites More sharing options...
Daiki Posted October 10, 2017 Share Posted October 10, 2017 First time sorry that I am now answer. I had the last days unfortunately no time. I am now answering the piece for piece and then answer correctly Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 10, 2017 Share Posted October 10, 2017 Can you try to drag n drop your obj in the sandbox.babylonjs.com ? If it does not work, can you please share the file here? Quote Link to comment Share on other sites More sharing options...
Daiki Posted October 10, 2017 Share Posted October 10, 2017 6 minutes ago, Deltakosh said: Can you try to drag n drop your obj in the sandbox.babylonjs.com ? If it does not work, can you please share the file here? Since I can not load the file so it means for me that the file is broken, as I could load other obj file. The other date do not go into my babylon script. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.