Live Demo / 在线体验 / 실시간 데모:
👉 https://mrfeixiang.github.io/christmas-tree-iphone/
A minimalist, mobile-first 3D web experience rendered with Three.js. Designed with a "Black & Gold" aesthetic, this project allows users to transform a scattered particle galaxy into a spiral Christmas tree with a simple tap. It serves as a digital greeting card where users can upload a photo to be displayed at the center of the 3D universe.
- Access: Open the Live Demo on your iPhone or Android.
- Transform: Tap anywhere on the empty screen to toggle between "Galaxy Mode" (Scattered) and "Tree Mode" (Spiral).
- Personalize: Tap the Camera Icon (📷) at the bottom to upload a photo. The photo will appear floating in the center of the golden particles.
- Three.js: For high-performance WebGL rendering.
- Vanilla JS: No heavy frameworks, ensuring fast loading on mobile networks.
- Responsive: Optimized logic to adjust particle count based on device type.
这是一个专为移动端优化的极简主义 3D 网页体验，采用 Three.js 构建。项目以“黑金”美学为核心，用户只需轻点屏幕，即可将漫天的金色星河聚合成一颗螺旋上升的圣诞树。这不仅是一个技术展示，更是一张可以自定义的“电子贺卡”，支持上传照片并将其置于 3D 宇宙的中心。
- 访问： 在手机浏览器中打开 在线链接。
- 交互： 点击屏幕任意空白处，粒子将在**“星河模式”（散开）和“圣诞树模式”**（聚合）之间平滑切换。
- 定制： 点击底部的相机图标 (📷) 上传一张照片（如家人合影）。照片将自动生成在金色粒子环绕的中心位置。
- Three.js: 用于高性能 WebGL 渲染。
- 原生 JavaScript: 无冗余框架，确保在移动网络下的秒开体验。
- 响应式设计: 内置逻辑可根据设备类型自动调整粒子数量，平衡画质与流畅度。
Three.js로 제작된 모바일 중심의 미니멀리스트 3D 웹 경험입니다. "블랙 & 골드"의 고급스러운 미학을 바탕으로 디자인되었으며, 사용자는 화면을 탭하는 것만으로 흩어진 입자 은하수를 나선형 크리스마스 트리로 변환할 수 있습니다. 사용자가 직접 사진을 업로드하여 3D 우주의 중심에 띄울 수 있는 디지털 연하장 역할을 합니다.
- 접속: 스마트폰 브라우저에서 라이브 데모 링크를 엽니다.
- 변환: 화면의 빈 곳을 아무 데나 탭하면 "갤럭시 모드"(흩어짐)와 "트리 모드"(모임) 간에 모드가 전환됩니다.
- 커스텀: 하단의 **카메라 아이콘 (📷)**을 눌러 사진을 업로드하세요. 업로드된 사진은 황금빛 입자들로 둘러싸인 중앙에 나타납니다.
- Three.js: 고성능 WebGL 렌더링.
- Vanilla JS: 무거운 프레임워크 없이 제작되어 모바일 환경에서 빠른 로딩 속도 보장.
- 반응형: 기기 사양에 따라 입자 수를 자동으로 조절하는 최적화 로직 포함.
Created by Drbee | 2025