Three.js でローカル ファイルをロードする際の「クロスオリジン リクエストは HTTP でのみサポートされています」エラーを解決する方法は?

Three.js でのローカル ファイルのロードでのクロスオリジン エラー

JSONLoader を使用してローカル 3D モデルを Three.js にロードすると、開発者は次のような問題が発生する可能性があります。 「クロスオリジンリクエストはHTTPでのみサポートされています。」というエラーが発生します。このエラーは、競合するオリジンが見つかったときに発生します。

ほとんどの場合、根本的な原因は、HTTP オリジンとはみなされない file:// または C:/ のいずれかを使用してファイルがロードされたことです。この問題を解決するには、2 つの一般的なアプローチがあります:

1. ローカル Web サーバーをインストールします: ローカル コンピューターに Web サーバーをインストールし、モデルをホストします。これにより、HTTP プロトコルを使用してアクセスできるようになり、Three.js が正しくロードできるようになります。
2. モデルをサーバーにアップロードする: 3D モデルをサーバーにアップロードし、コードを調整します。 HTTPS または HTTP プロトコル URL を使用してモデルをロードします。このアプローチでは、オリジンがサーバーのドメインと一致するため、クロスオリジンの問題が解消されます。

オリジンはスキーム、ホスト、ポートによって定義されることに注意することが重要です。したがって、ファイルが同じホストから生成されたものであっても、スキームの違い (例: http とファイル) により、それらは異なる生成元として扱われます。上記のアプローチのいずれかを使用すると、クロスオリジン エラーを解決し、ローカル 3D モデルを Three.js に正常にロードできます。

以上がThree.js でローカル ファイルをロードする際の「クロスオリジン リクエストは HTTP でのみサポートされています」エラーを解決する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。