#初めての開発者

私はこれまでにいくつかの個人ウェブサイトを構築したことがありますが、これほど大きな挑戦は初めてでした。今日はライブが始まりました。私の駆け出しのレコードレーベルのカタログを探索するための 1 ページのアプリ。 Bandcamp を統合していますが、アルバム ナビゲーションに Three.js を使用して、より「箱掘り」のような雰囲気を与えています。これは 4,500 行のコード、つまり 12 個の JavaScript モジュールです。 1週間かかりました。私はコーディング パートナーとして Claude.ai だけを使用して一人で作業しました。これは素晴らしいツールだと言わざるを得ませんが、欠点がないわけではありません。
とにかく、ぜひ私のサイトにアクセスして、ご意見をお聞かせください。ルートを確認したい場合は、コードを GitHub に公開して保存しました。ただし、サイトは次のとおりです: 最終レコードではありません

クロードは私にいくつかのことを追加してほしいと言いました:

技術的な詳細

GitHub でコード NotTheFinalVinyl を確認してください
ライブサイト: notthefinalvinyl.net

建築?️

Three.js を使用したカスタム レコード インタラクション システムを中心に構築されており、バニラ JavaScript の約 4,500 行が 12 の主要モジュールに分割されています。

// Example from VinylManager.js - Physics-based vinyl sliding
const animate = (timestamp) => {
    if (!startTime) startTime = timestamp;
    const elapsed = (timestamp - startTime) / this.slideOutDuration;

    if (elapsed 



<h2>
  
  
  コアコンポーネント?
</h2>

• SceneManager: Three.js セットアップと WebGL 処理
• VinylManager: アニメーションと状態を記録します
• EventHandler: タッチ/マウス/キーボードのインタラクション
• InfoDisplay: Bandcamp の統合と UI
• アルバム: 3D ビニール メッシュとテクスチャ管理

技術的な課題は解決されましたか?

1. パフォーマンス

   • テクスチャのプリロード
   • 効率的なアニメーションシステム
   • 重なり合うビニールのスマートなレンダリング順序

2. モバイルサポート

   • タッチジェスチャー
   • 動的なビューポートのスケーリング
   • モバイル GPU の最適化

3. 統合

   • Bandcamp iframe 埋め込み
   • Facebook ブラウザの検出
   • コンポーネント間の状態管理

学習ポイント ?

初めての主要な JavaScript プロジェクトとして、次のことを学びました。

• WebGL/Three.js の基礎
• 複雑なアニメーションのタイミング
• 状態管理パターン
• パフォーマンスの最適化
• モバイルファースト開発

今後の予定は？

• ビニールの反射効果を追加する
• よりインタラクティブな動作
• パフォーマンスの強化
• モバイル体験の向上

以下に関するフィードバックを求めています:

1. コード構成
2. Three.js のベスト プラクティス
3. パフォーマンスの最適化
4. モバイル UX の改善

GitHub の旅

Git ワークフローをまだ学習中 - リポジトリには私の学習プロセスが反映されています。自由に調査して改善を提案してください。特に以下に関するフィードバックに興味があります:

• プロジェクトの構造
• ドキュメント
• Git のベスト プラクティス
• テストが近づいています

threejs #webgl #javascript #frontend #webdev #showdev #animation #ux

「

」

以上が#初めての開発者の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。