このページの中で、そのまま歩き回れる three.js の森。なだらかな丘、自分の道を選んで坂を下っていく小川、風になびく草と葉、花の上をふわふわ漂う蝶。赤いワンピースの女の子が水辺で待っています。地面のどこかをクリックすると、彼女はそこへ歩いていきます——もう決まったルートを回るのではなく、あなたが指した場所へ向かいます。無料で、インストールも不要です。
左クリックで移動 · 右ドラッグで視点回転 · ホイールでズーム
操作するまではカメラがゆっくり周回します。最初のクリックかドラッグの後は、操作は完全にあなたのものです。
大地。 地面は 240 × 240 のグリッドで、すべての頂点をひとつの高さ関数で持ち上げています。なだらかな丘を作るいくつかのサイン波の重ね合わせ、小川が流れる場所に削られた谷、平らにならした岸、そして水辺に沿ったわずかな盛り上がり。草の一本一本、石、足元の位置もすべて同じ関数で決めているので、浮くものも沈むものもありません。
小川。 谷を縫うように曲線が下り、水はそれに沿って敷いたリボンです。毎フレームさざ波が立ち、透けて見える物理ベースのマテリアルで描かれているため、下の小石や川床が屈折して見えます。10 匹の小さな魚が尾を振りながら流れを行き来しています。
草と木。 約 25,000 本の草が岸を覆い、一本一本が先細りで、反りがあり、色合いが違い、風に揺れています。大きな木 1 本と小さな木 6 本にはそれぞれ何千枚ものリーフカードが付いていて同じ風に揺れ、その奥では暗い針葉樹のリングが霧の中へ溶けていきます。
小さな生きもの。 6 色、90 輪の花が草原に点在し、その上を 6 匹の蝶がのんびりと輪を描いて飛び、大きな木からは葉が舞い落ち続け、空中には花粉の粒が漂っています。
光。 物理ベースの空の中、ゴールデンアワーの低い太陽が地平線から 16 度の高さにあり、柔らかな影と、樹冠を抜ける光の筋を落とします。頭上には雲が流れ、控えめなブルームとカラーグレーディングで絵を仕上げています。
Forest Stroll は WebGL 2 上で動くひとつの three.js シーンで、ダウンロードするモデルや画像テクスチャはありません。メッシュとテクスチャはすべて、ページを開いたときにコードで生成されます。草と葉はインスタンスメッシュで、標準マテリアルの頂点シェーダーに数行のパッチを当てて揺らし、地形へのレイキャストでクリックを行き先に変え、フレームはブルームとカラーグレーディングのパスを通ってから画面に届きます。
実際のソースからのコード付きで、全体の作り方を記事にまとめました：three.js で歩ける 3D の森を作る。
はい。Forest Stroll は完全無料で、ブラウザの中でそのまま動きます。ダウンロードもインストールも登録も必要ありません。
はい。WebGL 2 に対応した最近のモバイルブラウザなら動きます。地面をタップすると彼女が歩き出し、1 本指のドラッグで視点を回し、ピンチでズームします。かなり重いシーンなので、古いスマホではフレームレートが下がることがあります。
地面の好きな場所を左クリックすると、彼女がそこへ歩いていきます。右ドラッグまたは左ドラッグで彼女の周りに視点を回し、スクロールかピンチで樹冠の高さから花の目線までズームできます。ドラッグで彼女が歩き出すことはなく、短くきれいなクリックだけが行き先の指示になります。
WebGL 2 上の three.js（r160）です。ダウンロードする 3D モデルや画像テクスチャはありません。地形、木、草、水、キャラクター、すべてのテクスチャは、ページの読み込み時にコードで生成されます。 仕組みはthree.js で歩ける 3D の森を作るで解説しています。
このシーンは毎フレーム、約 25,000 本の草と 20,000 枚以上のリーフカードを描き、さらにソフトシャドウ、透けて屈折する水、ブルーム、カラーグレーディングを重ねています。古い GPU や内蔵 GPU にはこれが負担になることがあります。全画面をやめるか、ブラウザのウィンドウを小さくすると、描くピクセルが減るので軽くなります。
遊んだりリンクを共有したりするのは大歓迎です。コードや素材の複製、埋め込み、商用利用には書面による許可が必要です。下の著作権と利用についてをご覧いただくか、service@shengyugames.com までメールでご連絡ください。
『Forest Stroll（森林漫歩）』のシーン、アート、アニメーション、ソースコードは © 2026 ShengyuStudio（胜遇工作室）。All rights reserved.
自由に遊んで、リンクを友達に共有していただくのは大歓迎です。ただし書面による許可なく、このページのコードやアート素材を複製・転載・再配布すること、他サイトへの埋め込み、アプリへの同梱、商品の一部としての販売など商用目的で利用することはご遠慮ください。
商用ライセンス、素材の利用許諾、コラボのご相談は service@shengyugames.com までメールでどうぞ。お気軽にご連絡ください。
このシーンはオープンソースライブラリ three.js を使って作られています（MIT ライセンス）。その著作権は three.js の各作者に帰属します——ライセンス全文。上記の権利表示は、このオープンソース部分には及びません。
私たちは Steam で PC ゲームを作っています——仙侠テーマのデッキ構築が 1 本、テンポの良いオートファイア・サバイバルが 1 本、そして開発中の 3D 無人島サバイバル建築が 1 本。あるいは、この一角にあるもう一つの小さな作品もどうぞ。
こちらもあります：Island Shore、Storm Ahead、Stickman Spear Run。