演示：https://guiguihao.github.io/ThreejsExamples/

在HTML文件中直接引入Three.js:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

由于浏览器安全限制，直接打开本地HTML文件可能无法正常加载纹理等资源。 推荐使用以下方式启动本地服务器:

使用VS Code的Live Server扩展: 安装Live Server扩展后，右键HTML文件选择"使用Live Server打开"

• 创建和管理场景
• 场景图(Scene Graph)
• 场景背景和雾效

• 透视相机(PerspectiveCamera)
• 正交相机(OrthographicCamera)
• 相机控制和运动

• WebGLRenderer基本用法
• 渲染循环
• 渲染配置和优化

• 基础几何体(立方体、球体、圆柱体等)
• BufferGeometry详解
• 自定义几何体创建

• 基础材质类型(MeshBasicMaterial, MeshStandardMaterial等)
• 材质属性和纹理
• 自定义着色器材质(ShaderMaterial)

• 环境光(AmbientLight)
• 方向光(DirectionalLight)
• 点光源(PointLight)
• 聚光灯(SpotLight)
• 半球光(HemisphereLight)

• 纹理加载和使用
• UV映射
• 法线贴图和凹凸贴图
• 环境贴图和反射

• 基础动画循环
• 关键帧动画
• 骨骼动画
• GSAP与Three.js结合

• 点云(Points)
• 粒子动画
• 自定义粒子系统

• OrbitControls使用
• TransformControls使用
• 射线检测(Raycaster)和对象拾取
• 鼠标和触摸事件处理

• 实例化渲染(InstancedMesh)
• LOD(Level of Detail)技术
• 对象池和资源管理
• 渲染性能监控

• EffectComposer使用
• 常见后期特效(泛光、景深等)
• 自定义后期处理着色器

• ammo.js集成
• cannon.js集成
• 碰撞检测和物理模拟

• GLTF/GLB格式加载
• FBX格式加载
• 模型优化和处理

• GLSL基础
• 顶点着色器和片段着色器
• 自定义效果实现

• WebXR API基础
• Three.js与AR/VR结合
• 沉浸式交互体验

• 交互式产品展示
• 3D数据可视化

祝您学习愉快！