three.js勉強日誌 【No1】
形はどのように生成されるのか
ここ一年を懺悔したいと思います。自分はThree.jsを勉強始めて一年が経ちました。同時に小中学生にThree.jsの使い方を指導する講座を実施しました。というのがコンピュータ・グラフィックスと付き合い始めて一年の自分でした。
さて、何を懺悔したいのかというと、Three.jsの使い方は勉強したが、コンピュータ・グラフィックスについてなんにもわかっていなかったのである。 Three.jsにおいて様々なことがブラックボックスとして用意されて使われている。 このように世の中は便利になるにつれてブラックボックスであふれていき、対象を理解せずとも対象を扱えてなんとなくその対象を知っているように感じてしまう。例えば、携帯電話などがいい例であろう。どのようにして通信しているのかすらわからないのにも変わらず何の気なしにだれでも使えてしまう。 そんなブラックボックスが使えるだけの人間が果たして、その対象を教えていいのだろうか。 否。そうして自分はThree.jsを通してコンピュータ・グラフィックスについて勉強することを決心して、このブログを始めさせて頂きます。 内容としては、自分のきになったこと毎日一つ一つ勉強していきそれを当ブログに毎日掲載していきます。ときには突拍子も無いことを書くかもしれませんが暖かく見守っていてください。 では、まずThree.jsではプロパティに引数をとるだけで、簡単に生成される形についてブラックボックスをあけていくとしよう。
点について
点というのは、位置だけを持ち長さや面積体積をもたないという図形である。
それをThreee.jsで以下のように表現される。
three.jsの仕様ではどの角度から見ても点は正方形である。実際にこの正方形を動かして確認してみてほしい。 しかし、これはThree.jsならではのものである。 例えばコンピュータ・グラフィックスを扱うAPIであるWebGLではどんなに拡大したり縮小したりしても通常点は1ピクセルである。 Three.jsでは点の大きさまでも指定することができる。以下がコードである。
var geometry = new THREE.Geometry();
geometry.vertices[0] = new THREE.Vector3(0,0,0);//位置の指定
geometry.colors[0] = new THREE.Color(0x111111);//色の指定
var material = new THREE.ParticleBasicMaterial({color:0x111111,size:10.0 ,vertexColors:true});//材質の指定
particle = new THREE.ParticleSystem(geometry,material);//点の生成
注意点
vertices(日本語で頂点)は頂点座標配列であるので、１つしか点を打たない場合も配列として与える。 colorsも頂点色配列であるので、１つしか点を打たない場合も配列として与える。 点の色は材質のR値×頂点色配列のR値、材質のG値×頂点色配列のG値、材質のB値×頂点色配列のB値として決定される。
複数の点を打つ場合
複数の点を打ちたいときは、一個点がうてれば簡単であるが配列ひとつひとつに位置と色の値を代入していくことにより表現できる。 また複数の点で異なる色を代入したいときは、色の掛けあわせで色は決定される。積算で決定されるので材質のは白色である0xFFFFFFの値を代入するとよい。
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(0,3,0);
geometry.vertices[3] = new THREE.Vector3(3,3,0);
geometry.vertices[4] = new THREE.Vector3(0,0,3);
geometry.vertices[5] = new THREE.Vector3(0,0,3);
geometry.vertices[6] = new THREE.Vector3(3,0,3);
geometry.vertices[7] = new THREE.Vector3(3,3,3);
geometry.vertices[8] = new THREE.Vector3(0,3,3);
geometry.colors[0] = new THREE.Color(0x111111);
geometry.colors[1] = new THREE.Color(0x00FF00);
geometry.colors[2] = new THREE.Color(0xFF0000);
geometry.colors[3] = new THREE.Color(0x0000FF);
geometry.colors[4] = new THREE.Color(0x000000);
geometry.colors[5] = new THREE.Color(0xFF0000);
geometry.colors[6] = new THREE.Color(0x00000F);
geometry.colors[7] = new THREE.Color(0x000000);
geometry.colors[8] = new THREE.Color(0x111111);
geometry.colors[9] = new THREE.Color(0x000000);
var material = new THREE.ParticleBasicMaterial({color:0xFFFFFF,size:1.0 ,vertexColors:true});//colorを白ににする
particle = new THREE.ParticleSystem(geometry,material);
vertexColorsとは、色の積算をするかしないかを決めるプロパティである。今回の場合vertexColorsはtrueになっていて色の積算をしている。 falseにすると、材質のcolorプロパティが優先されて、以下のようになる。
次回は基本図形である線と三角形について記事を書きます。
