つまみを回すと、チャンネルが変わる。
ブラウン管テレビの画面にポートフォリオを映す Web 作品です。Canvas に描いた画面を three.js の湾曲した画面に貼り、つまみでチャンネルを変えられます。
- 5
- チャンネル
- 32
- 画面の分割数
画面ができるまで
- チャンネルを決める
- プロフィールや作品など 5 つのチャンネルの中身を用意します。
- Canvas に描く
- 選んだチャンネルを幅 800px の Canvas に描きます。
- ブラウン管らしくする
- 走査線・ノイズ・流れる帯・周辺の減光を重ねます。
- 曲面に貼る
- Canvas をテクスチャにして、湾曲した画面に貼ります。
- 触れる
- 画面上のリンクをクリックで開けます。つまみを回すとチャンネルが変わります。
作りの要点
- 画面の湾曲
- 画面は 32 分割した平面で、cos 関数で奥行きをずらしてブラウン管のふくらみを出しています。
- 3D の画面の中のリンク
- Canvas に描いた文字のリンクの位置を登録しておきます。クリックした点を画面の座標に直して、どのリンクかを判定します。
- エフェクトも 2D で
- ブラウン管の効果はシェーダーではなく Canvas の上で重ねています。画面の中身と効果を同じ場所で調整できます。
- フレームワーク
- Next.js 16 React 19 Tailwind CSS 4
- 3D
- three.js three-stdlib
- 描画
- Canvas 2D CanvasTexture