Three.js 加载本地模型遭遇跨域难题？别慌，这些妙招轻松解决！

javascript

2024-03-06 05:20:00

在 Three.js 中加载本地模型时的跨域问题：解决方案详解

在 Three.js 中加载本地模型文件时，你可能会遇到“跨域请求仅支持 HTTP”的错误。这个问题是由浏览器安全限制引起的，它阻止了从本地文件系统加载模型文件。解决此问题的以下方法可以帮助你顺利加载模型。

问题原因

为了保护用户安全，浏览器会阻止来自不同来源（如本地文件系统）的脚本或应用程序访问来自另一个来源（如 Web 服务器）的资源。这就是当你在 Three.js 中尝试加载本地模型文件时，你会遇到跨域错误的原因。

解决方案

解决此问题的常用方法包括：

使用本地服务器

使用 Apache 或 Nginx 等本地服务器将模型文件托管在 Web 服务器上。这将允许你的 Three.js 应用程序从 HTTP URL 加载文件，绕过跨域限制。

使用 CORS 代理

CORS（跨域资源共享）代理充当客户端和服务器之间的中间人。它可以修改 HTTP 头部以允许跨域请求。CORS Anywhere 等代理服务可以轻松启用跨域请求。

使用允许跨域访问的加载器

Three.js 提供了一个 JSONLoader 实例，允许跨域访问。设置 crossOrigin 属性为 'anonymous' 可以启用它，如下所示：

const loader = new THREE.JSONLoader();
loader.crossOrigin = 'anonymous';

loader.load( 'path/to/model.json', function ( geometry, materials ) {

    // ...

} );

使用 XMLHttpRequest

XMLHttpRequest (XHR) 可以手动加载文件，包括跨域请求。但是，你需要自己解析响应数据。

const xhr = new XMLHttpRequest();
xhr.open( 'GET', 'path/to/model.json' );

xhr.onload = function() {

    if ( xhr.status === 200 ) {

        const data = JSON.parse( xhr.responseText );

        // ...

    }

};

xhr.send();

使用 File API

File API 允许你读取本地文件，你可以使用它加载模型文件并将其作为 ArrayBuffer 传递给 JSONLoader。

const fileInput = document.querySelector( 'input[type="file"]' );

fileInput.addEventListener( 'change', function() {

    const file = fileInput.files[ 0 ];

    const reader = new FileReader();
    reader.onload = function() {

        const arrayBuffer = reader.result;

        const loader = new THREE.JSONLoader();
        loader.parse( arrayBuffer, function ( geometry, materials ) {

            // ...

        } );

    };

    reader.readAsArrayBuffer( file );

} );