Three.js进阶实战：打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验

一、场景设计目标

构建一个包含以下元素的3D场景：

多个几何体（立方体、球体、圆柱体）
动态旋转的聚光灯
可交互的相机视角控制
环境光与阴影效果

二、核心实现步骤

1. 场景基础搭建

javascript 复制代码

// 创建场景、相机、渲染器（基础代码参考文章7、8）
const scene = new THREE.Scene;
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10); // 初始视角抬高并后移
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2. 添加多形态几何体（参考文章5、8）

javascript 复制代码

// 创建立方体（红色）
const cube = new THREE.Mesh(
  new THREE BoxGeometry(2, 2, 2),
  new THREE MeshPhongMaterial({ color: 0xff0000 })
);
scene.add(cube);

// 创建球体（蓝色）
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1.5),
  new THREE MeshPhongMaterial({ color: 0x0000ff })
);
sphere.position.x = 3; // 右侧偏移
scene.add(sphere);

// 创建圆柱体（绿色）
const cylinder = new THREE.Mesh(
  new THREE.CylinderGeometry(1, 1, 3),
  new THREE MeshPhongMaterial({ color: 0x00ff00 })
);
cylinder.position.x = -3; // 左侧偏移
scene.add(cylinder);

3. 配置动态光影系统（核心创新点）

javascript 复制代码

// 环境光（全局基础照明）
const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

// 聚光灯（动态光源）
const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(0, 10, 0); // 顶部光源
spotLight castShadow = true; // 启用阴影
spotLight(angle = Math.PI / 4); // 光束角度
scene.add(spotLight);

// 阴影配置（参考文章9）
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

4. 添加交互控制（参考文章3、7）

html 复制代码

<!-- HTML中引入OrbitControls -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js"></script>

<script>
const controls = new THREEOrbitControls相机, renderer.domElement);
controls.enableZoom = true;
controls.enablePan = true;
</script>

5. 动态动画效果

javascript 复制代码

function animate {
  requestAnimationFrame(animate);
  
  // 动态旋转光源
  spotLight.position.x = Math.sin(Date.now * 0.001) * 5;
  spotLight.position.z = Math.cos(Date.now * 0.001) * 5;
  
  // 物体旋转
  cube旋转.x += 0.01;
  sphere旋转.y += 0.02;
  
  controls.update; // 更新控制
  renderer.render(scene, camera);
}
animate;

三、完整代码示例

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>动态光影场景</title>
  <style>
    body { margin: 0; overflow: hidden; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js"></script>
  
  <script>
    // 场景基础搭建（略，参考上述代码）
    
    // 动态光源动画逻辑（略，参考上述代码）
  </script>
</body>
</html>

四、技术亮点解析

材质选择
使用MeshPhongMaterial替代基础材质，支持高光反射和阴影映射，提升视觉表现力。
阴影优化
通过PCFSoftShadowMap实现柔和阴影，避免锯齿感，同时调整shadowMapSize参数平衡性能与画质。
交互设计
OrbitControls提供自然的鼠标拖拽、缩放和右键重置视角功能，显著提升用户体验。

五、扩展方向

物理引擎集成
引入Cannon.js或Ammo.js实现物体碰撞与重力效果
粒子系统
添加THREE.ParticleSystem创建动态粒子效果（参考文章3）
模型加载
使用GLTFLoader导入复杂3D模型（参考文章3、10）

结语

通过组合使用Three.js的材质、灯光、控制与动画系统，我们能够快速构建出兼具视觉表现力与交互性的3D场景。此案例可作为数据可视化、虚拟展厅等项目的原型基础，开发者可根据需求进一步扩展功能。