無法使用three.js和ObjLoader2加載obj文件

Question

我是從 cdn ObjLoader2() 導入的。 我正在嘗試加載 obj 文件，但在控制台上出現兩個錯誤：

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.

和...

three.module.js:35911 GET myfilepath.obj net::ERR_FAILED
load    @   three.module.js:35911
load    @   OBJLoader2.js:301
(anonymous) @   index.html:31

這是我的代碼：

  <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>

我認為這是庫導入的問題，但我不明白錯誤。 我該如何解決？

Answer 1

看起來您正在本地運行，並且由於瀏覽器的同源策略安全限制，從文件系統加載將失敗並出現安全異常。

您需要在本地 Web 服務器上運行代碼才能加載 3D 模型。

您可以在three.js 的官方網站和文檔上關注how to。

如何在本地運行東西

加載 3D 模型

希望這可以幫助！ 祝你好運！