Three.jsで頂点座標を指定して三角形を描く
以前、「WebGLを使って三角形を描画する為の基礎知識」の記事をかきましたが、WebGLのラッパーライブラリであるTHREE.jsでも同じようなことができるのでメモしておきます。
当然ですが、ナマのWebGLを触るよりより簡単に書けるようになっています。
Three.jsで三角形のポリゴンを書く方法
考え方的にはWebGLと同じです。 頂点データと、頂点のインデックスデータを定義してジオメトリを作ります。
頂点データはnew THREE.Vector3(x, y, z)
で作ります。 インテックスデータはnew THREE.Face3(0, 1, 2)
で作ります。
let vertices = [ new THREE.Vector3(0, 1, 0), new THREE.Vector3(-1, -1, 0), new THREE.Vector3(1, -1, 0) ]; let faces = [ new THREE.Face3(0, 1, 2) ]; let geometry = new THREE.Geometry(); geometry.vertices = vertices; geometry.faces = faces; geometry.computeFaceNormals();
See the Pen XgNKNM by nogson (@satofaction) on CodePen.
geometry.computeFaceNormals();
この関数は、作成したジオメトリに対して、法線ベクトルを計算してくれます。法線ベクトルは簡単にいうと面の向いている方向です。
面の表裏
Three.jsでも、WebGL同様頂点の結ぶ順番で表裏が変わります。 反時計周りで表面、時計回りで裏面を描画だと思うのですが、ここはあまり自信がないです。
そこでFaceNormalsHelperヘルパーを使用します。 FaceNormalsHelperを使用すると法線を可視化するこができるので、麺の向きがわかります。
FaceNormalsHelperヘルパーの使い方
他のヘルパー同様、インスタンスを作ってsceneにaddするだけです。
/** THREE.FaceNormalsHelper( 法線を表示するオブジェクト, 法線の長さ, 法線の色, 法線の太さ ); **/ var helper = new THREE.FaceNormalsHelper(cube, 3, 0xffff00, 1); scene.add(helper);
まとめ
Three.jsを利用するとGLSLを書く必要がなく、JSだけで完結する為わかりやすいです。 ただし、ナマのWebGLの記述も合わせて覚えていると、なぜ頂点データとインデックスデータを渡す必要があるかの理解が早いです。