B3Sロゴ
menu close

Javascript

Three.jsを使って3D製品ページを作成してみよう


なみちゃん

更新日:2021/11/01


最近私は、three.js開発にドハマリしており、今はthree.jsを使ってvr、AR、MR(これは苦戦しそう)に挑戦しています。
今回はwebpackを利用してThree.js開発をしてみたので、webpackの概要と利用手順を紹介しつつ、
実際の作品を紹介したいと思います。

目次

サンプル

Three.jsとは?

Three.js は、できるだけ簡単にWebページ上に3Dコンテンツを表示する3Dライブラリです。
詳細は@【こちら

Webpackとは?


webpackとはモジュールバンドラーのことを言います。

モジュールバンドラーとは
複数モジュールを依存関係を解決して1つにまとめるものでこの1つのまとめることを
バンドリングすると言います

モジュールとは、
それ単体で使うというより、組み合わせて個々のプログラムのこと

バンドラーとは、
Javascript、CSS、HTML、画像、TypeScript、Styls、その他の言語などのアセットを送信するサーバーツールで、
バンドラーはこれらのアセットを処理し、潜在的な変更を適応し、HTML、CSS、画像、JavascriptなどのWEB対応ファイルで構成されている「バンドル」を出力します。

Three.js × webpack


今回は、three.jsをwebpackを使って実現しました。
Three.jsは、過去の記事にあたようにthree.jsを読み込む方法も可能ですが、
メッシュを作ったり、シェーダーを書いたりするためには準備しなければいけないものが多いため、jsを読み込む量がかなり増えます。
たとえばまずThreejsを読み込んで
①カメラとレンダラーとシーンを用意してステージを作成
②ジオメトリーとマテリアルからメッシュを作成してシーンに追加
③リクエストアニメーションフレームでループを回しメッシュを描画
といった複雑に組み合わさってできています。

さらにOrbitControlsでカメラを動かしたり、dat.guiで数値もぐりぐり動かしたい。
シェーダーは別ファイルから読み込めるようして可読性を担保したいし、
アニメーションにGSAP(ジーサップ)をつかいたい
など3Dを描画する以外にも追加したい機能が多くjavascriptの読み込む量が多いです。

複数のjavascriptを読み込むと、javascriptの読み込む順番が必要になってきたり、を読み込まなくてはならず大変です。
そのようなときにwebpackを使うことで複数のjavascriptをちょうどいい感じに1つにまとめてくれて、javascriptを読み込んでくれるので、扱いやすくなります。
(※ただ、1つにまとめることで重くもなりやすいので注意が必要です。)
さらにcssとjsのビルドもしてリントも通したいなども可能です。
そのためthree.js開発には、最適で、webpackは多くのこと解決してくれます。

webpackの環境とインストール方法

バージョン


実装前に、node.js と webpack、three.jsのバージョンはそれぞれ確認する必要があります。
バージョンによっては、互換性がなかったり、書き方が変わったりするので、確認してください。
私はこの沼にハマりました。。。

フォルダ構造

package-lock.jsonが必要な理由

npm installを実行した際にインストールされるパッケージのバージョンをpackage-lock.jsonに記載されたバージョンで固定することができ、全ての開発者で同じパッケージの環境を再現することができます。一方、package.jsonだけしかない場合では、npm installしたときに、それぞれの開発者で別バージョンのパッケージをインストールしてしまう可能性があります。

package.jsonが必要な理由

このドキュメントで説明されている動作の多くは、webpackのバージョンの構成設定を管理しており、影響を受けます
パッケージを公開する場合、package.jsonで最も重要なのは、必要に応じて名前とバージョンのフィールドです。名前とバージョンが一緒になって、完全に一意であると見なされる識別子を形成します。パッケージへの変更は、バージョンへの変更と一緒に行う必要があります。パッケージを公開する予定がない場合、名前とバージョンのフィールドはオプションです。

インストール手順

1.Node.jsをインストール

こちらの公式サイトからバージョンを確認をして、インストーラーをダウンロードしてください。

2.コマンド(CMD)を立ち上げて、Node.jsのバージョンを確認をする(※macの場合はターミナル)

 

3.webpackを作成する

1.フォルダを作成をする
(※ファイル名をwebpackにしないでください(エラーが起きます)
2. Visual Studio codeのターミナルを開いてpackage.jsonを作成します

3.webpackの本体をインストール(package-lock.jsonとnode_modeulesが自動的にインストールされる)

4.index.jsとモジュールフォルダを作成

5.webpackでビルドして、modeを作成

6.buildとprodの環境を設定

7.package.json のscriptsに下記を追加します。

 

4.webpack.common.jsを作成

 

5.three.jsのパッケージをインストールする

1.three.jsパッケージをインストール

 

サンプルのつくりかた

こちらのthree.js公式サイトのサンプルを使用しています。(詳細はこちら
すべてのコードを掲載するわけではないですので、必要な箇所のみ記載しています
マテリアルやカメラの、ライトなどの入れ方は過去の記事に詳細が記載されていますのでご確認ください。

ポインタの作成

HTML(index.html)

 

CSS(style.css)

 

Javascript(script.js)

 

おわりに

three.jsをはじめて1ヶ月が経ちましたが、奥深いものでした。
もともとblenderを使ってモデリングを作成していましたので、それweb上で表現する方法を模索していました。
three.jsは、アニメーションを作成することもできるので、画像の埋め込みや動画の作成したmp4やpngをそのまま掲載するという方法はなかなか少なっていくのではないかと思いました。
私もthree.jsを使いはじめて動画編集ソフトでアニメーションを作成するのをやめてしまった一人です。
皆さんにも3Dモデルの作成やthree.jsの楽しさに一緒にハマりませんか??

参考サイト一覧

Three.js
https://threejs.org/
https://threejs.org/examples/#webgl_loader_gltf_variants
https://threejs-journey.com/
webpack
https://webpack.js.org/
npm
https://www.npmjs.com/
gsap
https://greensock.com/gsap/
node
https://nodejs.org/ja/