My goal is to showcase a glTF file using Three.js. To bypass CORS policy, I have opted for a local server called Servez. While everything runs smoothly on Mozilla Firefox without errors, the content does not appear. However, when attempting the same on Chrome, the message "Not allowed to load local resource:" pops up. I even tried using the Chrome Web Server extension, but the outcome remains unchanged across both browsers.
PS- I understand that this issue is related to security concerns with Chrome, but I prefer not to tamper with any security configurations.
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
</head>
<body>
<script type="module" src="https://threejs.org/build/three.js"></script>
</script>
<script type="module">
import {GLTFLoader} from 'C:/Users/Prinzu/three.js-master/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'C:/Users/Prinzu/three.js-master/examples/jsm/controls/OrbitControls.js';
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);
hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
directionalLight = new THREE.DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
light = new THREE.PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
let loader = new THREE.GLTFLoader();
loader.load('scene.gltf', function(gltf){
car = gltf.scene.children[0];
car.scale.set(0.5,0.5,0.5);
scene.add(gltf.scene);
animate();
});
}
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>