間違いなく最もクールな3Dウェブサイトのひとつ

 (bruno-simon.com)
30 ポイント 投稿者 GN⁺ 2025-12-10 | 4件のコメント | WhatsAppで共有
  • ウェブ開発者 Bruno Simon が制作した3Dポートフォリオサイトで、ユーザーが 車を運転して探検する インタラクティブな環境を提供
  • Three.js をベースに構築され、WebGLとWebGPUの両方を活用した リアルタイム3Dレンダリング を実現
  • サイト内には 実績システム、隠し要素、訪問者メッセージ（Whisper） 機能など、ゲーム的な要素を収録
  • GitHub で全コードとBlenderファイルが MITライセンス で公開されており、音楽は CC0ライセンス で自由に利用可能
  • ウェブ技術と創造的なインタラクションを組み合わせた事例として、3Dウェブ体験の可能性 を示す代表的なポートフォリオ

Bruno Simonの3Dポートフォリオ概要

  • ウェブベースの3D世界を探検しながら、制作者のプロジェクトや実験を体験できる インタラクティブポートフォリオ 形式
    • ユーザーは車を操作して仮想空間を走り回り、さまざまなオブジェクトと相互作用できる
    • 「Don’t break anything!」という文句で、遊び心のある探検ムードを演出
  • WASD、矢印キー、スペース、Enterなどのキーボード操作 と タッチ・ゲームパッド入力 の両方に対応
    • 移動、ジャンプ、ブレーキ、ブースター、クラクション、サスペンションなど多様な操作機能を提供

ゲーム的要素と実績システム

  • サイトには 38個の実績（Achievements） があり、特定の行動によって達成可能
    • 例: 「Traveler」（全エリア訪問）、「Cookie Clicker」（クッキーを1000回受け入れ）、「Flip of faith」（バックフリップ成功）など
    • 走行距離、天候体験、爆発する箱の破壊など、さまざまな条件を含む
  • 実績達成時間と進捗率がリアルタイムで表示され、サーバーのランキング（Leaderboard） 機能も存在
    • ただし、サーバーがオフラインの場合はスコアを保存できない

Whisperおよびコミュニティ機能

  • 訪問者は Whisper 機能を通じて短いメッセージを残せる
    • 最大30文字、ユーザー1人あたり1件のメッセージが可能
    • 新しいメッセージが追加されると古いメッセージは削除される
    • 暴言禁止で、国別フラグの選択も可能
  • Whisperサーバーがオフラインの場合、メッセージ機能は無効化される

技術スタックとオープンソース構成

  • 3Dレンダリングは Three.js で実装
    • Three.js は mr.doob が作ったライブラリで、Sunag が追加した TSL（Three.js Shading Language） によりWebGLとWebGPUの両方をサポート
  • 物理エンジン は Rapier、オーディオ は Howler.js、フォント は Amatic SC と Nunito を使用
  • 全ソースコードは GitHub（brunosimon/folio-2025） で公開されており、MITライセンス が適用
    • Blenderファイルも含まれており、自由に修正・学習できる
    • サーバーコードはセキュリティ上非公開だが、ポートフォリオはサーバーなしでも動作する

音楽および追加資料

  • 背景音楽は Kounine がポートフォリオのために特別制作
    • CC0ライセンス で配布されており、自由にダウンロードして再利用可能
    • GitHubリポジトリ内の /static/sounds/musics パスで提供
  • Three.js Journey というオンライン講座を通じて Three.js の学習資料も提供
    • Three.js を活用した3Dウェブ制作の全工程を扱う
  • YouTube Devlogシリーズ を通じてポートフォリオの開発過程を記録
    • 完成後も最後の動画制作を継続中

全体的な意義

  • Bruno Simonのポートフォリオは、ウェブ技術、ゲームインタラクション、芸術的表現 が結びついた事例
  • オープンソースと自由ライセンスを通じて、学習・再利用可能な3Dウェブプロジェクト として活用可能
  • Three.jsエコシステム と WebGPUベースのレンダリング の実装例として、次世代ウェブグラフィックスの方向性を示す作品

関連記事

4件のコメント

 
m00nlygreat 2025-12-10

ただのゲームじゃん..
 
wedding 2025-12-10

会社の中核プロジェクトでtjsを使おうという意見を無視して、babylon.jsを使おうと言っていた開発担当取締役さん……自分の決定に責任を取るどころか、会社と人材を引き抜いて新しい会社を立ち上げた開発担当取締役さん……お元気にしていますか？
 
xguru 2025-12-10

テストのためにしばらく開いておいたら……私のM1 MacBookで飛行機が離陸しそうです。とはいえ、素晴らしいのは確かです。
 
