Watch

No description

JavaScript 43.9%
TypeScript 37.1%
CSS 18.2%
SCSS 0.5%
Shell 0.3%

Find a file

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
ayue 4f629b6a60 docs: 重写 README，新增首页截图		2026-09-19 11:28:15 +08:00
.vscode	3d	2025-03-01 11:17:24 +08:00
node 转像素获取index	feat: add node pixel-to-index tool (fix hardcoded output path)	2026-09-19 10:53:10 +08:00
public	docs: 重写 README，新增首页截图	2026-09-19 11:28:15 +08:00
src	refactor: split Banner_Scene into LogoModel/CameraContral/Lights	2026-09-19 10:48:37 +08:00
.gitignore	dd	2025-02-08 13:14:15 +08:00
.prettierignore	dd	2025-02-20 16:47:15 +08:00
.prettierrc	dd	2025-03-07 23:09:51 +08:00
eslint.config.mjs	dd	2025-02-20 16:47:15 +08:00
next.config.js	dd	2025-03-07 23:09:51 +08:00
package.json	dd	2025-03-03 09:59:41 +08:00
pnpm-lock.yaml	ff	2025-03-02 18:09:15 +08:00
postcss.config.mjs	Initial commit	2025-02-08 13:09:29 +08:00
README.md	docs: 重写 README，新增首页截图	2026-09-19 11:28:15 +08:00
tailwind.config.ts	dd	2025-02-20 16:47:15 +08:00
tsconfig.json	3d	2025-03-01 11:17:24 +08:00

README.md

DXD Studio

DXD studio（2019 年成立于深圳的设计与创新工作室）官网，品牌设计 / 视觉识别 / 产品包装及摄影展示。首页是一块可交互的 3D Logo Banner（React Three Fiber + GSAP），点击 Logo 会触发旋转 / 缩放 / 位移动画，相机自动跟随。

截图为本地 pnpm dev 实拍。开发模式下页面右上角会叠加 r3f-perf 性能面板、左下角有 Next.js 开发指示器，截图时已将其隐藏；生产构建没有左下角指示器。

路由一览

路由	说明	源码
`/`	首页：3D DXD Logo Banner（`Banner` + `Banner_Scene` + `LogoModel`）	`src/app/page.tsx:116`
`/work`	作品列表（同样复用了 3D Banner）	`src/app/work/page.tsx:3`
`/work/[work_id]`	作品详情：`WorkInfo` + `HolyMoly` 画廊	`src/app/work/[work_id]/page.tsx:10`
`/team`	团队页（含 `@auth` 拦截路由插槽）	`src/app/team/page.tsx:3`
`/famliy`	家庭页（含 `@ana` / `@team` 并行路由插槽）	`src/app/famliy/page.tsx:2`
`/login`	登录页（占位）	`src/app/login/page.tsx:1`
`/api/hello`	健康检查：`GET` 返回 `{ message: 'world' }`	`src/app/api/hello/route.ts:3`
`/api/shopify`	Shopify Admin API 调试验尸：`GET` 查询店铺名称	`src/app/api/shopify/route.ts:28`

技术栈

框架：Next.js 15（App Router）+ React 19 + TypeScript
3D：three、@react-three/fiber、@react-three/drei、@react-three/postprocessing、 camera-controls（fitToBox 跟随鼠标）、maath
动效：GSAP（含 ScrollTrigger）、motion
状态：zustand（useDxdStore：相机、Logo 网格、点击计数、isTestMode 等，见 src/store/DxdStore.js:4）
UI：Radix Themes / Radix UI、tailwindcss、next-themes（明暗切换）、next-view-transitions、 lucide-react、swiper
调试：leva（场景参数面板）、r3f-perf（性能 HUD，默认常驻显示）
其他：Shopify Admin API client（仅调试路由使用）

快速开始

环境要求：Node.js 20+、pnpm 10+。

pnpm install
pnpm dev        # http://localhost:3000

构建与生产运行：

pnpm build
pnpm start      # http://localhost:3000
pnpm lint

项目结构

src/
  app/                  # App Router：page / layout / template / api
    page.tsx            # 首页（3D Banner）
    work/               # 作品列表 + [work_id] 详情
    team/               # 团队页（@auth 并行路由）
    famliy/             # 家庭页（@ana / @team 并行路由）
    login/              # 登录页占位
    api/hello|shopify   # API 路由
  components/
    canvas/             # 3D 相关：Banner / Banner_Scene / LogoModel / CameraContral / Lights
    Logo/               # CircleLogo 等品牌组件
    Header.tsx          # 顶部导航（Home + 明暗切换）
    work/               # HolyMoly / WorkInfo（作品详情组件）
  store/                # zustand：DxdStore / ThreeStore / animeStore / prePath
  hooks/ utils/ helpers/
public/
  three/model/          # 3D 模型（首页 Logo 用 `new4.glb`，见 LogoModel）
  image/                # 站内图片素材
  screenshots/home.png  # README 首页截图
node 转像素 获取index/   # 像素转 index 小工具（独立目录，与主站无关）

3D Banner 说明

入口：src/components/canvas/Banner.jsx:35 创建 <Canvas>，场景组装在 src/components/canvas/Banner_Scene.jsx:20（灯光 Lights + LogoModel + CameraRig）。
模型：LogoModel 加载 /three/model/new4.glb（src/components/canvas/LogoModel.jsx:46），点击 Logo 按 clickTimes % 3 循环播放三段 GSAP 动画，结束后调用 fitToBox() 让相机回正跟随鼠标。
移动端（< 768px）走竖排旋转动画分支，见 LogoModel.jsx:63 / Banner_Scene.jsx:28。
调试开关：useDxdStore 提供 isTestMode / toggleIsTestMode（src/store/DxdStore.js:31），测试模式下放开相机鼠标 / 触摸控制（CameraContral.jsx:244）。注意 <Perf> 性能面板目前是无条件渲染的，上线前如需隐藏请自行按 isTestMode 包一层。

多远端同步推送（可选）

本仓库常用 GitHub（origin）与自建 Forgejo（ayue）双远端。一次推两边的本地配置：

git remote add ayue 'ssh://git@git.ayue.cc:222/ayue/3d-dxd.git'
git remote set-url --add --push origin git@github.com:AhaYue/dxd.git
git remote set-url --add --push origin 'ssh://git@git.ayue.cc:222/ayue/3d-dxd.git'
git branch --set-upstream-to=origin/main main

之后 git push 即同时推送两个远端，git pull 仍从 origin 拉取。注意：git remote 只保存在本地 .git/config，不会随推送同步，新机器 clone 后需重新执行一次。

注意事项

src/app/api/shopify/route.ts 目前硬编码了 Shopify API Key / Secret / Admin Token，且 GET 会把它们原样返回。切勿在生产环境暴露该路由，建议尽快迁移到环境变量并做访问控制。
next.config.js 接近默认配置；famliy、HollyMoly 等命名为历史拼写，改动成本较高故保持原样。

README.md Unescape Escape