CODEWITHSUNDEEP
three.jscorsgltf
cesarpachon
cesarpachon

Reputation: 1213

THREE.js GLTFLoader CORS error how to enable CORS?

hello I am trying to load a GLTF model with the THREE.js GLTFLoader, I am getting a CORS error (not access-control-allowed-origin present..) I am pulling from a s3 bucket other assets as well and everything works, except for the GLTF so my guess is I need to pass some CORS flag to the GLTFLoader. right now: 

    this.loader = new THREE.GLTFLoader();
    this.loader.load(avatar_path, gltf => {..})

Edit1: I already tried with: 

   loader.setCrossOrigin( 'anonymous' )

and

   loader.setCrossOrigin( 'use-credentials' )

without success. always same CORS error.

Upvotes: 0

Views: 4646

Answers (2)

Abhishek Sharma
Abhishek Sharma

Reputation: 1

First you need to set a local web server on your pc , after then you need to create a .php file and write the following code into it : < ? php header("Access-Control-Allow-Header: *") ?> and then include that file into your html file . it worked for me ... 😊

Upvotes: -1

user128511
user128511

Reputation:

You shouldn't need to set anything in three.js. Three.js automatically asks for CORS permissions when needed.

This is most likely a server configuration.

Open your browser's devtools, go to the network tab, reload the page, look at the request and response for the .gltf file. You should see in the "request" (from the browser) a CORS header and in the reponse (from S3) an "access-control-allow-origin: *" header. My guess is the server's response is missing the header which means your server is not configured correctly.

Just a guess but if images loaded into three.js work, not images on the page itself as those don't need CORS permission) but actual textures, then the issue is your S3 is configured to send CORS only for certain types of files. If images used a texture also don't work then the issue is more basic CORS configuration

Example:

enter image description here

Upvotes: 4

Related Questions