I'm attempting to access an object from my system using OBJLoader, but I keep encountering a CORS error that states:
Access to XMLHttpRequest at 'file:///Users/pranayankittiru/Desktop/tasks/resources/Pix.obj' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.Below is the code for my task (task1.js):
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// instantiate the loader
var loader = new THREE.OBJLoader();
loader.load(
"resources/Pix.obj",
function(object) {
scene.add(object);
},
function(xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
function(error) {
console.log("An error has occured");
}
);
Here is the HTML file I'm using:
<html>
<head>
<meta charset="utf-8">
<title>Task-1</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/loaders/ObjectLoader.js"></script>
<script src="task1.js"></script>
</body>
</html>
I am utilizing Three.js locally and I am relatively new to it. If anyone could provide assistance on how to resolve this issue, it would be greatly appreciated.