反射マッピング（鏡のように周りのものが映る）～Webサイトで3Dコンテンツ(Three.js)

鏡のように周りのものが映り込むキューブ反射マッピング(Three.js[r145]を使用)

マウス左ドラッグで回転、右ドラッグでカメラの移動、ホイールで拡大縮小できます。
スワイプで回転、画面に2本指を触れてなぞるとカメラの移動、ピンチイン／アウトで拡大縮小できます。

CubeCamera（WebGLCubeRenderTargetにレンダリングする６方向の６つのカメラ）を使うと鏡のように周りが映り込む材質を作成してメッシュに適用することができます。

ソースコード

//■反射マッピング用のターゲット作成
cubeRenderTargetReflection = new THREE.WebGLCubeRenderTarget(512,{
    generateMipmaps: true,
    minFilter: THREE.LinearMipmapLinearFilter    });
cubeRenderTargetReflection.texture.mapping = THREE.CubeReflectionMapping;//反射マッピングに設定

//■反射マッピング用キューブカメラの作成
//(カメラに写る最短距離, カメラに写る最長距離 ,ターゲット)
cubeCameraReflection = new THREE.CubeCamera( 0.1, 10000, cubeRenderTargetReflection);

//■反射材質の作成
let materialReflection=new THREE.MeshLambertMaterial({
  color:0xffffff,
  envMap:cubeCameraReflection.renderTarget.texture,
  reflectivity:0.9,    //反射率
});

//■球体ジオメトリの作成(半径, 水平分割数幅, 垂直分割数, 水平方向開始角度, 垂直方向開始角度)
let sphereGeometry=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);

//■ジオメトリと材質から反射メッシュを作成する
meshReflection=new THREE.Mesh(sphereGeometry,materialReflection);
meshReflection.position.set(0,0,0);
scene.add(meshReflection);//メッシュをシーンに追加
cubeCameraReflection.position.copy(meshReflection.position);//キューブカメラの位置を設定