今回は3DのWEBサイトデザインなどを作れるthree.jsをnpmを用いて開発環境構築する方法をご紹介します。
npmを使わず公式のthree.jsから必要なファイルをダウンロードして読み込むパターンなどもあるのですが、htmlファイルに読み込む為に必要なscriptタグを複数書くことになったり、consoleにエラーが発生したりする場合もあるので、実践で使用する場合はnpmでのthree.js導入をオススメします。
three.jsの導入手順
Node.jsのダウンロード
今回はViteを利用する為、Node.jsのインストールが必要です。
Node.jsのインストールはこちらの記事を参考にしてくださいませ。
npmを利用したインストール
まずはViteプロジェクトを生成します。
ここからは、Visual Studio Code（vscode）を用いてご説明していきます。
vscodeに空のフォルダを読み込みます。
今回はthree.jsというフォルダを作りvscodeに入れてみました。そして、ターミナルを開いてください。
ターミナルをひらくと、【yarn create vite three-new】というyarnコマンドでviteを入れていきます。
※yarnコマンドが使えない場合は、別途yarnをインストールする必要があります。
Yarnのダウンロードの仕方は、「yarn ダウンロードの仕方」などで検索してみてください。
【yarn create vite three-new】を入力
入力が完了すると下の画像のような状態になります。
Vanillaを選択している状態でenterを押します。
JavaScriptを選択している状態でenterを押します。
そうすると下記の画像のように、index.htmlやらいろいろなフォルダやファイルが生成されます。
ターミナルに【cd 作成したフォルダ名】で、その階層に一旦移動もしておきます。
この中から、package.jsonを開きます。
今度は、ターミナルでnpmを利用して、ここにthree.jpの必要なファイルたちを入れていきます。
さらに続きでターミナルに【npm i three】と入力してenterを押します。
そうすると、package.jsonにthreeの情報が入ったことが確認できます。
これでthree.jsに必要なフォルダやファイルは全てインストールされました。
ちなみフォルダやファイルはnode_modulesの中にthreeというフォルダがあり、その中に入っています。
例えば、自動生成されたmain.jsでthree.jsを構築していく場合は、元々main.jsに記述してある内容は削除して、
【import * as THREE from “three”;】と入力することで、threeフォルダの全てを読み込めます。
three.jsをローカルで見たい場合
このパターンで入れると、index.htmlでLive Serverの拡張機能を使用してのローカル立ち上げはできません。
その為、ターミナルに【npm install】と入力。
そして、【npm run dev】と入力するとOK
すると、ローカルのURLも確認できるかと思います。
以上でThree.jsの開発環境構築は終了です。
ちなみに、一度vscodeを閉じて、また再開する際に同様のnpm run devでローカルが立ち上がらずエラーが出るようであれば、一度【package-lock.json】のフォルダを削除してから、改めて npm installからやり直してみてください。
当記事に対してのコメントをご記載くださいませ！
いただいたコメントは運営者で確認・承認後に反映いたします。誹謗中傷に繋がるような内容・その他不適切な内容と運営者の方で判断したコメントは削除させていただきます。