#初めての開発者-jsチュートリアル-php.cn

#初めての開発者

Susan Sarandon

リリース： 2024-11-07 12:55:03

オリジナル

1019 人が閲覧しました

#My first dev

私はこれまでにいくつかの個人ウェブサイトを構築したことがありますが、これほど大きな挑戦は初めてでした。今日はライブが始まりました。私の駆け出しのレコードレーベルのカタログを探索するための 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 < 1) {
        // Custom easing function for natural vinyl movement
        const progress = t < 0.5
            ? 4 * t * t * t
            : 1 - Math.pow(-2 * t + 2, 3) / 2;

        album.setVinylPosition(this.slideDistance * progress);
        requestAnimationFrame(animate);
    }
}

ログイン後にコピー