为什么我的 3D 模型没有使用 glTF 加载器在 three.js 中加载？答案

【问题标题】：Why isn't my 3D Model Loading in three.js using the glTF loader?为什么我的 3D 模型没有使用 glTF 加载器在 three.js 中加载？
【发布时间】：2019-04-16 06:23:57
【问题描述】：

我是第一次将一个对象加载到 three.js 中。我已将对象下载到我的计算机上。 three.js 库连接到我的 html 文档以及 glTF 加载器。但是当我去运行代码时，我一直收到这个错误：

three_js_library.js:713 从源“null”访问“file:///C:/Users/Firstname%20Lastname/Desktop/neuron.glb”的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

所以我认为由于 CORS 政策，加载我的 3d 模型时遇到了一些问题。我已经尝试过reading the CORS policy 以及那是什么，但它并没有帮助我解决我在屏幕上显示 3d 模型而没有错误的问题。

然后我尝试为我从forum 了解到的类似问题的firefox 浏览器下载CORS everywhere extension，但这并没有产生预期的结果。它在 Firefox 上返回了这个错误，我认为这与我从谷歌得到的相同：

跨域请求被阻止：同源策略不允许读取位于 file:///C:/Users/Firstname%20Lastname/Desktop/neuron.glb 的远程资源。 >>（原因：CORS 请求不是 http）。

我只是想让 3D 模型成功加载到屏幕上。

如果有人对我做错了什么以及如何让我的模型在屏幕上加载有解决方案，我将不胜感激。

代码如下：

HTML

 <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="three_js_library.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
    <script src='MS_Interactive_Sim.js'>    </script>
</body>

Javascript

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new THREE.GLTFLoader();
loader.load( 'neuron.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
const animate =()=>{
    requestAnimationFrame( animate);
    renderer.render(scene, camera);
}
animate();

【问题讨论】：

标签： javascript three.js 3d cors xmlhttprequest

【解决方案1】：

您收到此错误是因为浏览器具有同源策略安全限制。如here 所述，有一些解决方案。我建议您从本地服务器运行文件，例如 MAMP。

【讨论】：

我刚刚了解了可以像 MAMP 和 XXAMP 这样使用的 Web 服务器。事实证明，我也可以使用 node.js 和其他语言创建本地服务器。