#나의첫개발자-JS 튜토리얼-php.cn

#나의첫개발자

Susan Sarandon

풀어 주다： 2024-11-07 12:55:03

원래의

1002명이 탐색했습니다.

#My first dev

개인 웹사이트를 몇 개 구축해 본 적은 있지만 이 정도 규모의 도전은 해본 적이 없습니다. 오늘 생방송되었습니다. 내 신생 음반사의 카탈로그를 탐색하기 위한 한 페이지 앱; Bandcamp를 통합하지만 앨범 탐색에 three.js를 사용하여 좀 더 '상자 파기' 느낌을 줍니다. 4,500줄의 코드와 12개의 JavaScript 모듈입니다. 일주일이 걸렸습니다. 코딩 파트너인 Claude.ai와 단 둘이서 작업을 했습니다. 나는 그것이 놀라운 도구라고 말해야 하지만 약점이 없는 것은 아닙니다.
어쨌든 나는 여러분이 내 사이트를 방문하여 어떻게 생각하는지 말해주길 바랍니다. 당신이 그것에 대해 알고 싶다면 코드를 GitHub에 공개적으로 저장했습니다. 하지만 사이트는 다음과 같습니다: 최종 비닐이 아닙니다

Claude는 제가 몇 가지를 추가하길 원했습니다.

기술 심층 분석

GitHub에서 NotTheFinalVinyl 코드를 확인하세요
라이브 사이트: notthefinalvinyl.net

건축 ?️

Three.js를 사용하여 맞춤형 비닐 레코드 상호 작용 시스템을 중심으로 구축되었으며, 약 4,500줄의 바닐라 JavaScript가 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);
    }
}

로그인 후 복사