Three.jsで様々なジオメトリ（形状）を作る(Three.js[r145]を使用)
マウス左ドラッグで回転、右ドラッグで移動、ホイールで拡大縮小できます。
ソースコード（左から順番に）
平面 ジオメトリ(THREE.PlaneGeometry)
//■平面ジオメトリの作成(幅、高さ、幅方向分割数、高さ方向分割数)
//平面ジオメトリは厚みが無く片面(表面)のみで、影は裏面のみ落とすので注意。
let planeGeometry=new THREE.PlaneGeometry(10,10,1,1);
//ジオメトリとマテリアルからメッシュを作成
let planeMesh=new THREE.Mesh(planeGeometry,material);
//メッシュをx軸で-90度回転させて水平にする
planeMesh.rotation.x=-Math.PI/2;
//メッシュの位置を設定
planeMesh.position.set(-80,0,0);
planeMesh.receiveShadow=true;//落ちてきた影を表示する
planeMesh.castShadow=false;//影を落とさない(両面表示材質の場合はfalseにする必要がある)
//メッシュをシーンに追加する
scene.add(planeMesh);
直方体 ジオメトリ(THREE.BoxGeometry)
//■直方体ジオメトリの作成(幅,高さ,奥行き)
let boxGeometry=new THREE.BoxGeometry(8,16,8);
//ジオメトリとマテリアルからメッシュを作成
let boxMesh=new THREE.Mesh(boxGeometry,material);
//メッシュの位置を設定
boxMesh.position.set(-70,0,0);
boxMesh.receiveShadow=true;//落ちてきた影を表示する
boxMesh.castShadow=true;//影を落とす
//メッシュをシーンに追加する
scene.add(boxMesh);
球体 ジオメトリ(THREE.SphereGeometry)
//■球体ジオメトリの作成(半径[1], 水平分割数幅[32], 垂直分割数[16], 水平方向開始角度[0], 垂直方向開始角度[Math.PI*2])
let sphereGeometry=new THREE.SphereGeometry(4,32,16,0,Math.PI*2);
//ジオメトリとマテリアルからメッシュを作成
let sphereMesh=new THREE.Mesh(sphereGeometry,material);
//メッシュの位置を設定
sphereMesh.position.set(-60,0,0);
sphereMesh.receiveShadow=true;//落ちてきた影を表示する
sphereMesh.castShadow=true;//影を落とす
//メッシュをシーンに追加する
scene.add(sphereMesh);
カプセル ジオメトリ(THREE.CapsuleGeometry)
//■カプセルジオメトリの作成（上下のカプセルの半径,中央セクションの長さ,キャップの曲線セグメント数[4],カプセル周囲の面の数[8]）
let capsuleGeometry = new THREE.CapsuleGeometry( 4, 4, 4, 8 );
//ジオメトリとマテリアルからメッシュを作成
let capsuleMesh=new THREE.Mesh(capsuleGeometry,material);
//メッシュの位置を設定
capsuleMesh.position.set(-50,0,0);
capsuleMesh.receiveShadow=true;//落ちてきた影を表示する
capsuleMesh.castShadow=true;//影を落とす
//メッシュをシーンに追加する
scene.add(capsuleMesh);
円 ジオメトリ(THREE.CircleGeometry)
//■円ジオメトリの作成（半径,分割数(三角形の数)[8],開始角度[0],角度[Math.PI*2]）
let circleGeometry = new THREE.CircleGeometry( 4, 8, 0, Math.PI*2 );
//ジオメトリとマテリアルからメッシュを作成
let circleMesh=new THREE.Mesh(circleGeometry,material);
//メッシュの位置を設定
circleMesh.position.set(-35,0,0);
circleMesh.receiveShadow=true;//落ちてきた影を表示する
circleMesh.castShadow=true;//影を落とす（裏面が影を落とすので影が表示されない）
//メッシュをシーンに追加する
scene.add(circleMesh);
リング（輪） ジオメトリ(THREE.RingGeometry)
//リング（輪）ジオメトリの作成(内側半径(0.5),外側半径(1),分割数(8),分割数(1),開始角度[0],角度[Math.PI*2])
let ringGeometry = new THREE.RingGeometry(3, 5, 32, 1, 0, Math.PI*2);
//ジオメトリとマテリアルからメッシュを作成
let ringMesh=new THREE.Mesh(ringGeometry,material);
//メッシュの位置を設定
ringMesh.position.set(-20,0,0);
ringMesh.receiveShadow=true;//落ちてきた影を表示する
ringMesh.castShadow=true;//影を落とす（裏面が影を落とすので影が表示されない）
//メッシュをシーンに追加する
scene.add(ringMesh);
円錐（コーン） ジオメトリ(THREE.ConeGeometry)
//■円錐（コーン）ジオメトリの作成（半径,高さ,分割数(三角形の数)[8],高さ面の分割数[1],底が空いてるか[false],始角度[0],角度[Math.PI*2]）
let coneGeometry = new THREE.ConeGeometry( 4, 10, 8, 1, false, 0, Math.PI*2 );
//ジオメトリとマテリアルからメッシュを作成
let coneMesh=new THREE.Mesh(coneGeometry,material);
//メッシュの位置を設定
coneMesh.position.set(-5,0,0);
coneMesh.receiveShadow=true;//落ちてきた影を表示する
coneMesh.castShadow=true;//影を落とす
//メッシュをシーンに追加する
scene.add(coneMesh);
円柱 ジオメトリ(THREE.CylinderGeometry)
//■円柱ジオメトリの作成（上部半径,底半径,高さ,分割数(三角形の数)[8],高さ面の分割数[1],上下が空いてるか[false],始角度[0],角度[Math.PI*2]）
let cylinderGeometry = new THREE.CylinderGeometry( 4, 6, 10, 8, 1, false, 0, Math.PI*2 );
//ジオメトリとマテリアルからメッシュを作成
let cylinderMesh=new THREE.Mesh(cylinderGeometry,material);
//メッシュの位置を設定
cylinderMesh.position.set(10,0,0);
cylinderMesh.receiveShadow=true;//落ちてきた影を表示する
cylinderMesh.castShadow=true;//影を落とす
//メッシュをシーンに追加する
scene.add(cylinderMesh);
トーラス（ドーナツ型） ジオメトリ(THREE.TorusGeometry)
//■トーラス（ドーナツ型）ジオメトリの作成（中心からチューブ中心迄の半径,チューブの半径,分割数[8],分割数[6],中心角[Math.PI*2]）
let torusGeometry = new THREE.TorusGeometry(5, 2, 32, 32, Math.PI*2 );
//ジオメトリとマテリアルからメッシュを作成
let torusMesh=new THREE.Mesh(torusGeometry,material);
//メッシュの位置を設定
torusMesh.position.set(25,0,0);
torusMesh.receiveShadow=true;//落ちてきた影を表示する
torusMesh.castShadow=true;//影を落とす
//メッシュをシーンに追加する
scene.add(torusMesh);
チューブ(3Dカーブに沿って押し出し) ジオメトリ(THREE.TubeGeometry)
//■チューブ(3Dカーブに沿って押し出し)ジオメトリ
//基底クラスTHREE.Curveから派生したクラスを定義する
class CustomSinCurve extends THREE.Curve {
constructor( scale = 1 ) {
super();
this.scale=scale;
}
//tは0～1迄の値が届く
getPoint(t, optionalTarget=new THREE.Vector3()) {
const tx = t*2-1;//-1～1
const ty = Math.sin(2*Math.PI * t);//-1～1
const tz = Math.cos(2*Math.PI * t);//-1～1
return optionalTarget.set(tx,ty,tz).multiplyScalar(this.scale);
}
}
let path=new CustomSinCurve(5);
//チューブジオメトリの作成（）
let tubeGeometry = new THREE.TubeGeometry(path, 64, 1, 8, false);
//ジオメトリとマテリアルからメッシュを作成
let tubeMesh=new THREE.Mesh(tubeGeometry,material);
//メッシュの位置を設定
tubeMesh.position.set(40,0,0);
tubeMesh.receiveShadow=true;//落ちてきた影を表示する
tubeMesh.castShadow=true;//影を落とす
//メッシュをシーンに追加する
scene.add(tubeMesh);
旋盤（回転体） ジオメトリ(THREE.LatheGeometry)
//■旋盤（回転体）ジオメトリ
//(X→,Y↑)平面座標での点配列を作る
let points=[
new THREE.Vector2(0,0),new THREE.Vector2(4,0),new THREE.Vector2(4,8),
new THREE.Vector2(3.9,8),new THREE.Vector2(3.9,0.1),new THREE.Vector2(0,0.1),
];
//Y↑軸で回転させて旋盤（回転体）ジオメトリ作成(点配列,分割数,開始角[0],角度[Math.PI*2])
let latheGeometry = new THREE.LatheGeometry(points, 12, 0, Math.PI*2);
//ジオメトリとマテリアルからメッシュを作成
let latheMesh=new THREE.Mesh(latheGeometry,material);
//メッシュの位置を設定
latheMesh.position.set(60,0,0);
latheMesh.receiveShadow=true;//落ちてきた影を表示する
latheMesh.castShadow=true;//影を落とす
//メッシュをシーンに追加する
scene.add(latheMesh);
押し出し(掃引体) ジオメトリ(THREE.ExtrudeGeometry)
//■押し出し(掃引体)ジオメトリ
//X→,Y↑平面でシェイプを作成
let shape=new THREE.Shape();
shape.moveTo(0,0);
shape.lineTo(6,6);
shape.lineTo(6,-6);
shape.lineTo(-6,-6);
shape.lineTo(-6,6);
shape.lineTo(0,0);
//Z(奥行)方向に押し出してジオメトリを作成する
let extrudeGeometry = new THREE.ExtrudeGeometry(
shape,
{
spteps:1,//押し出し分割数(12)
depth:10,//押し出し距離(1)
bevelEnabled:true,//面取りを行う
bevelThickness: 2,//ベベルの深さ(0.2)
bevelSize: 2, //ベベルが伸びる形状の輪郭からの距離(bevelThickness-9.1)
bevelOffset: 0, //ベベルが始まる形状のアウトラインからの距離(0)
bevelSegments: 12 //ベベルレイヤー[ベベルの分割]数(3)
}
);
//ジオメトリとマテリアルからメッシュを作成
let extrudeMesh=new THREE.Mesh(extrudeGeometry,material);
//メッシュの位置を設定
extrudeMesh.position.set(80,0,0);
extrudeMesh.receiveShadow=true;//落ちてきた影を表示する
extrudeMesh.castShadow=true;//影を落とす
//メッシュをシーンに追加する
scene.add(extrudeMesh);
