【Three.js入門】図形:Geometries

図形の指定方法について書きます。基本的な図形は、Three.jsで用意されています。まずは、それらの記述方法とどのようなパラメータが指定できるのかを確認します。ここでは、基本的な図形しか取り上げません。他にも用意されているので、各自で確認してください。

Geometriesの基本的な記述

図形の形が分かりやすいようにワイヤーフレームで表示します。コードの記述例は、以下です。

// ジオメトリを作成
const geometry = new THREE.PlaneGeometry( 1, 1 );
// マテリアルを作成
const material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } );  //ワイヤーフレームを表示
// メッシュを作成
const plane = new THREE.Mesh(geometry, material);
// シーンにメッシュを追加
scene.add(plane);

平面:PlaneGeometory

// コード例
const geometry = new THREE.PlaneGeometry( 1, 1 );
// const geometry = new THREE.PlaneGeometry( width, height );
// width:幅を指定
// height:高さを指定
// その他にwidthSegments, heightSegmentsを指定できる

円:CircleGeometry

// コード例
const geometry = new THREE.CircleGeometry( 1, 32 );
// const geometry = new THREE.CircleGeometry( radius, segments );
// radius:半径を指定
// segments:区切りの数を指定
// その他にthetaStart, thetaLengthを指定できる

立方体:BoxGeometry

// コード例
const geometry = new THREE.BoxGeometry(1, 1, 1);
// const geometry = new THREE.BoxGeometry(width, height, depth);
// width:幅を指定
// height:高さを指定
// depth:奥行きを指定
// その他にwidthSegments, heightSegments, depthSegmentsを指定できる

三角錐:ConeGeometry

// コード例
const geometry = new THREE.ConeGeometry( 1, 1, 16);
// const geometry = new THREE.ConeGeometry( radius, height, radialSegments);
// radius:半径を指定
// height:高さを指定
// radialSegments:区切りの数を指定
// その他にheightSegments, openEnded, thetaStar, thetaLengthを指定できる

円柱:CylinderGeometry

// コード例
const geometry = new THREE.CylinderGeometry( 1, 1, 1, 16, 1, true );
// const geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded );
// radiusTop:上の円の半径を指定
// radiusBottom:下の円の半径を指定
// height:高さを指定
// radialSegments:円の区切りの数を指定
// heightSegments:高さの区切りの数を指定
// openEnded:円柱の両端が開いているか閉じているかを指定
// その他にthetaStart, thetaLengthを指定できる

八面体:OctahedronGeometry

// コード例
const geometry = new THREE.OctahedronGeometry(1, 0);
// const geometry = new THREE.OctahedronGeometry(adius, detail);
// radius:半径を指定
// detail:分割回数を指定

球体:SphereGeometory

// コード例
const geometry = new THREE.SphereGeometry( 1, 16, 16 );
// const geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments );
// radius:半径を指定
// widthSegments:幅に対して区切りの数を指定
// heightSegments:幅に対して区切りの数を指定
// その他にphiStart, phiLength, thetaStart, thetaLengthを指定できる

トーラス:TorusGeometry

// コード例
const geometry = new THREE.TorusGeometry( 1, 0.5, 16, 16 );
// const geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments );
// radius:半径を指定
// tube:チューブの半径を指定
// radialSegments:円に対して区切りの数を指定
// tubularSegments:チューブに対して区切りの数を指定
// その他にarcを指定できる

まとめ

基本的な図形の記述方法について書きました。これらを組み合わせて様々な図形を作成します。

参考サイト

• Three.js公式サイト