Recently, I've been delving into the world of three.js. In an attempt to display some text, I encountered a roadblock in the form of a CORS policy access blocked error related to loading a font file. Despite double-checking the path and experimenting with different locations for the file placement, I remain stumped. Below is the snippet of code I'm using to load the text:
var loader = new THREE.FontLoader();
loader.load('../Libraries/three.js-master/examples/fonts/gentilis_bold.typeface.json', function(font) {
var geometry = new THREE.TextGeometry('Hello three.js!', {
font: font,
size: 80,
height: 1,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelOffset: 0,
bevelSegments: 5
});
});
The specific error message reads as follows:
Access to XMLHttpRequest at 'file:///A:/Code/IIITH/computer-graphics-iiith/SRIP/Libraries/three.js-master/examples/fonts/gentilis_bold.typeface.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
If anyone could kindly offer guidance on how to overcome this hurdle, I would greatly appreciate it. As I am still coming to grips with three.js, I may have missed something fundamental. What might be causing this issue?