# ThreeJS Journey

**Repository Path**: pkmer/three-js-journey

## Basic Information

- **Project Name**: ThreeJS Journey
- **Description**: ThreeJS Journey
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-29
- **Last Updated**: 2025-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[B 站 Three.js 课程](https://www.bilibili.com/video/BV13jU4YoErU/?spm_id_from=333.337.search-card.all.click&vd_source=f9745f81b4981bb1eca8c2d80be33ff9)

[官方网站](https://threejs-journey.com/#summary)

[Github 官方仓库](https://github.com/pmndrs/threejs-journey)

[其他学生的练习代码作为官方课程的代替](https://github.com/Singh233/ThreeJs-Journey/tree/main)

# 阶段三：三维开发与高级特效学习计划

## 1. Three.js 基础与进阶

- 理解 Three.js 的核心概念（场景、相机、光源、网格、材质、纹理等）
- 掌握常用几何体、相机控制、灯光类型与阴影实现
- 学习加载外部模型（如 glTF、OBJ）与动画控制
- 推荐实践：用 Three.js 实现一个基础的 3D 场景，包含模型加载与简单交互

## 2. React Three Fiber（R3F）

- 了解 React Three Fiber 的设计理念与基本用法
- 掌握 R3F 的 Canvas、useFrame、useThree、extend 等核心 API
- 学习如何将 Three.js 生态的对象和材质与 React 组件结合
- 推荐实践：将已有 Three.js 场景迁移到 R3F，实现组件化管理

## 3. Drei 与常用辅助库

- 熟悉 @react-three/drei 提供的常用组件（如 OrbitControls、useTexture、Plane、Environment 等）
- 学习使用 useAspect、useTexture、useGLTF 等 Hooks 简化开发
- 推荐实践：用 Drei 快速搭建一个带有天空盒、地面和交互的场景

## 4. GLSL 着色器与自定义材质

- 理解 GLSL 基础语法、变量类型、main 函数、uniform/varying 等
- 学习如何在 R3F 中自定义 ShaderMaterial 或使用 shaderMaterial 封装
- 掌握常见特效实现（如波浪、噪声、动态变形、透明度控制等）
- 推荐实践：实现一个自定义的波浪或呼吸动画材质

## 5. 后期处理与特效

- 了解 @react-three/postprocessing 的用法与常见特效（如景深、辉光、色调映射等）
- 学习 EffectComposer、DepthOfField、Vignette 等组件的参数与组合
- 推荐实践：为场景添加景深、辉光等后期特效，提升画面表现力

## 6. 项目实战与进阶

- 综合运用上述知识，完成一个具有交互、动画和特效的 3D 小项目
- 尝试优化性能（如实例化、合批、LOD、延迟加载等）
- 了解 WebGL 性能调优与常见问题排查方法

---

### 推荐资料

- [Three.js 官方文档](https://threejs.org/docs/)
- [React Three Fiber 官方文档](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)
- [Drei 官方文档](https://docs.pmnd.rs/drei/introduction)
- [GLSL 基础教程](https://thebookofshaders.com/)
- [Postprocessing 文档](https://docs.pmnd.rs/react-postprocessing/introduction)

### 建议学习顺序

1. Three.js 基础 → 2. R3F 基础 → 3. Drei 辅助 → 4. GLSL 着色器 → 5. 后期处理 → 6. 项目实战

每个阶段建议配合动手实践，遇到问题多查官方文档和社区资源。祝你学习顺利！

## 目标

做出 zustand 的官网