See the Pen Draw Lines by three.js by MasatomoFukuda (@chitomo12) on CodePen.

Three.jsには様々な立体物を作成するジオメトリがありますが、単なる線を引くLineオブジェクトのような奥行きのない要素はめったに使われていない印象があります。

本記事ではそんなLineオブジェクトを使った線の引き方と、Lineオブジェクトを活用したWebページ例を紹介します。

1. Lineオブジェクトの使い方

Line( geometry: Geometry, material: Material );

Lineオブジェクトに表面素材を指定するMaterialと、三次元ベクトルの頂点座標を与えたGeometryを渡すことで空間内に線を引くことができます。

lines.html

        (...省略...)
        // マテリアルを設定
        const line_material=new THREE.LineBasicMaterial({ color:0xffffff });
        // ジオメトリを作成
        var line_geometry=new THREE.Geometry();
        // ジオメトリに頂点座標を追加
        line_geometry.vertices.push(
            new THREE.Vector3(-100,0,0),
            new THREE.Vector3(0,100,0),
            new THREE.Vector3(100,0,0),
        );
        var newline=new THREE.Line(line_geometry, line_material);
        scene.add(newline);

        tick();
        function tick() {       
          // カメラを回転させる
          rot+=0.5;
          const radian=Math.PI/180*rot;
          camera.position.x=500*Math.sin(radian);
          camera.position.z=500*Math.cos(radian);
          camera.lookAt(0,0,0);

          // レンダリング
          renderer.render(scene, camera);
          requestAnimationFrame(tick);
        }
        (...省略...)

実行例

See the Pen
Draw Lines 01 by three.js by MasatomoFukuda (@chitomo12)
on CodePen.

より細かい情報は公式リファレンスをご参照に。
https://threejs.org/docs/#api/en/objects/Line

2. Lineを使ったWebページをつくる

では早速、Lineを活用した簡単なWebページを作っていきます。

まず、ただの線で印象深いグラフィックを作るにはどうすれば良いかを考えます。
兎にも角にもアイデア出しです。

ざっと思いついたのが次の３つの案です。

一本の線を動かしてみる
複数の線を配置して幾何形体を作る
ランダムに線を配置して複雑な形態を作る

今回は「3. ランダムに線を配置して複雑な形態を作る」のアイデアを採用しました。

まずは、先程作成した線のパラメータを乱数に置き換え、複数描画してみます。
線の描画部分を以下の通りに書き換えてください。

lines.html

        // 線のグループを作る
        var lines=new THREE.Group();
        const line_material=new THREE.LineBasicMaterial({ color:0xffffff });
        // for文でランダムな線（newline）を複数作る
        for(var i=0;i<10;i++){
          var line_geometry=new THREE.Geometry();
          line_geometry.vertices.push(
              new THREE.Vector3(-Math.random()*100, 0, 0),
              new THREE.Vector3(0, Math.random()*100, 0),
              new THREE.Vector3(Math.random()*100, 0, 0),
          );
          var newline=new THREE.Line(line_geometry,line_material);
          // newlineをグループに追加
          lines.add(newline);
        }
        // linesグループをシーンに追加
        scene.add(lines);

大きな変更点として、複数の線をまとめるためのグループを作成し、線の頂点を乱数に変更しました。
実行すると下図のようになります。

すでに良い感じに見えますが、少し物足りなさは感じるのでどうにかしたい。

ここはシンプルに情報量を増やしたいと思います。
具体的には頂点の数を増やし、さらにz座標のパラメータもいじることで奥行きもつくっていきます。

さきほどのfor文内に、頂点を追加するための行を追加します。

lines.html

        for(var i=0;i<10;i++){
          var line_geometry=new THREE.Geometry();
          line_geometry.vertices.push(
              new THREE.Vector3(-Math.random()*300,0,-Math.random()*300),
              new THREE.Vector3(0,Math.random()*300,-Math.random()*300),
              new THREE.Vector3(Math.random()*300,0,-Math.random()*300),
              new THREE.Vector3(Math.random()*300,0,-Math.random()*300),
              new THREE.Vector3(Math.random()*300,0,-Math.random()*300)
          );
          var newline=new THREE.Line(line_geometry,line_material);
          lines.add(newline);
        }

実行すると次のようになります

最初はただの線でしたが、ここまで来たら複雑な立体物を使いこなしている感が出てきたかと思います！

さて、今回作ろうとしているのはWebページのサンプルです。

今のままだと3D空間内を大きく移動するような迫力ある視覚経験はできると思いますが、ゲームではなくWebページなのでこれをもう少し落ち着いたUXにしたい。

カメラが大きく空間を動くのではなく、カメラは動かないままオブジェクトだけが回る、そういう空間を作ろうと思います。

lineオブジェクトの集合の中心が座標 (0,0,0) に来るようにし、ページ全体に線が均等に現れるように調整を加えます。
for文を次のように書き換えてください。

lines.html

        for(let i=0;i<20;i++){
          var line_geometry=new THREE.Geometry();
          line_geometry.vertices.push(
            new THREE.Vector3(0,0,0),
            new THREE.Vector3(Math.random()*400-200,Math.random()*400-200,Math.random()*400-200),
            new THREE.Vector3(Math.random()*400-200,Math.random()*400-200,Math.random()*400-200),
            new THREE.Vector3(Math.random()*400-200,Math.random()*400-200,Math.random()*400-200),
            new THREE.Vector3(Math.random()*800-400,Math.random()*400-200,Math.random()*800-400),
            new THREE.Vector3(Math.random()*800-400,Math.random()*400-200,Math.random()*800-400),
            new THREE.Vector3(Math.random()*400-200,Math.random()*4000-200,Math.random()*400-200)
          );
          var newline=new THREE.Line(line_geometry,line_material);
          lines.add(newline);
        }