【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サイトが作りたいんですよね。コレ使えるのかしら…。
おしゃれ度
★★★☆☆