ジオメトリの種類　Three.jsの使い方を勉強してみた

こんにちは。

この記事は、 Three.jsのジオメトリの種類（の1部分）を調べて、まとめた記事です！

Three.jsの導入・基本の表示や光源の記事はこちら↓

Three.jsの使い方を勉強してみた導入から表示まで

「初めてのThree.js」を使い、学習した記録です。シーン、カメラ、レンダラーメッシュ、ジオメトリとマテリアルなど入門編です。

光源の設定　Three.jsの使い方を勉強してみた

この記事はThree.jsで光源を設定してみた記事です。マテリアルの種類で光源が反映されず、ちょっとハマりました・・・

デモはこんな感じです↓

See the Pen three.js ジオメトリ学習 by dyna (@sakudyna) on CodePen.

マウスでいろんな方向に動かせるから試してみてね（＾＾）

1. ジオメトリの種類
2. SphereGeometry
3. BoxGeometry
4. planeGeometry
5. ConeGeometry
6. CylinderGeometry
7. TorusGeometry
8. TorusKnotGeometry
9. CircleGeometry
10. まとめ

ジオメトリの種類

色々種類があったのですが、簡単なものからまとめていきたいと思います。

複雑なものも後々調べたい・・・！！

以下、コードにハイライトついているところが、ジオメトリ（形）の設定部分になります。

色や透明感なんかは見やすいようにカスタマイズしてあります。

SphereGeometry

球のジオメトリ。


   // sphere（球）の作成(半径,水平セグメント数,垂直セグメント数)
   const geometry = new THREE.SphereGeometry(80, 32, 32);
   const material = new THREE.MeshLambertMaterial({color:0xf21170,
                    opacity: 0.8,
                    transparent: true,
                    side: THREE.DoubleSide,});
   const sphere = new THREE.Mesh(geometry, material);
   scene.add(sphere);

// sphere（球）の作成(半径,水平セグメント数,垂直セグメント数)

const geometry = new THREE.SphereGeometry(80, 32, 32);

const material = new THREE.MeshLambertMaterial({color:0xf21170,

opacity: 0.8,

transparent: true,

side: THREE.DoubleSide,});

const sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);

詳細は公式に使い方が記載されています。

球のジオメトリを生成するためのクラス。
引用元：https://threejs.org/docs/#api/en/geometries/SphereGeometry

水平セグメント・・・水平方向に使用されるセグメント（かたまり）の数。
垂直セグメント・・・垂直方向に使用されるセグメントの数。
セグメントを増やすと、滑らかになるらしい。

BoxGeometry

立体のジオメトリ。


　//箱の作成
  const geometrybox = new THREE.BoxGeometry(80, 80, 80 );
  const materialbox = new THREE.MeshLambertMaterial( {
                    color: 0x3edbf0,
                    opacity: 0.5,
                    transparent: true,
                    side: THREE.DoubleSide,});
  const cube = new THREE.Mesh( geometrybox, materialbox );
  scene.add(cube);

　//箱の作成

const geometrybox = new THREE.BoxGeometry(80, 80, 80 );

const materialbox = new THREE.MeshLambertMaterial( {

color: 0x3edbf0,

opacity: 0.5,

transparent: true,

side: THREE.DoubleSide,});

const cube = new THREE.Mesh( geometrybox, materialbox );

scene.add(cube);

公式HPは以下。

BoxGeometryは、指定された「幅」、「高さ」、および「奥行」を持つ直方体のジオメトリクラスです。
引用元：https://threejs.org/docs/#api/en/geometries/BoxGeometry

planeGeometry

2次元の四角形のジオメトリ。


// 平面の作成（横幅、高さ）
　const planeGeometry = new THREE.PlaneGeometry(300, 200);　 
  const planeMaterial = new THREE.MeshToonMaterial({color: 0x6699FF}) 
　const plane = new THREE.Mesh(planeGeometry, planeMaterial);
　scene.add(plane);

