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

嘿，我一眼就发现你代码里的核心问题了——你在创建OrbitControls之后立刻调用了controls.dispose()！这个方法是用来在你彻底不需要控制器时清理资源的，刚创建就销毁它，控制器自然完全没法工作，这也是为什么控制台没报错但交互失效的原因。

接下来咱们一步步修复：

步骤1：移除错误的controls.dispose()调用 #

直接删掉controls.dispose();这一行，初始化阶段完全不需要这个操作。

步骤2：修正渲染循环逻辑 #

使用EffectComposer时，不能再用原来的renderer.render(scene, camera)渲染场景，必须替换成composer.render()，同时要确保在渲染前更新控制器状态：

function animate() {
    requestAnimationFrame(animate);
    // 先更新控制器状态，确保交互实时响应
    controls.update();
    // 用后处理渲染器替代原生渲染
    composer.render();
}
animate();

步骤3：优化代码顺序（可选但更清晰） #

建议把控制器初始化放在后处理之前，逻辑会更顺畅，也方便后续配置控制器参数：

// 先初始化控制器
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 可以按需配置控制器，比如启用阻尼让视角更顺滑
controls.enableDamping = true;

// 再初始化后处理流程
composer = new THREE.EffectComposer(renderer);
renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

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

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

额外提醒 #

• controls.reset()建议只在需要重置视角的场景下调用（比如绑定按钮点击事件），初始化阶段没必要调用，除非你明确需要默认回到初始视角。
• 启用阻尼效果后，必须在动画循环里持续调用controls.update()，否则控制器会卡顿。

这样修改后，你的OrbitControls应该就能正常响应交互，同时模糊效果也能正确渲染了。

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