#나의첫개발자

개인 웹사이트를 몇 개 구축해 본 적은 있지만 이 정도 규모의 도전은 해본 적이 없습니다. 오늘 생방송되었습니다. 내 신생 음반사의 카탈로그를 탐색하기 위한 한 페이지 앱; 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);
    }
}

핵심 구성요소?

• 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!