Three.js 線(Line)
今回は、Three.jsの「線(Line)」について書きます。
このような線を表示させることが出来ます。
まずは、Lineクラスのコンストラクタから~
Line(geometry, material, type);
- geometryは形状
- materialは材質
- 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 );
こういう風にやると、
こんな三角形も作れます!
これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!