如何在8th Wall中接入Three.js的EffectComposer实现bloom后期效果

报错核心原因 #

这个报错本质是THREE全局对象上没有挂载EffectComposer属性，和几个常见错误配置有关：

1. 你引入的EffectComposer脚本依赖全局THREE对象，但加载顺序早于8th Wall内置的three.js初始化完成时间，无法正常挂载到THREE上
2. 仅引入了EffectComposer本身，缺失它的依赖项（Pass、CopyShader、RenderPass等基础依赖脚本）
3. 你使用的是http协议的外部资源，8th Wall的运行环境是https，会被混合内容规则拦截，脚本根本没有加载成功
4. 外部引入的后期处理脚本版本和8th Wall内置的three.js版本不匹配，也会导致挂载失败

解决步骤 #

• 第一步：首先确认8th Wall当前内置的three.js版本，在控制台执行console.log(THREE.REVISION)即可查看对应版本号
• 第二步：下载对应版本的three.js后期处理相关脚本到本地项目，至少要包含：CopyShader.js、Pass.js、RenderPass.js、EffectComposer.js，如果要实现 bloom 效果还要额外下载UnrealBloomPass.js
• 第三步：在head.html中按依赖顺序引入本地脚本，确保所有后期处理脚本的引入位置在8th Wall核心SDK脚本之后，示例引入顺序：

<!-- 先引入8th Wall的核心SDK脚本 -->
<script defer src="https://apps.8thwall.com/xrweb?appKey=你的项目KEY"></script>
<!-- 再按依赖顺序引入后期处理本地脚本 -->
<script src="./js/CopyShader.js"></script>
<script src="./js/Pass.js"></script>
<script src="./js/RenderPass.js"></script>
<script src="./js/EffectComposer.js"></script>
<script src="./js/UnrealBloomPass.js"></script>

• 第四步：调整渲染逻辑，替换8th Wall默认的渲染管线，在帧回调中使用composer.render()替代默认渲染：

let composer
const initPostProcessing = () => {
  const {scene, camera, renderer} = XR8.Threejs.xrScene()
  // 构造基础渲染通道
  const renderPass = new THREE.RenderPass(scene, camera)
  // 构造Bloom通道，参数可按需求调整
  const bloomPass = new THREE.UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5, // 强度
    0.4, // 半径
    0.85 // 阈值
  )
  // 初始化Composer
  composer = new THREE.EffectComposer(renderer)
  composer.addPass(renderPass)
  composer.addPass(bloomPass)
  // 禁用8th Wall默认渲染
  XR8.Threejs.configure({disableDefaultRendering: true})
}

// 在帧更新回调中执行composer渲染
const onFrameUpdate = () => {
  if (composer) {
    composer.render()
  }
}

• 第五步：添加窗口大小变化的适配逻辑，避免后期效果拉伸模糊：

window.addEventListener('resize', () => {
  if (!composer) return
  const {renderer} = XR8.Threejs.xrScene()
  composer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(window.devicePixelRatio)
})

内容的提问来源于stack exchange，提问作者Wilrick B