Composer 无法直接控制相机焦距和虚化，因其非渲染引擎、不暴露3D上下文；Three.js中需用BokehPass等后处理通道配合深度图与相机图层联动，通过uniform插值实现物理景深。
Composer 是前端 UI 框架（如 Vue 的 @vue/composition-api 或 React 的 useEffect 等组合式逻辑抽象），它本身不处理 3D 渲染、相机控制或景深虚化——这些属于 WebGL（Three.js）、WebGPU 或视频编辑软件（如 After Effects）的范畴。
为什么 Composer 无法直接控制相机焦距和虚化
Composer 不是渲染引擎，也不暴露 3D 场景上下文：
-
Composer在 Three.js 中其实是EffectComposer，属于后处理链管理器，但它本身不定义相机参数，只接收已渲染的帧做后期（如BokehPass可模拟虚化，但需配合真实相机与深度图） - Vue/React 的
composer（如defineComponent+setup）完全运行在 DOM 层，无 WebGL 上下文，无法访问camera.focalLength或depthTexture - 所谓“关键帧控制”，本质是随时间插值更新相机属性（如
fov、focusDistance）或后处理参数（如bokehPass.uniforms.focus.value），这需要动画循环（requestAnimationFrame）和渲染管线协同
Three.js 中用 EffectComposer 实现焦距虚化的关键步骤
如果你实际想用 Three.js + EffectComposer 做景深虚化，关键不在 Composer 本身，而在 Pass 配置与相机联动：
- 必须使用支持景深的相机：不是
PerspectiveCamera默认就支持虚化，而是要搭配BokehPass或DepthOfFieldPass，且启用camera.layers.enable(1)并让虚化对象在对应图层 - 虚化强度由多个 uniform 控制：
bokehPass.uniforms.focus.value（焦点距离）、bokehPass.uniforms.aperture.value（光圈大小）、bokehPass.uniforms.maxBlur.value（最大模糊半径） - 关键帧动画应驱动这些 uniform，而非直接改
camera.fov（改 fov 是变视角，不是调焦）；例如用gsap.to(bokehPass.uniforms.focus, { value: 5, duration: 2 }) - 注意性能：BokehPass 是高开销后处理，需确保
renderer.setPixelRatio(window.devicePixelRatio)合理，且避免每帧重创建 Pass
常见错误：把 DOM 动画当 3D 焦距控制
有人尝试用 Vue 的 transition 或 CSS filter: blur() 模拟虚化，这会导致：
-
blur(5px)是全屏均质高斯模糊，无法实现近实远虚的物理景深效果 - 无法响应相机移动：当相机靠近某物体时，CSS blur 不会自动聚焦该物体，缺乏深度图依据
- 与 3D 光照、阴影完全脱节，叠加后出现明显割裂感
- 若强行在
onBeforeRender里用renderer.domElement.style.filter动态设 blur，会触发强制重排，严重拖慢帧率
真正可控的焦距虚化，绕不开深度纹理生成、散景采样和后处理通道调度。Composer（无论哪个生态）只是链条中一环，别让它背锅。
