ADVENT CALENDAR 2019

VSCodeでthree.jsを書きたい

By やまの

アドベントカレンダー2019 JavaScript three.js

これは AmusementCreators 2019 アドベントカレンダー その 2 の 20 日目の記事です。 その 1 もあります。

はじめに

3Dコンテンツを作成したいと思ったことはありませんか？ありますよね。一度は憧れることかと思います。
今回は、JavaScriptライブラリの1つであるthree.jsを紹介します。
こちらはweb上で3Dコンテンツを動かすことができるものとなっています。 通常であればwebGLと呼ばれる技術でJavaScriptとGLSLコードをゴニョゴニョ書く必要があるのですが、three.jsであればJavaScriptを書くだけで実現できます。 こういった技術系(?)の記事は初めて書くので、至らない点があったら教えていただけると幸いです。 内容的に間違っている部分があるかもしれないので、もしあればこちらも指摘していただけたらと思います。

実行環境

  • MacOS Catalina 10.15.1
    もちろんWindowsでもthree.jsは書いて動かせます。
  • visual studio code
    みんな大好きなエディター。こちら からインストールしてください。

準備編

three.jsのダウンロード

まずはthree.js公式サイトからライブラリをダウンロードしましょう。githubから入手していただいても構いません。
three

npmの準備

npmというNode.jsをインストールすると使用できるようになるパッケージマネージャーです。 まだインストールしていない方は、こちらを参考にNode.jsをインストールしておいてください。

作業用フォルダの準備

ダウンロードしたthree.js-master.zipを解凍します。その後three.js-master/build/three.jsを自分の作業用フォルダにコピーしてください。
three
次は編集用のHTMLファイルとしてindex.jsを、以下のコードを記述して作業用フォルダに作成してください。

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8" />
         <!-- three.jsを読み込む -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
         <!-- index.jsを読み込む -->
         <script src="index.js"></script>
     </head>
     <body>
         <canvas id="myCanvas"></canvas>
     </body>
 </html>

次に編集用のJavaScriptファイルとしてindex.js(好きな名前でも良いです)を、以下のコードを記述して作業用フォルダに作成してください。

 window.addEventListener("load", init);

 function init() {
 // ここに処理を追加していきます
 }

これで最低限の準備が整いました。

three.jsのコード補完

よし、これで早速コードを書くぞ！と実際書き始めると1つ気になることがあります。
コード補完が効かない
せっかくなら補完が効いてる環境でストレスなく作業したいですよね。
ということで、ディレクトリを作業用フォルダにして、以下のコマンドをターミナルに打ち込んで実行してください。

npm i -S three

こうすることでthree.jsのモジュールをインストールすることができ、作業用フォルダにnode_modules/threeというフォルダとpackage-lock.jsonというファイルが生成されているはずです。
これで補完が効くようになったはずです。

VSCodeの拡張機能

vscodeでJavaScriptを記述する際の拡張機能はこちらを参考に、お好みで設定してみてください。

またコードを変えた時にリアルタイムに変更を反映することが出来たら嬉しいですよね。そのためにLive Serverを追加してみてください。
使い方は、VSCodeのサイドバーからhtmlファイルを右クリックしてOpen with Live Serverを選択してください。そうすると自動でブラウザに新規タブが開きます。これでファイルを保存するたびにリアルタイムで変更が反映されます。
three

実践編

実際に描画してみよう

さぁ今度こそ実際にコードを書いてweb上に描画してみましょう。

と色々書こうと思いましたが、チュートリアルとしてはこちらのサイトの「コードを書いてみよう！」以降を参考にやってみてください。 (内容的に特に補足できることがないのです…)

最後に

この記事を書きたくなったのは、three.jsを紹介したかったのと、コード補完ができるまでをまとめておきたかったからです。
時間なくて細かい説明が出来てなくて申し訳ないです…落ち着いたら追記していこうと思います。やってみればわかりますが、生のwebGLをいきなり書いていくよりは取っつきやすいと思います。
three.jsを使うとVRコンテンツの実装も出来たり、ゲーム制作も出来ます。是非触ってみてください。

参考にしたサイト

SHARE THIS POST