I'm trying to load a 3D object into my three.js project for the first time. I have the object downloaded on my computer and have connected the three.js library and the glTF loader to my HTML document. However, every time I run the code, I encounter the following error:
three_js_library.js:713 Access to XMLHttpRequest at 'file:///C:/Users/Firstname%20Lastname/Desktop/neuron.glb' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
It seems like the CORS policy is causing trouble in loading my 3D model onto the screen. I've attempted to understand the CORS policy by reading about it, but it hasn't helped me in getting my model to display without any errors.
As a solution, I tried using a CORS everywhere extension in Firefox that I found in a forum discussing a similar issue, but unfortunately, it didn't yield the desired outcome. I received a similar error in Firefox, which led me to think it's the same issue I encountered in Google:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/Firstname%20Lastname/Desktop/neuron.glb. (Reason: CORS request not http).
All I want is for the 3D model to load successfully on the screen.
If anyone has a solution to what I might be doing wrong and how I can successfully load my model onto the screen, I would greatly appreciate it.
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three_js_library.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src='MS_Interactive_Sim.js'> </script>
</body>
Javascript
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const loader = new THREE.GLTFLoader();
loader.load( 'neuron.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
const animate =()=>{
requestAnimationFrame( animate);
renderer.render(scene, camera);
}
animate();