[Three.js] 忙しい人のための公式サンプル30選
Three.js公式サイトには、405個(個人調べ)に及ぶ機能・実装例のサンプル集が掲載されています。
今回はその中から、見ておくと良い30個を厳選し目的ベースでまとめました。
1. シーン内に配置したメッシュを取得したい
メッシュを取得する際は基本的にRaycastを使用します。
webgl_instancing_raycast
2. カメラの視野角を可視化して確認したい
バウンディングボックス、法線などの可視化も可能です。
webgl_helpers
3. メッシュにアウトラインを描画したい。
"選択中のメッシュを可視化する"などのユースケースで使用できます。
webgl_postprocessing_outline
4. シーンにレイヤーの概念を追加したい
ゲーム制作でギミックとして応用できそうです。
webgl_layers
5. マテリアルの設定値に対するアウトプットを知りたい
Standardマテリアル以外のサンプルもあります。
webgl_materials_variations_standard
6. カメラをグリグリ動かしたい
OrbitControlsを使用します。
プロパティであるtargetに座標を指定し、その地点を中心にカメラを動かすことも可能です。
misc_controls_orbit
7. メッシュの位置・回転・大きさをシーン上で操作したい
TransformControlsを使用します。
UnityやBlenderでよく見る矢印(ギズモ)でメッシュを操作できます。
misc_controls_transform
8. モデル上にラベルを表示したい
ゲームでプレイヤー名を表示する時などに使えそうです。
css2d_label
9. 立体音響を使用したい
聴覚を含め、より没入感のある体験を目指したい際に。
10. 空や海(水面)を作りたい
見惚れるくらいサンプルが美しいです。
webgl_shaders_ocean
11. 複数シーンを描画したい
ECサイトなどで使えそうです。
webgl_multiple_elements
12. 動的に頂点を削減したい
"APIで取得したモデルに対して、任意の頂点数を上回った場合に削減"のような形で使用できそうです。
webgl_modifier_simplifier
13. メッシュを切り抜きたい
メッシュに穴を空けたりできそうです。
webgl_clipping_stencil
14. 地形を生成したい
平面ジオメトリの頂点にノイズをかける形で実装しているようです。
webgl_geometry_terrain
15. 空間にテキストを配置したい
WebVRで使えそうです。
webgl_geometry_text_shapes
16. 任意の平面にメッシュを配置したい
グリッド状の平面にメッシュを配置するサンプルです。
実装方法が参考になります。
webgl_interactive_voxelpainter
17. レンズフレアを再現したい
光源がレンズに当てられた時に発生する光の漏れを再現できます。
webgl_lensflares
18. 動的に反射を描画したい
鏡面反射する球体が実写かと思うほどリアルです。
webgl_materials_cubemap_dynamic
19. シーンのリアリティを向上させたい
画像を光源として用いる、IBL(Image Based Lighting)を行うことで、
よりリアリティのある空間を作ることができます。(輝度情報が必要なのでHDRIを使用する)
webgl_materials_envmaps_groundprojected
20. メッシュをワイヤーフレーム表示したい
演出としても使えそうです。
webgl_materials_wireframe
21. 鏡を作りたい
パフォーマンスへの影響は気になるところです。
webgl_mirror
22. 被写界深度を設定したい
よりリアリティのある絵を作ることができます。
webgl_postprocessing_dof
23. 光の滲み(Bloom)を追加したい
ポストプロセッシングでお馴染みのBloomです。
光の表現には欠かせません。
webgl_postprocessing_unreal_bloom_selective
24. FPSを作りたい
移動、ジャンプ、カメラ操作、射撃など、FPSの基本機能が実装されています。
games_fps
25. 物理演算を適用したい
物理エンジンのライブラリを使用することで、重力などを付与することができます。
26. メッシュを見回したい
単一のメッシュを見せたい場合に使えそうです。
misc_controls_arcball
27. DOM要素を空間に配置したい
CSS3DRenderer/Objectを使用することで実現できます。
css3d_youtube
28. メッシュをドラッグで操作したい
平面移動ですが便利です。
misc_controls_drag
29. メッシュを範囲選択したい
サンプルでは範囲選択した全てのメッシュを取得し、マテリアルに変更を加えています。
misc_boxselection
30. レンダリング結果をドット絵風にしたい
ポストプロセッシングでRenderPixelatedPassを使用しているようです。
webgl_postprocessing_pixel
最後に
最後まで見て頂きありがとうございました！
Discussion