【Three.js】PythonでローカルにWebサーバーを立てる

前回の記事ではローカルで Three.js のサンプルを動かすところまでやってみました。

ローカルでの実行は手軽で良いのですが、セキュリティ上の制約により外部ファイルが読み込めないという状況が発生します。

Chrome ブラウザであれば起動時のオプション設定により回避する方法などありますが、Python がインストールされているマシンであれば簡単にローカルに Web サーバーを立てることができるので、今回はそのやり方を紹介したいと思います。

1. 実行したいファイルがあるフォルダをエクスプローラーで開く

前回の記事で作成した hoge フォルダを開きます。

2. コマンドプロンプトを起動する

アドレスバーに cmd と入力し、Enter キーを押します。

すると、カレントディレクトリが hoge フォルダになった状態でコマンドプロンプトが起動します。

※コマンドプロンプトの使い方に慣れている方はスタートメニューから起動して cd コマンドで該当のフォルダに移動しても良いです。

3. Web サーバーを立ち上げる

コマンドプロンプトに

python -m http.server 8000

と入力して Enter キーを押して下さい。

コマンドプロンプトがこのような表示になればOKです。

※今回入力したコマンドは Python3系用のものです。Python2系では

python -m SimpleHTTPServer 8000

になるので注意して下さい。

4. ブラウザで Web サーバーにアクセスする

Chrome などのブラウザを開き、

http://localhost:8000/

にアクセスして下さい。

前回作成した html ファイルや js ファイルが見えていればOKです。

5. html ファイルを開く

fuga_1.html か fuga_2.html どちらか好きな方のリンクをクリックして開いて下さい。

前回同様、回転する立方体が表示されればOKです。

6. Web サーバーを停止する

Web サーバーを停止するときは、コマンドプロンプト上で Ctrl + c を押して下さい。

このようにコマンドが入力可能な状態になればOKです。

まとめ

Python でローカルに Web サーバーを立てて Three.js のサンプルを動かしてみました。

本格的な Web サーバーを立てなくても、ローカルだけで Three.js の動作を検証する環境がさくっと作れるのでとても便利ですね。

次回以降はこのやり方でいろいろ動かしていきたいと思います。