ホームページ  >  記事  >  ウェブフロントエンド  >  ローカルでthree.jsを実行する方法の詳細な説明

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

小云云
小云云オリジナル
2018-01-16 13:07:512474ブラウズ

この記事では主に、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。