three.js添加EffectComposer模糊后OrbitControls失效求助

嘿Gabriele，我来帮你搞定这个控制器失效的问题！看了你的代码，我发现几个关键问题，咱们一步步来修复：

问题根源分析 #

1. 过早调用controls.dispose()：你刚初始化OrbitControls就立刻调用了dispose()方法，这个方法是用来销毁控制器、移除所有鼠标/触摸事件监听的，相当于刚创建就把控制器“废掉”了，自然没法响应交互操作。
2. 渲染逻辑未切换到EffectComposer：如果你的动画循环里还是在调用renderer.render(scene, camera)而不是composer.render()，不仅模糊效果出不来，也可能导致控制器的交互状态无法正确同步。
3. controls.update()仅调用一次：控制器需要在每一帧动画里更新状态，只调用一次的话，阻尼、视角同步这些功能都会失效。

修正后的代码示例 #

1. 正确初始化OrbitControls #

// 初始化控制器，绑定到渲染器的DOM元素
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 可选：启用阻尼让视角移动更平滑
controls.enableDamping = true;
// 不要在这里调用dispose()！

2. 正确配置EffectComposer #

// 初始化 composer
const composer = new THREE.EffectComposer(renderer);
// 添加基础渲染通道
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

// 配置水平模糊通道
const horizontalBlur = new THREE.ShaderPass({
  ...THREE.HorizontalBlurShader,
  uniforms: {
    ...THREE.HorizontalBlurShader.uniforms,
    h: { value: 1.0 / window.innerWidth * window.devicePixelRatio }
  }
});
composer.addPass(horizontalBlur);

// 配置垂直模糊通道
const verticalBlur = new THREE.ShaderPass({
  ...THREE.VerticalBlurShader,
  uniforms: {
    ...THREE.VerticalBlurShader.uniforms,
    v: { value: 1.0 / window.innerHeight * window.devicePixelRatio }
  }
});
composer.addPass(verticalBlur);

3. 正确的动画循环 #

function animate() {
  requestAnimationFrame(animate);
  
  // 每一帧都要更新控制器状态
  controls.update();
  
  // 用composer执行渲染，替代原来的renderer.render
  composer.render();
}
animate();

额外提示 #

如果窗口大小变化，记得同时更新composer的尺寸和模糊shader的uniform值，避免模糊效果变形：

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  
  renderer.setSize(window.innerWidth, window.innerHeight);
  composer.setSize(window.innerWidth, window.innerHeight);
  
  // 更新模糊shader的参数
  horizontalBlur.uniforms.h.value = 1.0 / window.innerWidth * window.devicePixelRatio;
  verticalBlur.uniforms.v.value = 1.0 / window.innerHeight * window.devicePixelRatio;
});

内容的提问来源于stack exchange，提问作者Gabriele Sabatino