While working with THREE.js, I encountered an issue in the developer console:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
This error only occurs when I try to run my script in Chrome. The code snippet in question is as follows:
var particle_system_material = new THREE.ParticleSystemMaterial({
color: 0xffffff,
map: THREE.ImageUtils.loadTexture("images/circle.png"),
});
The culprit seems to be this line:
map: THREE.ImageUtils.loadTexture("images/circle.png");
Interestingly, everything works fine in Firefox.
I have explored various sources for solutions including:
- Chrome, three.js: Cross-origin image load denied
- https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
I have also attempted the following solution:
Start Chrome executable with a command line flag:
chrome --allow-file-access-from-files
Unfortunately, none of these methods have resolved the issue, and I am feeling quite frustrated. The image is stored on my local hard drive along with the HTML and JS files, without any server or specific "origin" for the content.