Three.jsの公式examplesには、500点を超える 作例が掲載されています。本ページでは、その中から注目すべき作例をピックアップして紹介します。

1. webgl_loader_3dtiles

3D Tiles形式の地理データを読み込み、Google Photorealistic Tilesとthree-cloudsを組み合わせた作例です。広い範囲の地形や建物を出しながら、地表の上に雲の層も重ねています。地形や建物と雲の表現によって、リアルに空撮しているような印象があります。画面上部のUIで時刻を切り替えると、地表の明るさと雲の見え方が連動して変わります。

2. webgpu_postprocessing_anamorphic

ポストエフェクトで、横に長く伸びる光条を加える作例です。金属のヘルメットに入った強いハイライトから細い光が左右へ伸びます。

3. webgpu_postprocessing_radial_blur

放射状のぼかしによって、ライトバーストと呼ばれる表現ができる作例です。光源から外側へ向かって明るさが広がる見え方になります。

4. webgpu_upscaling_taau

都市の建物が整った箱庭のように並び、街全体がミニチュア模型のように見える作例です。

5. webgpu_postprocessing_ssr

画面内反射を描く作例です。金属の表面や磨かれた台座に周囲の形やハイライトが映り込み、鏡面らしい材質感がよく分かります。

6. webgpu_postprocessing_dof

被写界深度の作例です。中央付近の球体にピントが合い、手前と奥の球体は大きくぼけて見えます。

7. webgpu_caustics

透過材質のガラスを通った光が、床の影の中に模様として落ちる作例です。透明な物体を通った光が床にどう現れるかを見比べられます。

8. webgpu_lights_projector

映写機のように、画像や映像を光として投影する作例です。床には水面の反射を思わせる模様が映ります。

9. webgpu_loader_gltf_transmission

glTFで透過材質を扱うための拡張仕様KHR_materials_transmissionを使った作例です。器の向こう側が透けて見え、輪郭の近くでは背景がわずかに曲がって映ります。反射だけの表面とは違う、抜けのある質感がよく出ています。

10. webgpu_loader_gltf_iridescence

glTFで玉虫色の薄膜表現を扱うための拡張仕様KHR_materials_iridescenceを使った作例です。見る角度に応じて青や紫、緑の色味が移り、単色の金属とは違う複雑な表情が現れます。表面にもう一枚薄い膜が乗ったような見え方なので、アクセサリーや塗装面のような繊細な光り方を見せたい場面に向いた作例です。

Three.js以外も含めて、ブラウザの3D表現を広く見たい方は、次の記事もぜひご覧ください。