【Three.js】環境マッピングその２

JavaScript,Three.js

はじめに

前回の続きになります。

前回は、内壁に風景画像を貼り付けた立方体を作って、カメラを設置するところまでやりました。今回は、球体を作ってその表面に周囲の風景を映り込ませてみます。

できた

デモサイトはこちら。

すんごい。でもコレ、ホントに映ってるわけではなくて、擬似的に映っているように見せているだけみたいです。

周りの風景と同じ画像を球体に貼り付けているだけ。歪んでる感じとかはThree.js側で勝手に計算してくれるので、数学が苦手な僕でも大丈夫というワケですね。ありがとうございます。

前回から追加したところを見ていきましょう。

球体用のキューブマップを作る

/***** キューブマップ(全周囲の風景画像)の作成 *****/
var path = '../assets/textures/cubemap/yokohama/';
var urls = [
  path + 'posx.jpg', //右
  path + 'negx.jpg', //左
  path + 'posy.jpg', //上
  path + 'negy.jpg', //下
  path + 'posz.jpg', //前
  path + 'negz.jpg'  //後
]

var cubeTextureLoader = new THREE.CubeTextureLoader();
var textureCube = cubeTextureLoader.load(urls); //skybox用
var textureMirror = cubeTextureLoader.load(urls); //鏡用
var textureGlass = cubeTextureLoader.load(urls); //ガラス用

前回とほとんど同じです。最後の２行を追加しただけです。鏡用のキューブマップとガラス用のキューブマップも作っておきます。

球体を作る

/***** 球体の作成 *****/
// 鏡
var mirrorGeometry = new THREE.SphereGeometry(2, 30, 30);
var mirrorMaterial = new THREE.MeshPhongMaterial({
  envMap: textureMirror,
  reflectivity: 1.0
});
var mirror = new THREE.Mesh(mirrorGeometry, mirrorMaterial);
scene.add(mirror);

// ガラス
textureGlass.mapping = THREE.CubeRefractionMapping;
var glassGeometry = new THREE.SphereGeometry(2, 30, 30);
var glassMaterial = new THREE.MeshPhongMaterial({
  envMap: textureGlass,
  refractionRatio: 0.7
});
var glass = new THREE.Mesh(glassGeometry, glassMaterial);

/***** ライト *****/
var light = new THREE.HemisphereLight(0xffffff, 0xaaaaaa, 1.0);
light.position.set(0, 500, 0);
scene.add(light);

ジオメトリとマテリアルを作って、それをもとにメッシュを作ります。鏡玉とガラス玉の２個の球体を作って同じ位置に置き、ボタンで表示非表示の切り替えを行います。

マテリアルの"envMap"プロパティに先ほど作ったキューブマップを指定します。これで周りの風景と同じ画像が球体に貼り付けられます。ガラス玉に貼り付けるキューブマップは、"mapping"プロパティに"THREE.CubeRefractionMapping"を指定してあげます。こうするだけでガラスっぽくなります。

鏡玉の方で指定している"reflectivity"は反射の度合いを決めるプロパティです。0で全く反射しない、1でテッカテカ。

ガラス玉で指定している"refractionRatio"は屈折の度合い。1でちょっと境目が分かるかなーって感じですが、0.99にするだけでケント・デリカットぐらいになります。カメラとの距離でも屈折具合が変わるので調整がめんどい。今回は0.7にしました。

ライトも追加します。これが無いと球体が真っ黒です。光を当てて見えるようにしてあげましょう。

ボタンを押した時の処理

// 鏡ボタン
document.getElementById('mirror').addEventListener('click', function() {
  scene.remove(glass);
  scene.add(mirror);
});

// ガラスボタン
document.getElementById('glass').addEventListener('click', function() {
  scene.remove(mirror);
  scene.add(glass);
});

最後はボタンの処理です。鏡玉とガラス玉の一方をシーンから削除して、もう一方をシーンに追加する。シーンというのは3D空間のことです。こうすることで表示と非表示を切り替えることができます。

あとがき

おもしろいですね。特にガラスのヤツ。人型のモデルがあればプレデターを作ることもできてしまう。

でもアレですね。僕はwebサイトが作りたいんですよね。コレ使えるのかしら…。

おしゃれ度

★★★☆☆

Posted by ナカタ