无法使用three.js和ObjLoader2加载obj文件 [英] Can't load an obj file with three.js and ObjLoader2

问题描述

我是从 CDN ObjLoader2() 导入的.我正在尝试加载 obj 文件，但在控制台上出现两个错误:

从源 'null' 访问 XMLHttpRequest at 'myfilepath.obj' 已被 CORS 策略阻止:跨源请求仅支持协议方案:http、data、chrome、chrome-extension、chrome-untrusted，https.

还有……

three.module.js:35911 GET myfilepath.obj net::ERR_FAILED加载@three.module.js:35911加载@ OBJLoader2.js:301(匿名)@index.html:31

这是我的代码:

 <script src="js/three.min.js"></script><脚本类型=模块">从https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/loaders/OBJLoader2.js"导入{OBJLoader2}；从https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js"导入{轨道控制}；const canvas = document.querySelector(#canvasObj");const renderer = new THREE.WebGLRenderer({ canvas });常量 fov = 45;常量方面 = 2;常量接近 = 0.1;常量远 = 5;const camera = new THREE.PerspectiveCamera(fov,aspect,near,far);相机位置设置(0、5、2)；const 场景 = 新的 THREE.Scene();const objLoader = 新的 OBJLoader2();objLoader.load(Iphone8.obj", (root) => {场景添加(根)；使成为();});renderer.render(场景，相机)；

我认为这是库导入的问题，但我不明白错误.我该如何解决?

解决方案

看起来您是在本地运行，并且由于浏览器的同源策略安全限制，从文件系统加载将失败并出现安全异常.

您需要在本地网络服务器上运行您的代码才能加载 3D 模型.

你可以在three.js的官网和文档上关注how to.

如何在本地运行事物

加载 3D 模型

希望这有帮助！祝你好运！

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.

How to run things locally

Loading 3D Models

Hope this helps! Best of Luck!

这篇关于无法使用three.js和ObjLoader2加载obj文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！