当前位置: 首页 > 知识库问答 >
问题:

在Three.js[重复]中使用OBJLoader时出现CORS问题

徐凌
2023-03-14

我试图使用OBJLoader从系统中加载一个对象,但我总是得到CORS错误的提示:

CORS策略已阻止从源“null”访问“file:///users/pranayankittiru/desktops/tasks/resources/pix.obj”处的XMLHttpRequest:跨源请求仅支持协议方案: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是个新手,所以我不知道哪里出了问题。请帮帮我。

共有1个答案

云开诚
2023-03-14

您必须使用本地web服务器才能避免此安全错误。关闭浏览器中的安全策略是另一种选择,但不推荐使用。

更多信息请阅读以下指南:https://threejs.org/docs/index.html#manual/en/introduction/how-to-run-things-local

 类似资料:
  • 问题内容: 我正在尝试加载对象(.obj)文件以与three.js一起使用并做出反应(使用react-three-renderer),但得到的My代码如下: 但是,我不断得到:“在’三个’中找不到导出’OBJLoader’(导入为’三个’)有人有主意吗? 问题答案: 因此,似乎添加到react组件上就可以了(怪异,是吗?)。所以我的代码目前看起来像:

  • CORS策略已阻止从源“HTTP://localhost:8080”访问“HTTP://localhost:8081/v1/api/group/find/shib”得XMLHttpRequest:对预飞行请求得响应未通过访问控制检查:它不具有HTTP ok状态. 让我告诉你我做了什么来解决这件事。在angular HTTP请求中,我添加了以下头。 在spring boot中,我在添加了CORSFi

  • 下面是API调用的代码 所以当我检查应用程序时,我会... 我如何解决CORS问题,以便能够从API获取所需的详细信息到应用程序?

  • 我已经安装了所有必要的工具,但仍然显示错误。我已经安装了所有必需的SDK文件两次三次,但仍然显示错误。 这是错误

  • 问题内容: 我在package.json中添加了proxy,效果很好,但是在npm run build之后,CORS问题再次浮出水面,有人知道在React中npm run build之后如何处理CORS问题。 我试图使用各种方法在axios请求中添加标头。但是,我未能在axios请求中添加’Access-Control-Allow- Origin’:’*’。我的代码如下: package.json

  • 我所要做的就是访问json文件的内容并将其显示到网页上。但我有个错误: JSON文件和HTML文件都在同一个文件夹中。 这是我的html页面: 这是JSON文件myData。json: 我真的不明白这个问题,但如果我做错了,有人能告诉我更好的方法吗?