I’m trying to read an .obj file from an external website at runtime. I plan to use a converter to actually display the mesh (see this topic), but right now I’m having a different problem - I can’t even read the file. The code I’m using is below:
var data;
pc.http.get("https://ar.ateo.ch/lte_orb.obj", function(err, response) {
data = response;
});
I tried uploading (and reading) the file as a txt, but to no avail. The response is always an empty string “”. What am I doing wrong? I’m pretty new to JavaScript so this is all really confusing to me.
Oh right. The certificate isn’t working, the server isn’t configured right. Is that the problem? Err is always null when I test it.
Edit: nope, this is not what’s causing the problem. Fixed the certificate, the correct link is now “https://ateo.ch/ar/lte_orb.obj”. Still returns an empty string and err is null.
@whydoidoit: It’s not the same link. See my answer. We changed it to a subpage (instead of a subdomain) to avoid having to pay for https twice.
@will: Thanks! I got it to work with the url you use in the demo, but not with my own model. Could be a CORs issue or something, I’ll have to look into that. One other problem I have is that the loaded model does not scale along with its parent node, so I have no way of resizing it. Can that be done in the code?
Edit: I managed to scale the model with this.setLocalScale. I’m still having issues loading the model from our server though. If I understand correctly, I would have to add a CORs exception for playcanvas.com. Is that correct? How come my browser can access the contents of the page without issues, but my Playcanvas application cannot?
Edit2: One thing I noticed is that when I access your file (link) in my browser, it will show the contents of the .obj file as plain text. When I access my link the browser initiates a download prompt. Why is that, and can someone help me turn that off? I realise this is not really related to Playcanvas at all, but I’m stuck and a few minutes of googling have turned up nothing.
Ok, so I’m completely stumped. I tried two different webhosters that I have access to (hoststar and metanet). I couldn’t find an option to disable or change CORS handling in either of them. I tried changing the MIME type association in metanet to text/plain, which fixed the inconsistent handling of the filecontent in my browser. Unfortunately my Playcanvas application still cannot access .obj files from my server. The application is here by the way.
I don’t know what else to try, short of downloading and hosting the application directly on my server (which incidentally would get around CORS). Since I’m not a premium user yet and I have no idea whether that will actually fix the problem, I’m rather hesitant about that.
Are you getting any console errors when you try to download your file? Would be useful to check the Network tab in Chrome for example and see what exactly is the problem with the request you’re making.
For CORS in AWS for example if you host a file on S3 you can add a CORS Configuration for each bucket. Which webhosters have you tried? If you are running your own server, like NGINX you can set the desired CORS headers on the routes that you want.
My boss decided to go with a premium account so we can host the application ourselves. Loading .obj files located on the same server works perfectly now (using the script example @will provided), so I’m certain it was a CORS issue. I’d still like to figure out how to do it “properly” though, since it’s a bit annoying to test when I have to upload the release to our server for every single iteration.
I do get a console error, but from the script that converts the .obj file to a mesh, because the object data is missing. Calling pc.http.get just returns an empty string as response.
I’m hosting my files on Metanet, which uses some combination of Apache and NGINX. I have to admit that I have zero experience with webservers. I’ve been through all the usual php/apache settings that they let me change through their webpage, unfortunately CORS doesn’t seem to be among them. I googled, and found the following line of code:
Before browser send cross domain request, it will send a preflight request(OPTION method) to the server. If the server’s response with Access-Control-Allow-Origin "*", then the browser will send the “real” request, otherwise a CORS error will trigger.
So, what you should do is set this header on your server, either nginx/apache or php can do this.
Yes, but where can I set this header? I can’t find a config file for either php or apache. My host service provides a website where I can change a few simple settings (MIME types, script timeouts etc), but CORS isn’t in there. I have no idea how or where I can add a config file. I have never touched a webserver in my life, so this is… frustrating.
