Fetching 3d objects via server

Help & Support
1

Hello,

I coding game and I import 3D objects in to project. I import several objects and project size will increase to big. I wonder if its possible fetched 3d objects from own server and this way decrease project size ? .

Thanks

2 
var asset = new Asset("Remote Model", "model", {
    url: "http://example.com/remote-model.json"
});
app.assets.add(asset);

asset.on("load", function (err, model) {
  //loaded
});
app.assets.load(asset);
3

Another variant is using loadFromUrl which will also attempt to load material mappings if you are loading models which saves you from having to load all of the textures and materials separately.

Example: https://playcanvas.com/editor/scene/547080

4

Thanks to both! I tried yaustar link and I got this to work the ship what was in tutorial but when i tried my own .json object it does not work. I first put the .dae object to Playcanvas and downloaded .json object and put my server. It give this error:

error
error.png2880×1220 224 KB

What I do wrong ?

5

Now I read chrome console. Did I understand right that link must be https ?

6

Several things to note:

  1. You can’t access an http resource if you are on https (on PlayCanvas, you can use the site on http if you want to).
  2. The server that is hosting the files must be able to serve JSON (ie https://stackoverflow.com/questions/39614665/how-to-serve-json-from-a-web-server)
7

I’m almost sure your .json has mapping file and it’s missing. When you download asset from Editor, you have to place it on server with the same hierarchy.

Open console (f12) and check network tab in order to see it exactly.

8

I actually went through the exact issue a while ago. In my case I hosted it on amazon s3 bucket and I hadn’t allowed Cross origin requests. So when playcanvas is loading the json from a different domain than S3 it would throw http 401 forbidden. Note that the json will load just fine from a browser but it only happens when you load programmatically from a different domain than S3. Trick was to allow all origins.

Also use console.log to debug these things, it’s very handy

9

Hey, I’m facing the same issue. I’m pretty new to loading fbx files from servers, how do you allow CORS requests?
Thanks for answer

10

Hi @Lukas_31, you can’t load FBX models on runtime, that isn’t supported.

You can load GLTF/GLB models, there are some examples here on how to do that:

https://developer.playcanvas.com/en/tutorials/?tags=assets

2 Likes
11

Hi Leonidas, thanks for your reply!
I’m using the GLTF/GLB format but I’m requesting it from firebase storage. I’m getting CORS error .

This is the error in the console:
Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/asset-load-tets.appspot.com/o/table%2FDamaged%20Helmet.glb?alt=media&token=d52f46f2-6d61-48b5-b242-845e3318bc7e' from origin 'https://launch.playcanvas.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

12

Hi @Lukas_31,

I think if you are using firestorage you will have to first enable CORS access for this domain name to fix that.

Here is a quick search result I’ve found: cors - Firebase Storage and Access-Control-Allow-Origin - Stack Overflow.

1 Like
13

Thank you, I enabled cors for firebase storage(buckets) not assets are loading.

1 Like
14

Hi all, I’m just trying to understand exactly how this works. If I have a remote GLB or FBX for example do I first need somehow to convert it to JSON or should the JSON file just contain a path to the fbx/GLB file. Apologies for my ignorance :slight_smile:

15

FBXs cannot be loaded at runtime. GLBs can though.

Example here: Loading glTF GLBs | Learn PlayCanvas

There’s a script there that loads a GLB from a URL. Search for loadGlbContainerFromUrl

1 Like
16

Perfect. Thank you so much!