Three.jsで鏡をつかう

Three.js（r79）で鏡に映るオブジェクトのシーンをつくってみたかったので調べたところ、鏡オブジェクトを作成できるらしい。そこで、球体の左右に鏡を配置して、球をたくさん表示させてみる。

以下のようなシーンを作成する。

１．Mirror.jsの読み込み

Three.jsのライブラリファイルを解凍し、\examples\js\Mirror.jsを適当なフォルダにコピーする（ここではjs_r79）。それをhtmlから読み込む

２．球体の作成

球体を作成する。

// 球体の作成
var geometry = new THREE.SphereGeometry( 5, 32, 16 );
// テクスチャ画像の読み込み
var texture = new THREE.TextureLoader().load( '../image/sunflower_er.jpg' );
// マテリアルの作成
var material = new THREE.MeshPhongMaterial( { map: texture, color: 0xffffff } );
// 球体の作成
var mesh = new THREE.Mesh( geometry, material );
// 球体をシーンに追加
scene.add( mesh );

３．ミラーの作成

THREE.Mirrorインスタンスを作成し、そのmaterialをミラーオブジェクトのマテリアルとして指定する。

var width = window.innerWidth;
var height = window.innerHeight;

// ミラーのジオメトリ作成
var plane = new THREE.PlaneBufferGeometry( 100, 100 );

// 左ミラーの作成
var leftMirror = new THREE.Mirror( renderer, camera, { clipBias: 0.003, textureWidth: width, textureHeight: height, color: 0x777777 } );
var leftMirrorMesh = new THREE.Mesh( plane, leftMirror.material );
leftMirrorMesh.add( leftMirror );
// 左ミラーの位置調整
leftMirrorMesh.rotateY( Math.PI / 2 );
leftMirrorMesh.position.x = -10;
// 左ミラーをシーンへ追加
scene.add( leftMirrorMesh );

// 右ミラーの作成
var rightMirror = new THREE.Mirror( renderer, camera, { clipBias: 0.003, textureWidth: width, textureHeight: height, color: 0x777777 } );
var rightMirrorMesh = new THREE.Mesh( plane, rightMirror.material );
rightMirrorMesh.add( rightMirror );
// 右ミラーの位置調整
rightMirrorMesh.rotateY( -Math.PI / 2 );
rightMirrorMesh.position.x = 10;
// 右ミラーをシーンへ追加
scene.add( rightMirrorMesh );

４．ミラーのレンダリング

ミラー用のレンダリングを追加する。

function render(){
 requestAnimationFrame( render );
 // レンダリング
 renderer.render( scene, camera );
 // ミラー用レンダリング
 leftMirror.renderWithMirror( rightMirror );
 rightMirror.renderWithMirror( leftMirror );
}
render();

• サンプルの表示