GN⁺ 2025-12-10
Hacker Newsの意見
  • ローディングの円が満ちても、実際にはさらに数秒かかる。
    1〜2回リロードするとちゃんと表示されるし、全体としては素晴らしい出来。
    ただ、もっと遠くまでズームアウトできるとよかった。Brunoに賛辞を送りたい
  • 読み込みが遅い人向けに説明すると、これはポートフォリオサイトで、居心地のよいゲーム風のAWSD操作でジープのような車を運転して走り回る構成。
    各ソーシャルメディアを象徴する小さな神殿オブジェクトがあり、車で体当たりすると倒れるが、リンクはそのままクリック可能。
    ポータルに突っ込むと「混沌の神に生け贄を捧げる」カウンターが増えるなど、グローバル状態も存在する。
    全体としてアートスタイルに一貫性があり、5分ほど探索した限りではかなり完成度が高く感じられた。
    ただし、HNのタイトルにあるような「最もクールな3Dウェブサイト」というより、非常によくできたポートフォリオサイトと見るのが適切だと思う
    • iPhoneのタッチ操作で遊んだが、Genshin Impactをやっている感じだった
    • iOSのddgブラウザでも驚くほどよく動いた。かなり印象的だった
    • AWSDはWASDのタイプミスなのか聞きたくなった
  • 25年前に戻ったら、15歳の自分はこういう「ゲーム」に何十時間も注ぎ込んでいたと思う。
    昔シリアルの箱に入っていた無料ゲームのChex Questでもそうだった。
    でも今は、サイトを30秒ほど見回して「いいね」と思ったらすぐ閉じてしまった。
    おそらく (A) 時間の価値の変化、(B) ゲームへの没入基準の上昇、(C) すでにゲームにあまりにも多くの時間を使ってきたこと、のどれかだろう
    • 私もChexQuestが本当に大好きだった。最近また遊んだし、シアトルのRE-PCで1ドルのCDを見つけて即買いした
    • 昔はゲームへのアクセス性が今よりずっと低かった気がする。今はLonely Mountain: Downhillのような、もっと充実したゲームがたくさんある
    • 最近は何かをしていないことへの罪悪感が強くて、結局何もろくにできなくなる
    • 結局のところ、理由は歳を取ったことかもしれない
    • このサイトは、以前HNに投稿されていたThe Messengerを思い出させる。そっちのほうが好きかもしれない
  • サイトはクールだが革新的ではない。
    この10年でthree.js/babylon.jsのデモは数え切れないほどあったし、これは上位10%くらいの出来。
    面白くて品質も高いが、新しいものはなく、情報伝達の効率は低い。
    インディー3Dゲームと比べると、完成度の面でもまだ距離がある
    • ブラウザのタブがクラッシュした
    • OPは「最も革新的」ではなく「最もクールな」ウェブサイトと言っていた。同レベルの他のデモも共有してもらえるのか気になる
  • BrunoのThreejs講座は素晴らしい。今ちょうど2/3くらいまで受講しているが、体系的でドキュメントもよく整っている。
    threejs初心者のおすすめに意味があるなら、強くおすすめしたい
  • Chromeでは動かず、タブがフリーズした
    • 自分のW11とMacOS 15.7.2ではChromeで問題なく動いた
    • LinuxのFirefoxでも完璧に動作した
    • LinuxのChromeではWebGPUサポートが無効化されている。実装状況ドキュメント参照
    • Edgeでは少し固まったあと復帰して、3Dシーンが表示された
    • WindowsのChrome バージョン 142.0.7444.177では問題なく動作した
  • モバイルでもよく動いて驚いた。
    ただ、指で運転しているとiOSの長押しメニューが頻繁に出てきて、没入感が損なわれる
  • 本当に信じがたいほど楽しくて独創的なサイトだった。
    細かなディテールと楽しさが感じられ、息子と一緒にレースミニゲームで遊んだ。
    20秒記録を出した人たちがどうやったのか気になった。もしかしてスピードブーストがあるのか？
    • Shiftキーがブースト。スタート地点近くのキーボードで操作方法を確認できる
  • 講座は素晴らしいが、このサイトはそれほど感動しない。
    技術の本当の価値は「これによって以前できなかったことができるようになるか」にあると思う。
    たとえば、石器時代の人が鋼鉄の斧を見つけたときに重要なのは、斧そのものではなく冶金技術だ。
    同じように、bitcoinより重要なのは暗号技術であり、threejsより重要なのはそれで何を新しく作れるかだ。
    個人的には、threejs、react-three-fiber、shaderなどを使ってもっと多くのことができると感じる。
    自分にとっての「クールさ」とは、世界を違った見方で見せてくれることだ。
    例としてこのCodePenデモを挙げられる
  • クールではあるが、ウェブサイトとしてのUXはいまひとつ。
    3Dを使う理由を正当化できるほどの探索体験の革新を期待していたが、その点は物足りなかった