HOME > natural science Laboratory > コンピュータ・シミュレーション講座 > WebGL

three.js勉強日誌 【No2】
形はどのように生成されるのか2

文責:高橋 佑生 (2014年9月19日) カテゴリ:WebGL(39)

2014年9月18日 NO.2

基本図形その2。点とくれば線ですね。 では、Three.jsで線を表すことを考えてみましょう。

さて、そもそも線とは、どのようなものでしょうか? 線とは幅のない長さをもつ図形と定義されます。 線を表すとはいっても、数学で定義される線すべてを表すことはできません。 数学の指すところの線の分類は次に示します。
・曲がっている線である曲線 ・どこまでも限りなく伸びていて、ある二点を最短距離を結んでいる線である直線
・片方は端が存在してもう片方はどこまでも伸びて、二点を最短距離を結んでいる線である半直線
・両端があり、ある二点を最短距離を結んでいる線を線分
と定義されます。 実はThree.jsでは、線分しか表せません。 スプライン補間によって擬似的に曲線を表すテクニックも存在するのですが。(また、今度ブログに書きます。) 線分は端の二点を決めれば、二点をつなぐことにより線分を結ぶことができます。 すなわち、線分を表すためには始点と終点の情報が必要になってきます。 では、線を書いてみるとします。

また、通る点を指定することができます。通る点をつないでいくことによって曲がった線分など表すことができる。 では、その例として前回描画した点を通るように線を加えてみる。 これは一筆書きでつないだものになる。

var geometry = new THREE.Geometry();
geometry.vertices[0] = new THREE.Vector3(0,0,0);
geometry.vertices[1] = new THREE.Vector3(3,0,0);
geometry.vertices[2] = new THREE.Vector3(3,3,0);
geometry.vertices[3] = new THREE.Vector3(0,3,0);
geometry.vertices[4] = new THREE.Vector3(0,0,3);
geometry.vertices[5] = new THREE.Vector3(0,3,3);
geometry.vertices[6] = new THREE.Vector3(3,3,3);
geometry.vertices[7] = new THREE.Vector3(3,0,3);


var material = new THREE.ParticleBasicMaterial({color:0x000000,size:1.0 ,vertexColors:true});
particle = new THREE.ParticleSystem(geometry,material);
scene.add(particle);

//ここまでで点が生成

var material2 = new THREE.LineBasicMaterial({color:0x000000,linewidth:5}) ;
var geometry2 = new THREE.Geometry();
geometry2.vertices[0] = new THREE.Vector3(0,0,0);
geometry2.vertices[1] = new THREE.Vector3(3,0,0);
geometry2.vertices[2] = new THREE.Vector3(3,3,0);
geometry2.vertices[3] = new THREE.Vector3(0,3,0);
geometry2.vertices[4] = new THREE.Vector3(0,0,0);
geometry2.vertices[5] = new THREE.Vector3(0,0,3);
geometry2.vertices[6] = new THREE.Vector3(3,0,3);
geometry2.vertices[7] = new THREE.Vector3(3,3,3);
geometry2.vertices[8] = new THREE.Vector3(0,3,3);
geometry2.vertices[9] = new THREE.Vector3(0,0,3);
geometry2.vertices[10] = new THREE.Vector3(3,0,3);
geometry2.vertices[11] = new THREE.Vector3(3,0,0);
geometry2.vertices[12] = new THREE.Vector3(3,0,3);
geometry2.vertices[13] = new THREE.Vector3(3,3,3);
geometry2.vertices[14] = new THREE.Vector3(3,3,0);
geometry2.vertices[15] = new THREE.Vector3(3,3,3);
geometry2.vertices[16] = new THREE.Vector3(0,3,3);
geometry2.vertices[17] = new THREE.Vector3(0,3,0);

lines = new THREE.Line(geometry2,material2);
scene.add(lines);

一筆書きで書くために往復をして、立方体を描画した。 私は点の頂点データを直接線の始点と終点のデータとして取り扱おうと考えたが、geometryを共有してつかおうととすると点しか表示されない問題が発生しました。 これについて今後オブジェクト周辺の勉強を見直したいとおもいます。

今日の懺悔

今回の記事で書きましたが、直線と曲線の包括関係は曲線の一部に直線が含まれるという関係なのですが、直線の一部に曲線が含まれると誤解していました。 基礎がわかっているつもりでも、基礎の根本を理解していないとその基礎は揺らいでしまいます。



▲このページのトップNPO法人 natural science トップ

▲このページのトップNPO法人 natural science トップ