// 平面の作成（横幅、高さ）

　const planeGeometry = new THREE.PlaneGeometry(300, 200);　

const planeMaterial = new THREE.MeshToonMaterial({color: 0x6699FF})

　const plane = new THREE.Mesh(planeGeometry, planeMaterial);

　scene.add(plane);

公式HPは以下。

平面ジオメトリを生成するためのクラス。
引用元：https://threejs.org/docs/#api/en/geometries/PlaneGeometry

ConeGeometry

円錐のジオメトリ。


　//円錐　半径、高さ、円周の周りのセグメント数
　const conegeometry = new THREE.ConeGeometry( 60, 80, 100 );
　const conematerial = new THREE.MeshPhongMaterial( {
　　　　　　　　　　color: 0xFF0000,
                    opacity: 0.8,
                    transparent: true,
                    side: THREE.DoubleSide,} );
　const cone = new THREE.Mesh( conegeometry, conematerial );
　scene.add( cone );

　//円錐　半径、高さ、円周の周りのセグメント数

　const conegeometry = new THREE.ConeGeometry( 60, 80, 100 );

　const conematerial = new THREE.MeshPhongMaterial( {

　　　　　　　　　　color: 0xFF0000,

opacity: 0.8,

transparent: true,

side: THREE.DoubleSide,} );

　const cone = new THREE.Mesh( conegeometry, conematerial );

　scene.add( cone );

公式HPは以下。

円錐形状を生成するためのクラス。
引用元：https://threejs.org/docs/#api/en/geometries/ConeGeometry

ちなみに、数値を変えて100→8にしてみたらこんな感じだよ。
カクカクしてる。

CylinderGeometry

円柱のジオメトリ。


 //円柱 radiusTop（上面の半径）, radiusBottom（底面の半径）, height（高さ）, radiusSegments（円周の分割数）, heightSegments（高さの分割数）, openEnded（ふた）
 const cylgeometry = new THREE.CylinderGeometry( 40, 40, 100, 100 );
 const cylmaterial = new THREE.MeshPhongMaterial( {
                    color: 0x00adb5,
                    opacity: 0.6,
                    transparent: true,
                } );
  const cylinder = new THREE.Mesh( cylgeometry, cylmaterial );
　scene.add( cylinder );

//円柱 radiusTop（上面の半径）, radiusBottom（底面の半径）, height（高さ）, radiusSegments（円周の分割数）, heightSegments（高さの分割数）, openEnded（ふた）

const cylgeometry = new THREE.CylinderGeometry( 40, 40, 100, 100 );

const cylmaterial = new THREE.MeshPhongMaterial( {

color: 0x00adb5,

opacity: 0.6,

transparent: true,

} );

const cylinder = new THREE.Mesh( cylgeometry, cylmaterial );

　scene.add( cylinder );

公式HPは以下。

円柱形状を生成するためのクラス。
引用元：https://threejs.org/docs/#api/en/geometries/CylinderGeometry

上面（または下面）の半径をマイナスにすると、こんな形にもなるよ。


 //円柱 応用 
  const cylgeometry2 = new THREE.CylinderGeometry( 40, -40, 100, 100 );
  const cylmaterial2 = new THREE.MeshToonMaterial( {
                    color: 0xFF0000,
                    opacity: 0.6,
                    transparent: true,
                    side: THREE.DoubleSide,
                } );
  const cylinder2 = new THREE.Mesh( cylgeometry2, cylmaterial2 );
　scene.add( cylinder2 );

//円柱応用

const cylgeometry2 = new THREE.CylinderGeometry( 40, -40, 100, 100 );

const cylmaterial2 = new THREE.MeshToonMaterial( {

color: 0xFF0000,

opacity: 0.6,

transparent: true,

side: THREE.DoubleSide,

} );

const cylinder2 = new THREE.Mesh( cylgeometry2, cylmaterial2 );

