Uploading meshes

Questions
1

Hi,

I make 3d models with blender and I need to present them on a website. Can I upload my models here on github to have access to them online? If so, how can I do it?

2

  1. I moved your question to #questions - just to let you know, #resources category is to share resources like libraries, tutorials etc. :slight_smile:

  2. If you’d like to use github as hosting, create a repo and enable github pages on it. Repo will then become a normal, hosted website, and you will be able to access resources using links like:

https://[YOUR_NAME].github.io/[REPO_NAME]/[PATH]/[FILE].[EXTENSION]

(ex.: https://mjurczyk.github.io/three.js/examples/models/gltf/BoomBox/glTF/BoomBox.gltf)

1 Like
3

Thank you very much!
So I created a repo and uploaded the mesh. But when I try to display the mesh on the website I still get an error:
Access to XMLHttpRequest at ‘https://github.com/ga34rul/assets/blob/882ed02e67e740e68d03e150a9fb5cd535573cd0/Shelf.glb?raw=true’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
github.com/ga34rul/assets/blob/882ed02e67e740e68d03e150a9fb5cd535573cd0/Shelf.glb?raw=true:1

I tried different paths like https://github.com/ga34rul/assets/raw/meshes/Shelf.glb and so an. He wont let me display it on the site.

Maybe I uploaded it wrong? Can I also upload my meshes in the three.js/examples/models/gltf -path?

4

Sorry, my mistake - try removing the https: from the url:

//github.com/ga34rul/assets/blob/882ed02e67e740e68d03e150a9fb5cd535573cd0/Shelf.glb?raw=true

I’m guessing you are trying to load these assets in a non-HTTPS origin and it’s blocked automatically.

5

just tried it. He then puts the https: automatically in front of the URL and I get the same error.

6
  1. Regardless, if you’re loading assets from HTTP, still remember to remove https: part.
  2. Did you use the URL scheme I’ve shown you? (For what I now see in the errors you shared, you didn’t.)
  3. You created a hosted github pages branch, but the models are not there - https://github.com/ga34rul/assets/tree/gh-pages - so won’t be possible to load any models, even if the url structure was correct.
7

this is how the code looks like:

const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load(’//github.com/ga34rul/assets/blob/gh-pages/Shelf.glb?raw=true’, (gltf) => {
const shelfMesh = gltf.scene;
shelfMesh.position.set(0,0,0);
scene.add(shelfMesh);
});

I removed the “https:”

Sorry for the high noob-level… oO
I uploaded the file under “gh-pages”. Still the same. No matter if it’s under “gh-pages”, “main” or “meshes”.
I right click on “raw” or “Download” to get the URL. Maybe that’s the mistake? I don’t see any other way to access the URL.

8

(function(){
var q = new XMLHttpRequest();
q.open('HEAD', 'https://raw.githubusercontent.com/ga34rul/assets/0be5fd5c951882a646c850629d4d8e0dac5baa55/Shelf.glb', !1);
q.send(null); alert(q.getAllResponseHeaders()) })();

If I were you, I wouldn’t use a free host.

1 Like
9

Why do you say so? I understand about other “iffy” adware based sites etc, but why not github?

10

@rrrr_rrrr why the HEAD request? That looks like a nasty hack. :sweat_smile:

On the other hand your URL structure works much better - just instead of using it in XHR, it should be enough to do:

(new GLTFLoader()).load(
  "//raw.githubusercontent.com/ga34rul/assets/0be5fd5c951882a646c850629d4d8e0dac5baa55/Shef.glb",
  model => {
    scene.add(model.scene);
 }
);
11

I need to type "THREE.GLTFLoader instead of just GLTFLoader , otherwise I get an error. But still I get the same error as usual. It’s starting to get frustrating… :confused:
I don’t mind to share the models I create. So if it is possible to upload them to three.js/model it might work.

12

Hm, I tested it on codepen and it works just fine. Can you share your code?

13

A simple and easy way to check if a file can be fetched.
Run it from console, address bar or your own custom javascript commander.

14

he wont let my post any answers no more…

I hope this time it works:

so I commented my code and put yours:

//const gltfLoader = new THREE.GLTFLoader();
/* gltfLoader.load(’//github.com/ga34rul/assets/blob/gh-pages/Shelf.glb’, (gltf) => {
const shelfMesh = gltf.scene;
shelfMesh.position.set(0,0,0);
shelfMesh.scale.set(3,3,3);
scene.add(shelfMesh);
}); */

(new THREE.GLTFLoader()).load(
“//github.com/ga34rul/assets/blob/gh-pages/Shelf.glb”,
model => {
scene.add(model.scene);
}
);

Edit: Or do you mean the whole code? it’s pretty long…

I’ve been changing the URL the whole time…

15

When I type your code (with another URL), I get:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

16

In your code the URL is now to raw.githubuserconrent.com - it will not work.

Using the URL @rrrr_rrrr shared should work.

17

Bildschirmfoto 2020-10-26 um 21.37.07

I’m probably too dumb -__-"

18

Can you show the code with that url used ? I’m afk, can’t write you a sample codepen atm, sry. :man_facepalming:

19

(new THREE.GLTFLoader()).load(
“//raw.githubusercontent.com/ga34rul/assets/0be5fd5c951882a646c850629d4d8e0dac5baa55/Shef.glb”,
model => {
scene.add(model.scene);
}
);

20

Garçon. My dear. Please do take a look at that url you’re using. Take as much time, letter by letter. Inhale that url. Become that url. You shalt then find the truth. Truth that is not connected to github / hosting / GLTFLoader in any way. :’) (it is kind of connected to my mistake in the post I made earlier, but I asked you to specifically use @rrrr_rrrr’s url, not mine, so that clears my name and any claims against me. :slight_smile: )

[ Hint: look at the filename :’) ]

2 Likes