初心者向けthree.js入門：歴史、相関図を 備忘録として残します。（その1）

ドリルくん

3Dの画像をつくりたいな

えるつか

下の記事を読んでいくと流れが分かってくるよ

WebGLとThree.jsの関係

WebGLとは

CPU上で動くのではなく、GPU上で動くものである。
3Dグラフィックを簡単に扱えることのできるThree.jsというライブラリがある。

3Dモデルを作成しそれらに対しカメラを設置しライトを当てる、位置を変える、影を作る、色を付けるなど、3D空間にモデルを配置し動かすことが出来る。

Three.jsとは

WebGLを簡単に使用するためのJavaScriptライブラリおよびAPIである。

Three.jsを使わないで3Dグラフィックスを描写するには、Khronos Group(クロノス・グループ)が策定しているAPIのOpenGLがあります。

OpenGLはライブラリであり、デスクトップ上で3Dグラフィックスを描写し、C言語やC++を使いIntel(インテル)・NVIDIA(エヌビディア)・GeForce(ジーフォース)シリーズやAMDが開発・製造しているグラフィックボード(GPU)を活用して、高速な映像処理を実現しています。がこれが難しい、、、、

その後派生したのが、OpenGL ES

OpenGL ESは携帯などで3Dグラフィックスを描写するため用のAPIである。

その後派生したのが、WebGL

WebGLでありブラウザ上でOpenGLを動かすことを目的に作られたもので、JavaScriptでOpenGLを動かすことが出来るライブラリがThree.jsである。

公式サイトhttps://threejs.org/

Three.jsの使い方の流れ

図で説明

Mash(メッシュ)作成の流れ

Three.jsで何かの物体を作成する場合は、マテリアルとジオメトリというものからメッシュを作成します。

マテリアルとは、その物体の表面を何色にするのか、物体に画像を貼り付けたりする時などに操作し定義します。

ジオメトリとは、その物体がどのような形なのかを定義する時に使用します。形状としては、球体・立方体・平面などの色々な物体の形を作成できます。

メッシュとは、マテリアルで色を定義して、ジオメトリで物体の形を定義して、その二つを組み合わせるとどのような物体なのかを3D空間で定義できます。

Scene(シーン)作成の流れ

メッシュやライトをシーンに追加していきます。

シーンは3D空間だと想定して、3D空間上に色々なメッシュを配置することによって、3Dでどういった物がどこに何があるのかを定義できます。

そしてライトで3D空間を照らすことにより臨場感あふれる空間を作成することができます。

Renderer(レンダラー)作成の流れ

シーンとカメラをレンダラーに追加します。

レンダラーとは、HTMLのキャンバスにどういった物を描写するのかを定義するAPIですが、このレンダラーにシーンを追加することによってこの3D空間を描写したいですとThree.jsを通してWebGLに指示を出すことになります。

カメラとは、3D空間は定義できましたが、その3D空間をどの角度からブラウザ画面に表示するのか定義するために使用します。

カメラで3D空間のどこからブラウザ画面に映し出すのかを定義できたので、それがHTMLの<canvas></canvas>(キャンバスエレメント)に指示されることになります。

この様な流れでThree.jsを使用して、3Dグラフィクスを描写していきます。

まとめ

JavaScriptで「メッシュ」と「シーン」と「レンダラー」を作成していく流れ。

メッシュ＝「マテリアル」＋「ジオメトリ」
シーン＝「メッシュ」＋「ライト」
レンダラー＝「シーン」＋「カメラ」
HTMLファイル内の<canvas></canvas>にcodeを入れ描写していきます。

作成していく感想としては、複雑な見た目にしたくなるのでメッシュやシーンの数が増えてcodoがごちゃごちゃになりきれいにまとめるのが大変です、それがまた今までにない3Dグラフィクスを描写できるので、ワープロ時代の自分としてはとても楽しいです。

早く慣れてBlender(ブレンダー)を触っていきたい、、、

次回からThree.jsを使ってブラウザ上に3Dグラフィクスを描写していきまが、JavaScriptやPHPで使用する条件分岐・配列などを使っていくので、慣れていない方はまずそちらから勉強しましょう。

JavaScript　配列編

「配列の定義の仕方」や「コンソールログの使い方」について記述していきます、分かりそうで分からない曖昧な所をメモしていきます。配列には、「配列コンストラクタ」と「配列リテラル」があり、違いを見ていきましょう。配列コンストラクタ・配列リテラル配...

ldrill.com

PHP if文(条件分岐)の使い方

if文(条件分岐)は、色々な場面で使用するので初めての方は、どうしても分かりにくいと思います、慣れてくると何となく意味合いが腹に落ちると思います、それでは学習していきましょう。このブログで分かること・if文(条件分岐)の使い方を知りたい方。...

ldrill.com

条件分岐・配列など分かっている方は、次に進んでください。

学習に必要な準備

パソコン

パソコンが必要となります、自分はデスクトップパソコンを自作したのでこのようなスペックになります。

CPU　 AMD Ryzen 7 2700
GPU 　ASRock AMD Radeon RX580
マザーボード　ASRock X470 Master SLI
メモリー　CORSAIR 8GBx2
電源　オウルテック　80PLUS GOLD

興味のある方は自作パソコンはどうですか、とても愛着が湧いてきますよ。

テキストエディタ

HTMLのコーディングやプログラミングに使用します。

色々な無料テキストエディタがありますので、各自用意してください。

私はVisual Studio Code(ビジュアル・スタジオ・コード)を使用しています。