tree-of-life

Tree of Life - HTML5 page for the podman pages service

  • 정적 HTML5 + Three.js 기반 3D 사과나무 (index.html + vendor/three.min.js, 외부 CDN 의존성 없이 자체 호스팅)
  • 저사양 모바일 GPU에서도 부드럽게 동작하도록 로우폴리 지오메트리, 실시간 그림자 대신 블롭 섀도우, 픽셀비 상한(2x) 적용
  • 나무를 마우스/터치로 드래그하면 스프링-댐퍼 물리로 자연스럽게 흔들리고, 일정 세기 이상 흔들면 사과(8개)가 하나씩 떨어짐
  • 가지는 사과가 떨어지고 약 2.6초 후 원래 자리에서 새 사과가 다시 자라남(pop-in 애니메이션) — 떨어진 사과가 바구니에 들어갔는지 여부와 무관하게 독립적으로 재생됨
  • 나무 아래 바구니에 사과가 떨어지면 자동으로 담기고(빗나가면 잔디에 튕겼다가 사라짐), 5개가 모이면 축하 메시지 + 컨페티가 뜨고 약 2.8초 후 바구니가 비워지며 반복 가능

pages 서비스 연동

  1. https://pages.du5t.xyz 관리자 대시보드에서 새 페이지 생성 (name, slug 지정)
  2. 해당 페이지의 Git 연동 설정에서 다음 값 입력
    • repo owner: gm
    • repo name: tree-of-life
    • branch: main
    • site root: (비워둠, 저장소 루트가 그대로 서빙됨)
  3. 저장하면 Gitea 웹훅이 자동 등록되고, 이후 main 브랜치에 push할 때마다 자동 재배포됨
  4. 최초 배포는 페이지 상세의 "수동 재배포" 버튼으로 트리거 가능
Description
Tree of Life - HTML5 page for the podman pages service
Readme 493 KiB
Languages
HTML 100%