DESIGN/设计资源
adrianhajdin/iphone
用 Three.js 和 GSAP 把 iPhone 15 Pro 官网的 3D 动画搬到你的浏览器里Recreate the stunning iPhone 15 Pro website with Three.js 3D models and GSAP scroll animations
复刻苹果iPhone 15 Pro官网的网页教程，教开发者做出3D动画交互。A tutorial that rebuilds the iPhone 15 Pro website with Three.js 3D models and GSAP scroll animations, helping developers learn advanced web animations.
怎么装：Install: git clone https://github.com/JavaScript-Mastery-Pro/iphone-doc.git
02 / 现在的位置02 / Why now
首次发现FIRST SEEN
03 OCT 202603 OCT 2026
增长GROWTH
+0.1%+0.1%
1.6k → 1.6k stars · 3 个快照1.6k → 1.6k stars · 3 snapshots
状态STATUS
长期未更新Not updated
1650 颗星、316 次复制，这个教程项目在发布后有不少开发者收藏，当学习参考不算冷门。Created in March 2024 and last updated in July 2024
03 / 它能帮你做什么03 / What it helps you do
照着教程复刻苹果手机展示页
做出能转动的手机模型
让动画跟着页面滚动播放
切换手机配色和宣传短片
在电脑上运行这个演示站
Clone the repository and run it locally
Modify 3D model colors and materials
Customize scroll-triggered animations
Add new iPhone color variants
Learn to structure a Three.js scene with React
04 / 安装04 / Install
$ README 里给出的安装方式。The installation method given in the README.
两种装法选一个即可 —— 上面那条给命令行用户，下面那条给写代码的用户。Pick one of the two — the first is for command-line users, the second for people writing code.
先 git clone https://github.com/JavaScript-Mastery-Pro/iphone-doc.git，进入目录后依次执行 npm install 和 npm run dev，然后浏览器打开 http://localhost:5173 就能看到页面。Clone the repository, install dependencies with npm, and run the dev server.
05 / 限制与风险05 / Limits and risk
风险不是警告，是可信度的一部分。以下结论只基于文档静态扫描，我们不会执行项目里的任何代码。Risk here is evidence, not an alarm. These findings come from static scanning of the docs; we never execute a project’s code.
限制LIMITS
未知Unknown
静态扫描STATIC SCAN
在 README、SKILL.md 和依赖清单中没有匹配到已知风险模式。No known risk patterns matched in the README, SKILL.md or dependency list.这不等于安全that does not mean it is safe，只能说明文档里没写。 — only that the docs do not mention it.
静态扫描未发现明显风险，但不代表安全The static scan did not detect any known risk patterns, but this does not guarantee the project is safe. Review the code before running it.
这里只做静态扫描：读 README、SKILL.md 和依赖清单，不执行代码。没有命中不代表安全。This is static scanning only: we read the README, SKILL.md and dependency list, and never execute code. No findings does not mean safe.
依赖：Dependencies:@gsap/react, @react-three/drei, @react-three/fiber, @sentry/react, @sentry/vite-plugin, gsap, react, react-dom, three
{
"agents": [],
"apiKey": null,
"docker": null,
"taxonomy": {
"scores": {
"design": 8,
"ai-tools": 0,
"dev-tools": 1,
"indie-web": 0,
"skill-agent": 0,
"productivity": 0
},
"primary": "design",
"secondary": null
},
"localRuntime": "install: git-clone",
"skillMdTotal": 0,
"skillMdErrors": [],
"treeTruncated": false,
"categoryScores": {
"data": 0,
"agent": 0,
"media": 1,
"design": 3,
"browser": 0,
"devtool": 1,
"security": 0,
"marketing": 0,
"productivity": 1
},
"classification": [],
"scannedSources": [
"readme"
],
"skillMdFetched": 0
}