Три js EffectComposer + BloomPass не работают

Question

Невозможно для жизни меня выяснить, что не так (особенно с тем, как недокументированы эти два файла .js), но я включил EffectComposer и BloomPass в свой проект, и я пытаюсь назвать это как так:

parameters = { bloomStrength: 1.3, bloomFactor: 1.0,} 

      var renderPass = new THREE.RenderPass(scene, camera); 
      var copyPass = new THREE.ShaderPass(THREE.CopyShader); 
      copyPass.renderToScreen = true; 

      composer = new THREE.EffectComposer (renderer); 
      composer.addPass(renderPass); 
      composer.addPass(copyPass); 

      var effectBloom = new THREE.BloomPass (3, 25, 5, 256); 
      composer.addPass (effectBloom); 

BloomPass.js выдает ошибку сам по себе (не в пределах моего кода) о том, что «Uncaught TypeError: не удается прочитать свойство„прототип“неопределенных на BloomPass.js: 76» BloomPass 76 линия следующим образом:

THREE.BloomPass.prototype = Object.assign(Object.create(THREE.Pass.prototype), { 

Я считаю, что из-за этого Effe ctComposer также бросает ошибку на линии composer.addPass(effectBloom);: Uncaught TypeError: pass.setSize не является функцией в THREE.EffectComposer.addPass

pass.setSize(size.width, size.height); 

Любая идея, что я делаю не так? Согласно нескольким примерам, я все правильно настраиваю ... Любая помощь очень ценится!

Answer 1

Вы должны поместить CopyShader в конец композитора не посередине. Этот код работает для меня:

renderer.autoClear = false; 
    composer = new THREE.EffectComposer(renderer); 
    var sunRenderModel = new THREE.RenderPass(scene, camera); 
    var effectBloom = new THREE.BloomPass(1, 25, 5); 
    var sceneRenderModel = new THREE.RenderPass(scene, camera); 
    var effectCopy = new THREE.ShaderPass(THREE.CopyShader); 
    effectCopy.renderToScreen = true; 
    composer.addPass(sunRenderModel); 
    composer.addPass(effectBloom); 
    composer.addPass(effectCopy);