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

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

こんにちは!

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

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

デモはこちら↓ 

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

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


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

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

 

では、記録です~

考え方

今回の考え方は、

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

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

という形です。


もろもろの応用ね!!


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

 

頂点画像

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

 

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

参考はこちら↓

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

 

次に頂点を作成します

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

そのコートがこちら↓


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

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

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

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


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

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

コードはこちら↓


ジオメトリはトーラス(巻き巻き)型、
マテリアルはさっき作成した関数(頂点作成)を使用ね


こんな感じで、デモのように表示できました!!

今回学習した本はこちら↓

初めてのThree.js 第2版 WebGLのためのJavaScript 3Dライブラリ [ Jos Dirksen ]

価格:4,400円
(2021/7/21 17:44時点)

ここまで読んで下さりありがとうございます。

<あわせて読みたい>