Question

我正在尝试使用OBJLoader从我的系统中加载对象，但是我总是收到CORS错误告诉我：

Access to XMLHttpRequest at 'file:///Users/pranayankittiru/Desktop/tasks/resources/Pix.obj' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

这是我的代码（task1.js）：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// instantiate the loader
var loader = new THREE.OBJLoader();

loader.load(
  "resources/Pix.obj",
  function(object) {
    scene.add(object);
  },
  function(xhr) {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  function(error) {
    console.log("An error has occured");
  }
);

这是我的HTML文件：

<html>
    <head>
        <meta charset="utf-8">
        <title>Task-1</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/loaders/ObjectLoader.js"></script>
        <script src="task1.js"></script>
    </body>
</html>

我在本地使用Three.js。我是Three.js的新手，所以我不知道我要去哪里错了。请帮助我。

Answer 1

您必须使用本地Web服务器以避免此安全错误。关闭浏览器中的安全策略是另一种选择，但不建议这样做。

请先阅读以下指南，以获取更多信息：https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

在Three.js中使用OBJLoader时出现CORS问题

1 个答案: