Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/458.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/sharepoint/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 为什么不是';是否使用glTF加载程序在three.js中加载我的3D模型?_Javascript_Three.js_3d_Cors_Xmlhttprequest - Fatal编程技术网

Javascript 为什么不是';是否使用glTF加载程序在three.js中加载我的3D模型?

Javascript 为什么不是';是否使用glTF加载程序在three.js中加载我的3D模型?,javascript,three.js,3d,cors,xmlhttprequest,Javascript,Three.js,3d,Cors,Xmlhttprequest,我第一次将一个对象加载到three.js中。我已将该对象下载到我的计算机上。three.js库连接到我的html文档以及glTF加载程序。但当我运行代码时,我一直收到以下错误: three_js_library.js:713在'file:///C:/Users/Firstname%20Lastname/Desktop/neuron.glbCORS策略已阻止“来自源”的“null”:跨源请求仅支持协议方案:http、数据、chrome、chrome扩展、https 所以我想,由于CORS政策,它在

我第一次将一个对象加载到three.js中。我已将该对象下载到我的计算机上。three.js库连接到我的html文档以及glTF加载程序。但当我运行代码时,我一直收到以下错误:

three_js_library.js:713在'file:///C:/Users/Firstname%20Lastname/Desktop/neuron.glbCORS策略已阻止“来自源”的“null”:跨源请求仅支持协议方案:http、数据、chrome、chrome扩展、https

所以我想,由于CORS政策,它在加载我的3d模型时遇到了一些问题。我已经试过了,但这并没有帮助我解决在屏幕上显示3d模型时没有错误的问题

然后,我尝试下载了一个用于firefox浏览器的文件,这是我从一个关于类似问题的网站上了解到的,但没有产生预期的结果。它在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>

出现此错误是因为浏览器具有同源策略安全限制。如前所述,有几种解决方案。我建议您从本地服务器运行文件,例如。

我刚刚了解了可以使用的web服务器,如MAMP和XXAMP。事实证明,我还可以使用node.js和其他语言创建本地服务器。
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();