tree-of-life

Tree of Life - HTML5 page for the podman pages service

  • 정적 HTML5 + Three.js 기반 3D 사과나무 (index.html + vendor/three.module.min.js, 외부 CDN 의존성 없이 자체 호스팅)
  • 저사양 모바일 GPU에서도 부드럽게 동작하도록 로우폴리 지오메트리, 실시간 그림자 대신 블롭 섀도우, 픽셀비 상한(2x) 적용
  • 나무를 마우스/터치로 드래그하면 스프링-댐퍼 물리로 자연스럽게 흔들리고, 일정 세기 이상 흔들면 사과(5개)가 하나씩 떨어짐
  • 떨어진 사과는 바닥에 닿아 통통 튄 뒤 멈추고, 약 2.6초 후 원래 매달려 있던 자리에서 다시 자라남(pop-in 애니메이션)

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%