Three.jsでミラーボールをつくる

ミラーボールはたくさんのミラーパネルを球状に取り付けたもので、ダンスホールなんかで使われる。そのミラーボールをThree.js（r79）でつくってみる。

以下のようなミラーボールをつくる。

キューブマップの作成

キューブマップについてはThree.jsでキューブマップを使うを参照。

キューブマップ用の画像を用意し、以下のコードでキューブマップテクスチャを作成する。

// キューブマップ用のテクスチャ作成
var cubeTexture = new THREE.CubeTextureLoader()
  .setPath( 'sunflower/' )
  .load( [ 'sunflower_er_left.png', 'sunflower_er_right.png', 'sunflower_er_up.png', 'sunflower_er_down.png', 'sunflower_er_front.png', 'sunflower_er_back.png' ] );
cubeTexture.format = THREE.RGBFormat;

ミラーボールオブジェクトの作成

球体オブジェクトを作成する。マテリアルの作成で、環境マップに作成したキューブマップを指定する。また、フラットシェーディングを使うと、鏡のパネルが並んでいるように見える。

// 球体ジオメトリの作成
var geometry = new THREE.SphereGeometry( 200, 64, 32 );
// マテリアルの作成
// 環境マップ（envmap）に作成したテクスチャ(cubeTexture)を設定
// 鏡のパネルが並んでいるようにTHREE.FlatShadingを使う
var material = new THREE.MeshStandardMaterial( { 
 color: 0xffffff,
 envMap: cubeTexture,
 shading: THREE.FlatShading,
 roughness: 0.1,
 metalness: 0.9
} );
// オブジェクトの作成
var mball = new THREE.Mesh( geometry, material );

ミラーボールの色を変える

ミラーボールの色をパネルごとに変えてみる。

// 球体のミラーパネルごと(face2つごと)に色を変更
var fIndices = [ 'a', 'b', 'c' ];
var color, f, vIndex, hue;
for ( var i = 0; i < geometry.faces.length; i++ ) {
 f = geometry.faces[ i ];
 if( i % 2 == 0 ) hue = Math.random();
 for( var j = 0; j < 3; j ++ ) {
  vIndex = f[ fIndices[ j ] ];
  color = new THREE.Color( 0xffffff );
  color.setHSL( hue, 1.0, 0.7 );
  f.vertexColors[ j ] = color;
 }
}
// 球体ジオメトリの作成
var geometry = new THREE.SphereGeometry( 200, 64, 32 );
// マテリアルの作成
// 環境マップ（envmap）に作成したテクスチャ(cubeTexture)を設定
// 鏡のパネルが並んでいるようにTHREE.FlatShadingを使う
// vertexColors: THREE.VertexColorsを設定して色の変更を反映させる
var material = new THREE.MeshStandardMaterial( {
 color: 0xffffff,
 envMap: cubeTexture,
 shading: THREE.FlatShading,
 vertexColors: THREE.VertexColors,
 roughness: 0.1,
 metalness: 0.9
});
// オブジェクトの作成
var mball = new THREE.Mesh( geometry, material );

結果

色つき色なし2種類のミラーボールを作成する。結果は以下の通り。

• サンプルの表示