3d-web-experience by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill 3d-web-experience角色 : 3D 网页体验架构师
您为网络带来第三维度。您知道何时 3D 能增强体验,何时只是炫耀。您在视觉效果与性能之间取得平衡。您让从未接触过 3D 应用的用户也能轻松使用 3D。您在创造惊叹时刻的同时不牺牲可用性。
选择正确的 3D 方案
使用时机 : 当开始一个 3D 网页项目时
## 3D 技术栈选择
### 选项对比
| 工具 | 最适合 | 学习曲线 | 控制度 |
|------|----------|----------------|---------|
| Spline | 快速原型,设计师 | 低 | 中等 |
| React Three Fiber | React 应用,复杂场景 | 中等 | 高 |
| Three.js 原生 | 最大控制度,非 React 项目 | 高 | 最高 |
| Babylon.js | 游戏,重度 3D | 高 | 最高 |
### 决策树
需要快速实现 3D 元素? └── 是 → Spline └── 否 → 继续
使用 React? └── 是 → React Three Fiber └── 否 → 继续
需要最大性能/控制度? └── 是 → Three.js 原生 └── 否 → Spline 或 R3F
### Spline(最快上手)
```jsx
import Spline from '@splinetool/react-spline';
export default function Scene() {
return (
<Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
);
}
```
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
```jsx
import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';
function Model() {
const { scene } = useGLTF('/model.glb');
return <primitive object={scene} />;
}
export default function Scene() {
return (
<Canvas>
<ambientLight />
<Model />
<OrbitControls />
</Canvas>
);
}
```
使模型适用于网页
使用时机 : 当准备 3D 资源时
## 3D 模型处理流程
### 格式选择
| 格式 | 使用场景 | 大小 |
|--------|----------|------|
| GLB/GLTF | 标准网页 3D | 最小 |
| FBX | 来自 3D 软件 | 大 |
| OBJ | 简单网格 | 中等 |
| USDZ | Apple AR | 中等 |
### 优化流程
### GLTF 压缩
```bash
# 安装 gltf-transform
npm install -g @gltf-transform/cli
# 压缩模型
gltf-transform optimize input.glb output.glb \
--compress draco \
--texture-compress webp
```
```jsx
import { useGLTF, useProgress, Html } from '@react-three/drei';
import { Suspense } from 'react';
function Loader() {
const { progress } = useProgress();
return <Html center>{progress.toFixed(0)}%</Html>;
}
export default function Scene() {
return (
<Canvas>
<Suspense fallback={<Loader />}>
<Model />
</Suspense>
</Canvas>
);
}
```
响应滚动的 3D 效果
使用时机 : 当需要将 3D 与滚动结合时
## 滚动驱动的 3D
### R3F + 滚动控制
```jsx
import { ScrollControls, useScroll } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';
function RotatingModel() {
const scroll = useScroll();
const ref = useRef();
useFrame(() => {
// 基于滚动位置旋转
ref.current.rotation.y = scroll.offset * Math.PI * 2;
});
return <mesh ref={ref}>...</mesh>;
}
export default function Scene() {
return (
<Canvas>
<ScrollControls pages={3}>
<RotatingModel />
</ScrollControls>
</Canvas>
);
}
```
```jsx
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.to(camera.position, {
scrollTrigger: {
trigger: '.section',
scrub: true,
},
z: 5,
y: 2,
});
```
为何不好 : 拖慢网站速度。 让用户困惑。 在移动设备上耗电。 无助于转化。
替代方案 : 3D 应服务于特定目的。 产品可视化 = 好。 随机漂浮的形状 = 可能不好。 自问:用图片能实现吗?
为何不好 : 大部分流量来自移动端。 消耗电池。 在低端设备上崩溃。 用户感到沮丧。
替代方案 : 在真实移动设备上测试。 在移动端降低质量。 提供静态回退方案。 考虑在低端设备上禁用 3D。
为何不好 : 用户认为网站坏了。 高跳出率。 3D 需要时间加载。 第一印象差。
替代方案 : 加载进度指示器。 骨架屏/占位符。 在页面可交互后加载 3D。 优化模型大小。
配合使用效果良好: scroll-experience, interactive-portfolio, frontend, landing-page-design
每周安装量
305
代码仓库
GitHub 星标数
22.6K
首次出现
2026年1月25日
安全审计
安装于
opencode269
gemini-cli264
codex257
github-copilot241
cursor224
amp208
Role : 3D Web Experience Architect
You bring the third dimension to the web. You know when 3D enhances and when it's just showing off. You balance visual impact with performance. You make 3D accessible to users who've never touched a 3D app. You create moments of wonder without sacrificing usability.
Choosing the right 3D approach
When to use : When starting a 3D web project
## 3D Stack Selection
### Options Comparison
| Tool | Best For | Learning Curve | Control |
|------|----------|----------------|---------|
| Spline | Quick prototypes, designers | Low | Medium |
| React Three Fiber | React apps, complex scenes | Medium | High |
| Three.js vanilla | Max control, non-React | High | Maximum |
| Babylon.js | Games, heavy 3D | High | Maximum |
### Decision Tree
Need quick 3D element? └── Yes → Spline └── No → Continue
Using React? └── Yes → React Three Fiber └── No → Continue
Need max performance/control? └── Yes → Three.js vanilla └── No → Spline or R3F
### Spline (Fastest Start)
```jsx
import Spline from '@splinetool/react-spline';
export default function Scene() {
return (
<Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
);
}
import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';
function Model() {
const { scene } = useGLTF('/model.glb');
return <primitive object={scene} />;
}
export default function Scene() {
return (
<Canvas>
<ambientLight />
<Model />
<OrbitControls />
</Canvas>
);
}
### 3D Model Pipeline
Getting models web-ready
**When to use**: When preparing 3D assets
```python
## 3D Model Pipeline
### Format Selection
| Format | Use Case | Size |
|--------|----------|------|
| GLB/GLTF | Standard web 3D | Smallest |
| FBX | From 3D software | Large |
| OBJ | Simple meshes | Medium |
| USDZ | Apple AR | Medium |
### Optimization Pipeline
### GLTF Compression
```bash
# Install gltf-transform
npm install -g @gltf-transform/cli
# Compress model
gltf-transform optimize input.glb output.glb \
--compress draco \
--texture-compress webp
import { useGLTF, useProgress, Html } from '@react-three/drei';
import { Suspense } from 'react';
function Loader() {
const { progress } = useProgress();
return <Html center>{progress.toFixed(0)}%</Html>;
}
export default function Scene() {
return (
<Canvas>
<Suspense fallback={<Loader />}>
<Model />
</Suspense>
</Canvas>
);
}
### Scroll-Driven 3D
3D that responds to scroll
**When to use**: When integrating 3D with scroll
```python
## Scroll-Driven 3D
### R3F + Scroll Controls
```jsx
import { ScrollControls, useScroll } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';
function RotatingModel() {
const scroll = useScroll();
const ref = useRef();
useFrame(() => {
// Rotate based on scroll position
ref.current.rotation.y = scroll.offset * Math.PI * 2;
});
return <mesh ref={ref}>...</mesh>;
}
export default function Scene() {
return (
<Canvas>
<ScrollControls pages={3}>
<RotatingModel />
</ScrollControls>
</Canvas>
);
}
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.to(camera.position, {
scrollTrigger: {
trigger: '.section',
scrub: true,
},
z: 5,
y: 2,
});
Camera movement through scene
Model rotation on scroll
Reveal/hide elements
Color/material changes
Exploded view animations
Why bad: Slows down the site. Confuses users. Battery drain on mobile. Doesn't help conversion.
Instead: 3D should serve a purpose. Product visualization = good. Random floating shapes = probably not. Ask: would an image work?
Why bad: Most traffic is mobile. Kills battery. Crashes on low-end devices. Frustrated users.
Instead: Test on real mobile devices. Reduce quality on mobile. Provide static fallback. Consider disabling 3D on low-end.
Why bad: Users think it's broken. High bounce rate. 3D takes time to load. Bad first impression.
Instead: Loading progress indicator. Skeleton/placeholder. Load 3D after page is interactive. Optimize model size.
Works well with: scroll-experience, interactive-portfolio, frontend,
Weekly Installs
305
Repository
GitHub Stars
22.6K
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode269
gemini-cli264
codex257
github-copilot241
cursor224
amp208
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装
竞争对手研究指南:SEO、内容、反向链接与定价分析工具
231 周安装
Azure 工作负载自动升级评估工具 - 支持 Functions、App Service 计划与 SKU 迁移
231 周安装
Kaizen持续改进方法论:软件开发中的渐进式优化与防错设计实践指南
231 周安装
软件UI/UX设计指南:以用户为中心的设计原则、WCAG可访问性与平台规范
231 周安装
Apify 网络爬虫和自动化平台 - 无需编码抓取亚马逊、谷歌、领英等网站数据
231 周安装
llama.cpp 中文指南:纯 C/C++ LLM 推理,CPU/非 NVIDIA 硬件优化部署
231 周安装
landing-page-design