Three.js｜画像を奥行きのある3Dとして並べる

Three.jsは、Webページの中に立体的な空間を作り、物体や画像をいろいろな角度から表示するためのJavaScriptライブラリです。3D表示に必要な処理を、JavaScriptから扱いやすい形にまとめています。

Webページの中に3Dの空間を作る

3D表示では、何を置くか、どこから見るか、画面へどう描くかを決めます。Three.jsでは、物体を置く空間をScene、見る位置や範囲をCamera、場面をCanvasへ描く機能をRendererと呼びます。

3Dの物体は、形と表面の見え方を組み合わせて作ります。形を表すものがGeometry、色、画像、透明度などを決めるものがMaterialです。この二つを組み合わせた物体をMeshとしてSceneへ追加します。

Scene内の物体は親子関係を持たせて整理できます。この階層構造はシーングラフと呼ばれ、親を動かしたときに子も一緒に動かすといった管理に使われます。

WebGLを直接扱う場合に必要になる処理をまとめ、形、素材、テクスチャ、視点などをオブジェクトとして操作できるようにしています。

画像は、3D物体の表面へ貼り付けて使えます。このように読み込んだ画像をTextureと呼びます。平面の形であるPlaneGeometryと組み合わせると、画像を貼った板のようなMeshを作れます。

複数の板の位置を少しずつ奥へずらせば、画像を重ねて配置できます。3D空間では位置を座標で指定するため、同じ画像でも前後や角度を変えて見せられます。

Materialで透明度を設定すると、手前の画像から奥の画像を透かして見せられます。半透明の物体は、どの順番で描くかや、どちらが手前かを判断する処理の影響を受けます。これらは描画順や深度判定と呼ばれ、配置によっては調整が必要です。

マウスやタッチ操作で視点を回したり、近づけたり、表示位置を動かしたりする機能も追加できます。Three.jsでは、こうした操作をCameraへ反映するOrbitControlsなどのアドオンが用意されています。

Three.jsは3D空間の構成と描画を担当します。画像の撮影や画素単位の加工は、Media Capture and Streams APIやCanvas APIなど、別の仕組みと組み合わせて行えます。