Three.js光源与轨道控制实战指南

1. 为什么Three.js的光源与轨道控制如此重要？

在WebGL的世界里，Three.js就像一位魔术师，把复杂的3D编程变成了前端开发者触手可及的艺术。而光源和相机控制，正是这个魔术中最关键的两根魔杖。想象一下，你精心建模的3D场景就像一间没有窗户的黑屋子——没有光源，再精美的模型也只是一片漆黑；而没有灵活的视角控制，用户就只能像被绑在固定位置的观众，无法全方位欣赏你的作品。

我刚开始接触Three.js时，曾花了三天时间调试一个汽车模型，结果发现是环境光强度设成了0。这种"新手陷阱"在光源系统中比比皆是。而轨道控制器OrbitControls更是每个3D项目的基础设施，它让用户能够：

• 用鼠标拖拽旋转查看物体
• 滚轮缩放调整距离
• 平移移动观察位置

2. Three.js光源系统全解析

2.1 四大基础光源类型实战

Three.js提供了四种基础光源类型，就像画家调色板上的原色：

1. 环境光(AmbientLight)：

   javascript复制const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
   scene.add(ambientLight);
   

   • 特点：均匀照亮所有物体，没有方向性
   • 参数：颜色(hex)，强度(0-1)
   • 常见坑：单独使用时场景会显得很平，通常需要配合其他光源

2. 平行光(DirectionalLight)：

   javascript复制const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
   directionalLight.position.set(1, 1, 1);
   scene.add(directionalLight);
   

   • 模拟太阳光，所有光线平行
   • 需要设置position属性决定照射方向
   • 性能消耗低，适合室外场景

3. 点光源(PointLight)：

   javascript复制const pointLight = new THREE.PointLight(0xff0000, 1, 100);
   pointLight.position.set(5, 5, 5);
   scene.add(pointLight);
   

   • 像灯泡一样向四周发射光线
   • 第三个参数是衰减距离
   • 可投射阴影（需额外设置）

4. 聚光灯(SpotLight)：

   javascript复制const spotLight = new THREE.SpotLight(0xf