トップへ(mam-mam.net/)

ジオメトリ(形状)を作る ~Webサイトで3Dコンテンツ(Three.js)デザイン

検索:

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);