Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

Three.js  線(Line)

今回は、Three.jsの「線(Line)」について書きます。

このような線を表示させることが出来ます。
f:id:gupuru:20131129203704p:plain

まずは、Lineクラスのコンストラクタから~

Line(geometry, material, type);
  1. geometryは形状
  2. materialは材質
  3. typeはラインのとり方。省略可能

実際のソースコードは、こんな感じです。

//geometryの宣言と生成
var geometry = new THREE.Geometry();

//頂点座標の追加
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 150, 0, 0) ) ); 
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 0, 150, 0) ) ); 

//線オブジェクトの生成	
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x990000} ) );

//sceneにlineを追加
scene.add( line );	

重要なのは、ここです。

geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 150, 0, 0) ) ); //①
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 0, 150, 0) ) ); //②

①は、x座標:150,y座標:0,z座標:0の位置を頂点としています。いわいる始点のようなものです。
②は、x座標:0,y座標:150,z座標:0の位置を頂点としています。いわいる終点のようなものです。
こうすると、①の点から②の点まで、線を引けます。

あと、verticesというのは、「geometry」の頂点プロパティの事です。

次に、

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x990000} ) );	

この部分。
ここで、線オブジェクトの生成をしています。
で、

new THREE.LineBasicMaterial( { color: 0x990000} )

このLineBasicMaterialは、Line専用のマテリアル(material)のようなものです。
色などは、ソースコードに書かれているような感じで書けば、設定出来ます。
また、

new THREE.LineBasicMaterial( { linewidth: 10} )

linewidthを使うと、線の幅を変えることが出来ます。(うまくいかない場合もある

では、最後に、

var geometry = new THREE.Geometry();

geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 150, 0, 0) ) );  
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 0, 150, 0) ) );  
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 0, 0, 150) ) ); 
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 150, 0, 0) ) ); 
	
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x990000} ) );

scene.add( line );	

こういう風にやると、
f:id:gupuru:20131129203541p:plain
こんな三角形も作れます!


これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!