I've been struggling with this issue for a while now. Despite searching on various search engines, I haven't made much progress. I have a script that loads a texture onto a sphere.
var loader = new THREE.TextureLoader();
//allow cross origin loading
loader.crossOrigin = '';
loader.load(window.photo_url,
// Function when resource is loaded
function ( texture ) {
sphereMaterial.map = texture;
var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
scene.add(sphereMesh);
// Start the update frame part
requestAnimationFrame(update);
}
)
The window.photo_url is set in another code snippet. My S3 bucket is now at its most permissive CORS configuration
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
<AllowedHeader>origin</AllowedHeader>
</CORSRule>
</CORSConfiguration>
However, I'm facing inconsistency issues with CORS errors from time to time. The page works fine on Chrome and Safari on my laptop. However, it only works on Chrome and not on Safari on my phone. On another phone, the page doesn't work on either browser. Interestingly, on the same page, images are loading using image_tag from the same S3 bucket and they show up correctly. One of the images I'm trying to use in the script works perfectly fine when fetched using image_tag.
Has anyone encountered similar issues before? Any suggestions or ideas?