three.js勉強日誌 【No2】
形はどのように生成されるのか2
線
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を共有してつかおうととすると点しか表示されない問題が発生しました。 これについて今後オブジェクト周辺の勉強を見直したいとおもいます。
