🎯 基本概念了解

1. 📚 Three.js简介

• Three.js的历史和发展

  • 由Ricardo Cabello（Mr.doob）于2010年创建
  • 从WebGL的底层封装到高级3D引擎的演变
  • 现已成为最流行的WebGL库之一

• 主要特性和优势

  • 简化WebGL开发，提供高级API
  • 丰富的3D对象和材质系统
  • 强大的动画和交互能力
  • 完善的文档和活跃的社区支持
  • 跨平台和浏览器兼容性好

• 应用场景

  • 3D产品展示和电商
  • 数据可视化
  • 游戏开发
  • 建筑和室内设计
  • 教育和培训模拟

2. 🛠️ 开发环境搭建

• Node.js和npm安装

  • 下载并安装最新LTS版本的Node.js
  • 验证安装：node -v 和 npm -v

• Three.js项目初始化

  # 创建新项目
  mkdir my-threejs-project
  cd my-threejs-project
  npm init -y
  
  # 安装Three.js
  npm install three

• 开发工具选择

  • VSCode + Live Server插件
  • WebStorm或其他支持JavaScript的IDE
  • Chrome开发者工具用于调试

// 简单场景搭建直接用 live-server，更加方便
npx live-server 起个静态服务就可以访问

3. 🌐 WebGL基础

• WebGL渲染管线

  • 顶点着色器（Vertex Shader）处理
  • 图元装配（Primitive Assembly）
  • 光栅化（Rasterization）
  • 片元着色器（Fragment Shader）处理

• 着色器基础

  • GLSL语言简介
  • 顶点着色器的作用
  • 片元着色器的作用
  • Three.js中的着色器材质

• Canvas和WebGL上下文

  • 获取WebGL上下文
  • Canvas尺寸和像素比
  • 视口和裁剪空间

4. 🔍 Three.js核心概念

• 场景（Scene）

  • 场景是所有3D对象的容器
  • 场景图的层级结构
  • 场景的雾效和背景设置

• 相机（Camera）

  • 透视相机（PerspectiveCamera）
  • 正交相机（OrthographicCamera）
  • 相机参数和视角控制

• 渲染器（Renderer）

  • WebGLRenderer的基本配置
  • 渲染循环和动画
  • 渲染器性能优化

• 几何体（Geometry）

  • 内置几何体类型
  • 自定义几何体创建
  • BufferGeometry的使用

• 材质（Material）

  • 基础材质类型
  • 材质属性和纹理
  • 自定义着色器材质

• 场景图和场景树

  • 对象的父子关系
  • 坐标系统和变换
  • 对象组（Group）的使用

• 渲染循环

  • requestAnimationFrame
  • 动画和更新逻辑
  • 性能监控

• 事件系统

  • 鼠标事件处理
  • 射线拾取（Raycaster）
  • 自定义事件和交互