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

この記事では主に、three.js の中国語ドキュメント学習をローカルで実行する方法について詳しく紹介します。この記事は、学習や仕事を必要とするすべての人の参考となる学習価値があります。フォローできます 編集者と一緒に学びましょう、皆さんのお役に立てれば幸いです。

プロシージャル ジオメトリを使用するだけで、マテリアルをロードする必要がない場合は、ファイル マネージャーで HTML ファイルをダブルクリックするだけで、Web ページがファイル システムから直接ロードされ、ブラウザーで実行されます。アドレス バーは次のようになります: file:///yourFile.html)

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

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

解決策は 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 で説明されています。

関連する推奨事項:

JS ライブラリ - Three.js の基本入門

Three.js でシーンを作成する方法

Three.js の基本部分を学習します

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