ガラス玉のように屈折透過～Webサイトで3Dコンテンツ(Three.js)

ガラス玉のように屈折透過するキューブ屈折マッピング(Three.js[r145]を使用)

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

CubeCamera（WebGLCubeRenderTargetにレンダリングする６方向の６つのカメラ）を使うとガラス玉のように屈折透過する材質を作成してメッシュに適用することができます。

ソースコード

//■屈折マッピング用のターゲット作成
cubeRenderTargetRefraction = new THREE.WebGLCubeRenderTarget(512,{
    generateMipmaps: true,
    minFilter: THREE.LinearMipmapLinearFilter,    });
cubeRenderTargetRefraction.texture.mapping = THREE.CubeRefractionMapping;//屈折マッピングに設定
cubeRenderTargetRefraction.texture.type = THREE.HalfFloatType;

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

//■屈折ランバートシェーディング材質（光源の影響を受ける光沢の無い材質）の作成
let materialRefraction=new THREE.MeshLambertMaterial({
  color:0xffffff,
  envMap:cubeCameraRefraction.renderTarget.texture,
  opacity:1.0,
  refractionRatio:0.6,//屈折率
  //side:THREE.DoubleSide,
  side:THREE.FrontSide,
  transparent: true,
  combine: THREE.MixOperation,
  //combine:THREE.AddOperation,
});

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

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