ローカルでthree.jsを実行する方法の詳細な説明

この記事では主に、three.js 中国語ドキュメント学習をローカルで実行する方法に関する関連情報を、サンプル コードを通じて詳しく紹介します。これは、学習や仕事に必要なすべての人の参考になります。フォローできます 編集者と一緒に学びましょう。

外部ファイルからコンテンツをロードする

外部ファイルからモジュールやマテリアルをダウンロードする場合、ブラウザの同一生成元ポリシーのセキュリティ制限により、セキュリティ例外がスローされ、ロードは失敗します。

解決策は 2 つあります:

ブラウザでローカル ファイルのセキュリティを変更します。次のように Web ページに入ることができます:

file:///yourFile.html

ローカル Web サーバーからファイルを実行すると、次のように Web ページに入ることができます:

http://localhost/yourFile.html

最初の方法を使用する場合は、必ず同じブラウザを使用してください (セキュリティを変更した後) 通常、インターネットをサーフィンすると、脆弱な状態になります。セキュリティを確保するためのみ、ローカル開発用に別のブラウザー構成とショートカットを作成できます。それぞれの方法を順番に見ていきましょう。

ローカルサーバーを実行する

多くのプログラミング言語にはHTTPサーバーが組み込まれています。 Apache や NGINX のすべての機能は備えていませんが、three.js アプリケーションをテストするには十分です。

Node.js サーバー

にはシンプルな HTTP サーバー インストール パッケージがあり、インストール:

npm install http-server -g

実行:

http-server -p 8000

Python サーバー

Python がインストールされている場合は、作業ディレクトリで次のコマンド ラインを実行します:

//Python 2.x
python -m SimpleHTTPServer

//Python 3.x
python -m http.server

サービスを開始するには、現在のディレクトリからローカルホストのポート 80 に移動します。アドレス バーは次のとおりです:

http://localhost:8000/

PHP サーバー

PHP には、組み込み Web サーバー (php 5.4.0 以降) もあります。

php -S localhost:8000

Ruby サーバー

これがインストールされている場合は、次のようなコードを実行できます:

ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"

Lighttpd

これは非常に軽量な汎用 Web サーバーです。 HomeBrew がインストールされた OSX システムを例に挙げてみましょう。上記のサーバーとは異なり、lighttpd は成熟したサーバー製品です。

homebrew 経由でインストール

brew install loghttpd

Web サーバーを実行する場所に lighttpd.conf という構成ファイルを作成します。例:

server.document-root = "/var/www/servers/www.example.org/pages/"

server.port = 3000

mimetype.assign = (
 ".html" => "text/html", 
 ".txt" => "text/plain",
 ".jpg" => "image/jpeg",
 ".png" => "image/png" 
)

設定ファイルで、server.document-root を、提供する必要があるディレクトリに変更します。

有効化:

lighttpd -f lighttpd.conf

http://localhost:3000/ と入力して、選択したディレクトリから静的ファイルを提供します。

ローカル ファイルのセキュリティ ポリシーを変更します

Safari

環境設定パネルを使用して、[開発者向けオプション] をオンにします: [詳細] -> [メニュー バーに開発メニューを表示]。

次に、[開発] -> [ローカルを無効にする]ファイル制限。編集とデバッグに Safari を使用する場合、Safari はキャッシュに関して常に奇妙な動作をすることに注意してください。そのため、同じメニューで [キャッシュを無効にする] をクリックするのが賢明な選択です。

chrome

まず、実行中のすべての chrome インスタンスを閉じます。すべてを覚えておいてください。

Windows では、プロセス マネージャーを使用して、プロセス マネージャーがすべて閉じられているかどうかを確認する必要があります。または、システム トレイに Chrome アイコンが表示されている場合は、右クリック メニューを開いて [終了] をクリックします。これにより、すべてのインスタンスがシャットダウンされます。

次に、コマンド ライン フラグを使用して Chrome プログラムを起動します:

chrome --allow-file-access-from-files

Window の下で、最も簡単な方法は、特別なショートカット アイコンを作成し、最後に上記のロゴを追加することです。 (Chromeのショートカットを右クリック→プロパティ→ターゲット)

Firefox

アドレスバーにabout:configと入力します

security.fileuri.strict_origin_policyパラメータを見つけます

falseに設定します

その他の方法は単純です。どちらの方法も Stack Overflow で説明されています。

関連する推奨事項:

Three.jsによる3Dマップの実装例の共有

three.jsで作成されたプロジェクトクラスのサンプルコード共有

Three.jsによる外部モデルのロード例の説明

以上がローカルでthree.jsを実行する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。