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);

Kobito.zJg6cu.png