はじめに3Dコンテンツを作成したいと思ったことはありませんか?ありますよね。一度は憧れることかと思います。今回は、JavaScriptライブラリの1つであるthree.jsを紹介します。こちらはweb上で3Dコンテンツを動かすことができるものとなっています。通常であればwebGLと呼ばれる技術でJavaScriptとGLSLコードをゴニョゴニョ書く必要があるのですが、three.jsであればJavaScriptを書くだけで実現できます。いった技術系(?)の記事は初めて書くので、至らない点があったら教えていただけると幸いです。内容的に間違っている部分があるかもしれないので、もしあればこちらも指摘していただけたらと思います。10.15.1もちろんWindowsでもthree.jsは書いて動かせます。codeみんな大好きなエディター。インストールしてください。準備編three.jsのダウンロードまずはthree.js公式サイトからライブラリをダウンロードしましょう。githubから入手していただいても構いません。npmの準備npmというNode.jsをインストールすると使用できるようになるパッケージマネージャーです。インストールしていない方は、こちらを参考にNode.jsをインストールしておいてください。作業用フォルダの準備ダウンロードしたthree.js-master.zipを解凍します。その後three.js-master/build/three.jsを自分の作業用フォルダにコピーしてください。次は編集用のHTMLファイルとしてindex.jsを、以下のコードを記述して作業用フォルダに作成してください。</html>次に編集用のJavaScriptファイルとしてindex.js(好きな名前でも良いです)を、以下のコードを記述して作業用フォルダに作成してください。}これで最低限の準備が整いました。three.jsのコード補完よし、これで早速コードを書くぞ!と実際書き始めると1つ気になることがあります。コード補完が効かないせっかくなら補完が効いてる環境でストレスなく作業したいですよね。いうことで、ディレクトリを作業用フォルダにして、以下のコマンドをターミナルに打ち込んで実行してください。threeこうすることでthree.jsのモジュールをインストールすることができ、作業用フォルダにnode_modules/threeというフォルダとpackage-lock.jsonというファイルが生成されているはずです。これで補完が効くようになったはずです。VSCodeの拡張機能vscodeでJavaScriptを記述する際の拡張機能はこちらを参考に、お好みで設定してみてください。コードを変えた時にリアルタイムに変更を反映することが出来たら嬉しいですよね。Serverを追加してみてください。Serverを選択してください。すると自動でブラウザに新規タブが開きます。これでファイルを保存するたびにリアルタイムで変更が反映されます。実際に描画してみようさぁ今度こそ実際にコードを書いてweb上に描画してみましょう。書こうと思いましたが、チュートリアルとしてはこちらのサイトの「コードを書いてみよう!」以降を参考にやってみてください。(内容的に特に補足できることがないのです...)最後にこの記事を書きたくなったのは、three.jsを紹介したかったのと、コード補完ができるまでをまとめておきたかったからです。時間なくて細かい説明が出来てなくて申し訳ないです...落ち着いたら追記していこうと思います。やってみればわかりますが、生のwebGLをいきなり書いていくよりは取っつきやすいと思います。three.jsを使うとVRコンテンツの実装も出来たり、ゲーム制作も出来ます。