【three.js】three.jsで学ぶ3Dの初歩知識【3Dプログラミング】

会社の研修で初めて本格的に3D関連の知識を学びました。

そこで使ったのが「three.js」。

今回は、3D周りどこでも共通するという、基本概念をまとめておきたいと思います。

完全に備忘録ですので読み物としては向いてないと思います。

私自身完全に初心者ですよぉ！

3Dを構成する4つの要素

まず3Dを構成する4つ概念を以下にまとめておきます。

• シーン
• カメラ
• ライト
• メッシュ

これらについて、それぞれ説明していきます。

シーン

現実世界に置き換えれば、「舞台」ですね。

シーンの上にオブジェクトがのって、動いたり、照らされたりするわけです。

シーンごと回転などもさせることができるため、例えば、シーンに乗っかっているオブジェクトごとまとめて回転なんかもできるわけです。

カメラ

読んで字のごとく「カメラ」です。

3次元ですので「ある物体をどの位置からどの方向にみるか」というのを決めるものですね。

カメラが配置されていないと、物体をみることができませんよね。

「three.js」ではカメラの方向はデフォルトで決められていて、以下のようにlookAt関数を用いることで明示的に指定することが可能です。

camera.lookAt(new THREE.Vector3(1, -2, 0));

講師の方がよくあるミスとして挙げられていたのが「物体の中にカメラを配置してしまう」というもの。配置したオブジェクトの中にカメラを配置すると何も見えない状態となってしまうため、初心者はやりがちなようです。

ライト

そのまま「照明」ですね。

配置したオブジェクトは、「基本的に」照明に照らされないと見えないです。

光源としてどこかに配置する必要があります。

一口にライトといってもたくさんの種類があって、その用途ごとに色々使い分けるそうです。ただ計算量の違いも大きいので、ゲームに向いているものであったり、より自然に近いけれど、一枚絵などの激しい動作を必要としないものにしか使えないものまであるそうです。

メッシュ

そのまま日本語訳すると、網とかになりますが、要は３D空間に配置する「物体」のこと。

後述する「マテリアル」と「ジオメトリ」の入れ物となります。一つのメッシュにはそれぞれ一つずつマテリアルとジオメトリが存在することになりますね。

Wikipediaによるとこんな感じ。

ポリゴンメッシュ (polygon mesh) または非構造格子 (en:unstructured grid) とは、3次元コンピュータグラフィックスとソリッドモデリングの多面体オブジェクトの形状を定義する頂点、辺、面の集合のこと

出典:[https://ja.wikipedia.org/wiki/%E3%83%9D%E3%83%AA%E3%82%B4%E3%83%B3%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5]

「three.js」を使う上ではあまり気にしなくて良いようなのですが、結局全ては行列で管理されているので、頂点、辺、面の集合を持ってオブジェクトを形成しているといった形でしょうか。

これら全ては「Object3D型」を継承しており、様々なプロパティをセットできます。

代表的なのが以下の5つ。

• 位置
• 大きさ
• 回転
• 表示/非表示
• 行列

マテリアルとジオメトリ

メッシュの中には以下の2つの要素が存在します。

• マテリアル(Material)
• ジオメトリ(Geometry)

では、それぞれ説明していきます。

マテリアル(Material)

簡単にいうと、マテリアルは物の「質感」を決めます。３D上での意味としては「素材」が近いらしい。色とかもここで指定できるっぽい。

例えば、影がつかないような光を考慮しないマテリアルであれば、以下のように「MeshBasicMaterial」を用います。

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

色を指定していて、0×00ff00なので緑色になるようにしていますね。

(00:R ff:G 00:Bで表現される色)

例えば、光の反射などの自然に近い物理表現を再現したい場合は、以下のように「MeshStandardMaterial」を用います。

var material2 = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5 });

マテリアルもたくさん種類があって、用途によって使い分けるようです。

また、マテリアルのみを使いまわすことも可能で、他のメッシュを同じようなマテリアルにすることも可能なようです。

ゲームで例えると、「ガンダムVSシリーズ」なんかは同キャラクターでも、敵機は見た目が変わる訳ではないので、同じマテリアルを使っている、と言えます。

ジオメトリ(Geometry)

簡単にいうと「形状」のこと。3Dでの形状とは「三角形で作られる平面を組み合わせて」表現されるものです。

先述したポリゴンメッシュのWikipediaの引用では「頂点、辺、面」の集合と書かれていましたが、ジオメトリでは三角形を構成する「頂点」と「頂点を結ぶ順番」を定めます。

頂点は「vertex」、頂点を結ぶ順番は「(vertex)index」と呼ばれています。

ゲームで例えると、例えばスマブラのような格闘ゲームでは、1P、2Pで同キャラを使うと色だけが変わったりすると思います。このような場合は、同じ「ジオメトリ」を使っていて、「マテリアル」が違うという感じなんですね。

(最近は装飾がついて明確に変わっていたりしますが)

ポリゴンについて

3Dのキャラクターモデルを見るとき「このキャラクターは何ポリゴンでできている」みたいなこと言いますよね。

このポリゴンというのが、先述した「三角形」なんですね。三角形は面を形成できる最小の図形です。この三角形を組み合わせて、3Dモデルを表現する訳です。

つまり「kポリゴンでできている」という表現をすると、そのモデルはk個の三角形から形成されていると言えるのです。

・

・

・

みらいちゃんは何ポリゴンでできてるのかな〜〜〜🌈

© T-ARTS / syn Sophia / テレビ東京 / PCH3製作委員会

さいごに

まとめます。

3Dを構成する4つ要素は以下の通りです。

• シーン(舞台)
• カメラ
• ライト(照明)
• メッシュ(物体)

メッシュは素材を司る「マテリアル」と形状を司る「ジオメトリ」からなります。

「three.js」で学んだので、それメインでお話ししましたが、これらの概念は「Unity」や「brender」など他の3Dを扱うソフト等でも同様なようです。

覚えておいて損はないですね。

 回転についてはこちら

eveydayanime-9rakura.hatenablog.com