
2025/12/10 1:06
Handsdown one of the coolest 3D websites
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
Bruno Simon のポートフォリオは、Three.js で構築されたインタラクティブな 3‑D ウェブワールドを紹介しています。コア体験は、ユーザーが互いに短いメッセージ(最大30文字)を送信できるカスタムウィスパーシステムと、ナビゲーション用の詳細なキーボードおよびゲームパッドコントロールです。コードは MIT ライセンスで GitHub に公開されており(Blender ファイルも含む)、しかしサーバーは現在オフラインのため、スコアやウィスパーを永続的に保存することはできません。このプロジェクトは mr.doob と Sunag の基礎作業を踏まえ、Rapier(物理エンジン)や Howler.js(音声)などのライブラリを組み込んでいます。背景音楽は Kounine(CC0 ライセンス)によるもの、無料フォント(Amatic SC & Nunito)が体験を向上させています。Bruno は YouTube の開発ログで開発洞察も共有し、「Three.js Journey」コースを提供しています。このポートフォリオのオープンソース性は、開発者に自分のウェブアプリケーションで同様のコントロールスキームやインワールドメッセージングシステムを実装するための即座に利用できる参照を提供します。
本文
ブローニョのホーム
ようこそ!
私の名前は ブローニョ・サイモン で、主にウェブ向けのクリエイティブデベロッパーです。
こちらがポートフォリオです―探検して私についてもっと知り、この世界の数々の秘密を発見してください。
そして何も壊さないように!
オプション
- Audio(音声)
- Quality(品質)
- I'm stuck!(詰まった!)
- Reset(リセット)
- Renderer(レンダラー)
- Server(サーバー)
操作方法
| キー / ジェスチャ | アクション |
|---|---|
| WASD または ARROWS | 移動 |
| SHIFT | ブースト |
| CTRL LEFT もしくは B | ブレーキ |
| SPACE | ジャンプ |
| ENTER | インタラクト |
| M | マップ |
| L | ミュート |
| T | ウィスパーを投稿 |
| R | リスポーン |
| NUM KEYS / NUM PAD | ハイドロリクスを起動 |
| LEFT CLICK (DRAG) | カメラ移動 |
| H | クラクション |
タッチ操作
- 片指 – 車を動かす
- 二本指 – カメラ移動 / ズーム
- 車にタップ – ジャンプ
ゲームパッド操作
B ブースト Y ジャンプ X ブレーキ A インタラクト/退出 LT/L2 加速 RT/R2 後方加速 LB/RB/L1/R1 ハイドロリクス ジョイスティック 左 車輪を旋回 ジョイスティック 左 (押し) クラクション ジョイスティック 右 カメラ移動 ジョイスティック 右 (押し) ズームイン/アウト Select リセット Start ポーズ
実績
/ 2h 30min 15s
サーキット
- サーバーは現在オフラインです。 スコアは保存できません。
- 本日はまだスコアがありません。
- リセットまで …
ウィスパーを残す
ウィスパーとは訪問者が残したメッセージです。
- みんなに見られます。
- 新しいウィスパーで古いものは削除されます(最大30件)。
- ユーザー1人につき1件。
- フラグを選択してください。
- スラングは禁止!
- 最大30文字。
サーバーは現在オフラインです。
シーンの裏側
ポートフォリオへようこそ!
技術スタックや構築方法に興味があるなら、以下をぜひご覧ください。
Three.js
Three.js はこの3D世界を描画するために使っているライブラリです。
創始者は mr.doob(X, GitHub)で、数百人の素晴らしい開発者が続いています。その中でも Sunag(X, GitHub)が TSL を追加し、WebGL と WebGPU の両方を利用できるようにしたことで、このポートフォリオが実現しました。
Three.js Journey
Three.js を学びたいなら、こちらの大規模コースがおすすめです。
必要な知識すべてが網羅されており、素敵な作品を作るための基礎が身につきます。
Devlogs
ポートフォリオ開始以来、デブログを公開しています。YouTube チャンネルで確認できます。
まだ最後の動画は制作中ですが、シリーズは完結させています。
コードソース
コードは GitHub で MIT ライセンス下に公開しています。Blender ファイルも含まれていますので、お楽しみください!
サーバー側のコードはセキュリティ上共有していませんが、ポートフォリオはそれなしでも動作します。
音楽
このポートフォリオ専用に制作された音楽は、素晴らしい Kounine(Linktree)によるものです。
現在 CC0 ライセンスで公開されており、自由に利用できます!
ダウンロードはこちらから。
さらにリンク
- Physics library ⇒ Rapier
- Audio library ⇒ Howler.js
- Fonts ⇒ Amatic SC & Nunito
— ブローニョ