ミラーボールはたくさんのミラーパネルを球状に取り付けたもので、ダンスホールなんかで使われる。そのミラーボールをThree.js(r79)でつくってみる。
以下のようなミラーボールをつくる。
キューブマップについてはThree.jsでキューブマップを使うを参照。
キューブマップ用の画像を用意し、以下のコードでキューブマップテクスチャを作成する。
球体オブジェクトを作成する。マテリアルの作成で、環境マップに作成したキューブマップを指定する。また、フラットシェーディングを使うと、鏡のパネルが並んでいるように見える。
ミラーボールの色をパネルごとに変えてみる。
色つき色なし2種類のミラーボールを作成する。結果は以下の通り。
以下のようなミラーボールをつくる。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUYGzupc-Y1vVL-xOxT800GpY_qYIXHbDQAItOqxUAweYFB8Ve3KNUN1sFwzBrAXi9msxTY_-8UJ6pxkVduYmYGn-yfwRPhzwn1HGXPtayo9Dpy7qgcswoYFgxjioYPz5qXYPcIkIvHrg/s400/mb1.png)
キューブマップの作成
キューブマップについては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種類のミラーボールを作成する。結果は以下の通り。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3EXTkNP3wmJ2T-FSQqbqeOFSkb83MbT4pcNC8WPY4QJbMXTYGdIPNG_1_vOmP9M6567-Auax96yTMFNc7LzzrHL2YX95bjN_xMRXNylAriHI-bcgRCu7vXALtjcktfCzcSCaj_7eFruc/s400/mb2.png)
0 件のコメント:
コメントを投稿