Three.jsの使い方を勉強してみた 導入から表示まで

Three.jsの使い方を勉強してみた 導入から表示まで

こんにちは!

この記事は、 「初めてのThree.js」を使い、学習した記録です! 

 


初めの成果物はこちら↓

See the Pen 初めてのThree.js学習① by dyna (@sakudyna) on CodePen.


初めてのThree.js 書籍はこちら↓

初めてのThree.js 第2版 WebGLのためのJavaScript 3Dライブラリ [ Jos Dirksen ]

価格:4,400円
(2021/7/13 06:56時点)

では、一番初めの入門のところから!!

広告

 

Three.jsのDL

まずはThree.jsのライブラリをDLします。(※three.jsはJavaScript製のライブラリです)

まずは公式サイトへ。


左側のdownloadをクリックします。


ダウンロードできたら、zipを開いて、buildの中の「three.js」または「three.min.js」を自分のHTMLを作成しているフォルダに配置します。

あとは通常のように読み込みます。

学習なので、ソースが分かりやすいthree.jsを使用します。

 

three.min.jsはミニファイルバージョンで、4分の1の大きさらしい・・・!

 

サンプルコードをもとに作ってみる

この記事ではcodepenのコードをもとに書いているので、JSの読み込みを

として使っています。

 


three.jsで3Dを表示する考え方
1.HTMLに描画する場所を設定する
2.three.jsを読み込み、描画する
3.描画の仕方は、
シーン(空間)に、メッシュ(表示物)(ジオメトリ(形)とマテリアル(素材)で作る)を置き、カメラを通して、レンダラーを使ってHTMLのcanvasに表示する

 

聞いたことない単語がいっぱい( ^ω^)・・・

 

この後の項目で確認していきます。

まずは、全体のコードでどう作るか見ていきます。

描画する場所を作成

まず、HTMLに描画する場所を作成します。

outputに書き出します。

 

処理を書いていく

function init(){~ この中にthree.jsの処理を書いていきます。

 

用語

 

結構専門的な用語が出てきて???となったので、簡単に記録しておきます(;’∀’)

 

シーン(scene)表示したいすべての物体・光源を保持して、変更を監視するコンテナオブジェクト
カメラ(camera)シーンを描画するときに、何が見えるか決定するオブジェクト
レンダラー(renderer)カメラの角度に基づいてシーンがどのように見えるか計算する
シーンをcanvasへ描画する
メッシュ(Mesh)ジオメトリ(形)とマテリアル(素材)で作成されるオブジェクト。
オブジェクトの見た目を設定する。

 

シーンを作成する

シーンは上記でいう、表示したいすべての物体・光源を保持して、変更を監視するコンテナオブジェクトでした。

 


カメラを作成する

カメラは上記でいう、シーンを描画するときに、何が見えるか決定するオブジェクトでした。

 


レンダラーを作成する

レンダラーは、カメラの角度に基づいてシーンがどのように見えるか計算し、シーンをcanvasへ描画します。

ここで、背景色、シーンの大きさ、スマホでもきれいに見えるように設定をしておきます。

  


平面を作る

まず、デモの灰色の四角部分、平面を作成してみます。

形を作って表示させるには、ジオメトリ(形)+マテリアル(素材)でメッシュ(見た目)を作って表示します。

ジオメトリ(形)を設定します。

※ジオメトリの種類は色々ありますが、ここでは平面の THREE.PlaneGeometry を使用します。

 

種類が気になるので、その辺は調べて詳しく書きたいと思います。
このサイトも参考になりました。
https://ics.media/tutorial-three/geometry_general/

 

マテリアル(素材)を設定します。

※マテリアルの種類も同じく色々あります。

 

メッシュ(見た目)に先ほどのジオメトリとマテリアルを設定します。

 

平面(メッシュ)を設置します。

 

シーンに平面(メッシュ)を追加します。

 

球を作成する

平面と同じように、球を作成します。

基本的には、先ほど平面の作り方と一緒です。

ここでは、マテリアルをワイヤーフレームにしてあります。

 

カメラの位置を設定する

カメラの位置を設定します。

 

HTMLにレンダラーを追加して出力する

HTMLの表示したい部分にレンダラーを追加します。

 

次に、レンダラーを使って表示させます。

 

レンダラーって、プログラムを使って、整形して表示することらしい( ^ω^)・・・

 

ここで初めて表示されます。

 この他に光源など設定がありますが、そこは次回の記事にしたいと思います。 

 

 

ここまで来て、初めて表示されるんですね・・・・!!!!

初見は難しく感じましたが、なんとなく感覚が分かったような・・・・??

 

引き続き学習していきたいと思います!!

学習した本はこちら↓

  

 

three.jsって、楽しい!!!!ヽ(*゚∀゚)ノ

  

<あわせて読みたい>


CSSだけでボックスを書いてみた記事はこちら↓

 

ここまで読んで下さりありがとうございます。