　scene.add( cylinder2 );

TorusGeometry

ドーナッツ型のジオメトリ。


//ドーナッツ（ 芯円半径、断面円半径、断面円分割、芯円分割）
 const torusgeometry = new THREE.TorusGeometry( 80, 30, 100, 100 );
 const torusmaterial = new THREE.MeshToonMaterial( { 
                    color: 0x00adb5,
                    opacity: 0.6,
                    transparent: true,
                    side: THREE.DoubleSide,
                } );
 const torus = new THREE.Mesh( torusgeometry, torusmaterial );
 scene.add( torus );

//ドーナッツ（芯円半径、断面円半径、断面円分割、芯円分割）

const torusgeometry = new THREE.TorusGeometry( 80, 30, 100, 100 );

const torusmaterial = new THREE.MeshToonMaterial( {

color: 0x00adb5,

opacity: 0.6,

transparent: true,

side: THREE.DoubleSide,

} );

const torus = new THREE.Mesh( torusgeometry, torusmaterial );

scene.add( torus );

公式HPは以下。

トーラスジオメトリを生成するためのクラス。
引用元：https://threejs.org/docs/#api/en/geometries/TorusGeometry

芯円分割を8にすると、カクカクしたドーナッツになるよ。

TorusKnotGeometry

結び目ジオメトリ。


 //結び目 radius(半径), tube（紐の太さ）, radialSegments（長さの分割数・曲がりの滑らかさ）, tubularSegments（幅・ひもの滑らかさ）, p（巻き数）, q（ひねり数）, heightScale（Zの倍率）
  const knotgeometry = new THREE.TorusKnotGeometry( 40, 10, 100, 16);
  const knotmaterial = new THREE.MeshToonMaterial( {
                    color: 0xffff00,
                    opacity: 0.6,
                    transparent: true,
                    side: THREE.DoubleSide, } );
  const torusKnot = new THREE.Mesh( knotgeometry, knotmaterial );
  scene.add( torusKnot );

//結び目 radius(半径), tube（紐の太さ）, radialSegments（長さの分割数・曲がりの滑らかさ）, tubularSegments（幅・ひもの滑らかさ）, p（巻き数）, q（ひねり数）, heightScale（Zの倍率）

const knotgeometry = new THREE.TorusKnotGeometry( 40, 10, 100, 16);

const knotmaterial = new THREE.MeshToonMaterial( {

color: 0xffff00,

opacity: 0.6,

transparent: true,

side: THREE.DoubleSide, } );

const torusKnot = new THREE.Mesh( knotgeometry, knotmaterial );

scene.add( torusKnot );

公式HPは以下。

トーラスノットを作成します。その特定の形状は、互いに素な整数pとqのペアによって定義されます。
引用元：https://threejs.org/docs/#api/en/geometries/TorusKnotGeometry

これはちょっと難しかった・・・( ；∀；)

実際触って試してみるのがおすすめです。

ここでは、半径4，ひもの太さ10，曲がりの滑らかさ100，幅のセグメント16にしてみたよ。
ｐ（巻き数）、q（ひねり数）はデフォルトで「2，3」なんだって。

CircleGeometry

2次元の円のジオメトリ。


  //2次元の円  radius(半径), segments（角度の分割）, thetaStart（開始角度）, thetaLength（中心角度）
　const circlegeometry = new THREE.CircleGeometry( 100,10,0.3 * Math.PI * 2, 5.5);
　const circlematerial = new THREE.MeshLambertMaterial( { 
                    color: 0x6699FF,
                    opacity: 0.6,
                    side: THREE.DoubleSide,
                } );
　 const circle = new THREE.Mesh( circlegeometry, circlematerial );
  //ワイヤーフレームのメッシュ作成
　 const wire = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: true});
   const wiremesh = new THREE.Mesh(circlegeometry, wire); 

　 scene.add( circle );
   scene.add(wiremesh);