このセクションでは、背景画像を利用する方法と、環境マップを使ったリアルな質感表現を学びます。
3Dの背景画像は、空間全体を覆うように配置されます。
そのため、通常に撮影された写真ではなく、全天球画像という特殊な撮影をした写真(または任意の画像)を利用します。
このような画像を無料で入手するには、 Poly Haven のようなサイトを利用すると便利です。
Poly Haven では、商用利用も可能で著作権フリーな高品質な全天球画像を無料でダウンロードできます。
全天球画像は、Poly Haven では HDRIs として配布されています。
背景画像に限ったことではありませんが、 もしあなたが作ったものをWeb上に公開する場合は、 著作権に十分注意してください。
easy-three で作った3DはWebページとして公開することができますが、背景画像などの素材については、再配布していることになるので注意が必要です。
ここでは、Poly Haven のKloofendal 48d Partly Cloudy (Pure Sky)を利用してみましょう。
ページ右上のところで、「2K」や「4K」などの解像度を選択し、HDR形式でダウンロードします。
「2K」よりも「4K」の方が画質が良いですが、ファイルサイズも大きくなります。
ダウンロードした画像は、 プログラムのファイルと同じ場所に配置してください。
easy-three では、背景の設定と環境マップの設定が同時にできます。
(環境マップについては、後述します。)
設定するには、以下のようにします。
load.background(画像のパス)今の場合、次のようにすると背景画像と環境マップが設定されます。
const { camera, create, animate, controls } = init()
controls.connect()
camera.position.set(0, -1, 2)
controls.autoRotate = true
create.ambientLight()
create.directionalLight()
load.background("./kloofendal_48d_partly_cloudy_puresky_1k.hdr")
create.cube({
option: {
color: 0x99ff99,
roughness: 0.1,
metalness: 0.7,
}
})
animate()
実行すると、背景画像が表示され、キューブの表面に背景画像が反映されていることがわかります。
これが環境マップの効果です。
環境マップとは周囲の風景が反射されたような質感を表現するものなので、 キューブの粗さが高かったり、金属感が低いと効果がわかりにくくなります。
背景画像や環境マップは、 3Dの世界をよりリアルに見せるために重要な要素です。
積極的に活用すると良いでしょう。