Three.jsでジオメトリを頂点で表示してみる(three.pointsを作成）

こんにちは！

Three.jsが楽しすぎて色々勉強しているdynaです！！

今回は、 Three.jsでThree.Pointsを使ってジオメトリを頂点で表してみました！

デモはこちら↓　

マウスを動かすと、いろんな方向から見えるので試してみて下さい（＾＾）

See the Pen 立体的な頂点 by dyna (@sakudyna) on CodePen.

※今までの内容はこちら↓

Three.jsの使い方を勉強してみた導入から表示まで

「初めてのThree.js」を使い、学習した記録です。シーン、カメラ、レンダラーメッシュ、ジオメトリとマテリアルなど入門編です。

光源の設定　Three.jsの使い方を勉強してみた

この記事はThree.jsで光源を設定してみた記事です。マテリアルの種類で光源が反映されず、ちょっとハマりました・・・

Three.jsでパーティクルを作ってみる

three.jsでパーティクルを作ってみました。

three.js関連の記事はこちらのカテゴリーにあります！

では、記録です～

1. 考え方

考え方

今回の考え方は、

1、ジオメトリにthree.pointsで頂点を作り

2、そのポイント1つ1つにcanvasで描画したものを使う

という形です。

もろもろの応用ね！！

まずは頂点表示に使う、以下の丸をcanvasで作成します。

抜粋したコードはこちら↓


 //canvasにテクスチャを作成
  function generate() {
        
    //canvasで小さい丸の作成
     const canvas = document.createElement('canvas');
     canvas.width = 16;
     canvas.height = 16;

     const context = canvas.getContext('2d');
     const gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
     gradient.addColorStop(0, 'rgba(255,255,255,1)');
     gradient.addColorStop(0.1, 'rgba(170,248,255,0.3)');
     gradient.addColorStop(0.2, 'rgba(0,37,97,1)');
     gradient.addColorStop(1, 'rgba(0,0,0,1)');
          
     context.fillStyle = gradient;
     context.fillRect(0, 0, canvas.width, canvas.height);

     const texture = new THREE.Texture(canvas);
     texture.needsUpdate = true;
     return texture;

  }

//canvasにテクスチャを作成

function generate() {

//canvasで小さい丸の作成

const canvas = document.createElement('canvas');

canvas.width = 16;

canvas.height = 16;

const context = canvas.getContext('2d');

const gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);

gradient.addColorStop(0, 'rgba(255,255,255,1)');

gradient.addColorStop(0.1, 'rgba(170,248,255,0.3)');

gradient.addColorStop(0.2, 'rgba(0,37,97,1)');

gradient.addColorStop(1, 'rgba(0,0,0,1)');

context.fillStyle = gradient;

context.fillRect(0, 0, canvas.width, canvas.height);

const texture = new THREE.Texture(canvas);

texture.needsUpdate = true;

return texture;

}

グラデーションについては、 addColorStop(offset, color) を使用しています。

参考はこちら↓

http://www.htmq.com/canvas/addColorStop.shtml

次に頂点を作成します

先ほど作成した丸を頂点に当てはめて使用します。

そのコートがこちら↓


 //ジオメトリの頂点の作成
  function createPoints(geom) {
    const material = new THREE.PointsMaterial({
    　　　color: 0xffffff,
          size: 3,
          transparent: true,
          blending: THREE.AdditiveBlending,
          map: generate(),//canvasをmapで渡す
          depthWrite: false
       });

      const cloud = new THREE.Points(geom, material);
      return cloud;
  }

//ジオメトリの頂点の作成

function createPoints(geom) {

const material = new THREE.PointsMaterial({

　　　color: 0xffffff,

size: 3,

transparent: true,

blending: THREE.AdditiveBlending,

map: generate(),//canvasをmapで渡す

depthWrite: false

});

const cloud = new THREE.Points(geom, material);

return cloud;

}

THREE.Pointsで頂点を作成しますが、マテリアル部分のTHREE.PointsMaterialに

mapとして、先ほど描画したものを指定しておきます。

THREE.PointsMaterialに関してはこちらを参考にしました。

https://threejs.org/docs/#api/en/materials/PointsMaterial.map

ジオメトリ・マテリアルを設定して、シーンに追加します

ここまで来たら、通常のThree.jsと同じように、ジオメトリの設定、マテリアルを設定して表示させます。　

コードはこちら↓


 　//ジオメトリの作成
   const geom = new THREE.TorusKnotGeometry(20, 6.9, 260, 11, 6, 3);
  //マテリアルの作成
   const knot = createPoints(geom);
   scene.add(knot);

　//ジオメトリの作成