I imported from cdn ObjLoader2(). I'm trying to load an obj file but on the console I get two errors:
Access to XMLHttpRequest at 'myfilepath.obj' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
and...
three.module.js:35911 GET myfilepath.obj net::ERR_FAILED
load @ three.module.js:35911
load @ OBJLoader2.js:301
(anonymous) @ index.html:31
Here's my code:
<script src="js/three.js"></script>
<script src="js/three.min.js"></script>
<script type="module">
import { OBJLoader2 } from "https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/loaders/OBJLoader2.js";
import { OrbitControls } from "https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js";
const canvas = document.querySelector("#canvasObj");
const renderer = new THREE.WebGLRenderer({ canvas });
const fov = 45;
const aspect = 2;
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 5, 2);
const scena = new THREE.Scene();
const objLoader = new OBJLoader2();
objLoader.load("Iphone8.obj", (root) => {
scena.add(root);
render();
});
renderer.render(scena, camera);
</script>
I think it's a problem with library importing, but I don't understand the error. How do I resolve this?
looks like you're running things locally, and due to browsers' same origin policy security restrictions, loading from a file system will fail with a security exception.
You need to run your code on a local web server in order to load 3D models.
You can follow how to on three.js's official website and documentation.
Hope this helps! Best of Luck!