solved Importing OBJ files directly from computer?

[CGinSeattle]

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,

        

[Nutiler]

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]

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!

[JohnK]

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]

@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!

[adam]

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.

[JohnK]

@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

[CGinSeattle]

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

[GameMonetize]

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]

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

 

[GameMonetize]

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)

[CGinSeattle]

@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!

 

[GameMonetize]

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]

@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

[Daiki]

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?

 

[GameMonetize]

Try to call scene.debugLayer.show()

This could help you debug and see if you have camera, lights and meshes

[CGinSeattle]

@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

[GameMonetize]

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)

[CGinSeattle]

@Daiki Also, are you also doing something like this to force a render?

loader.onFinish = function() {
            engine.runRenderLoop(function () {
                scene.render();
            });
        };

[CGinSeattle]

@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

[GameMonetize]

Yep this problem comes from the origin server which does not allow cross origin request

[CGinSeattle]

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

[Daiki]

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

[GameMonetize]

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?

[Daiki]

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.