npmを用いてthree.jsの環境開発構築をする方法をご紹介

今回は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】を入力 

※この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からやり直してみてください。

目次