在THREE.js中的对象/组上使用后处理着色器

Question

我正在尝试使用THREE.js在WebGL画布中通过后期处理添加一些模糊效果。

问题是，我只需要在包含多个其他内容的选定对象/组上使用此效果。 例如：我有两个旋转对象，并希望为其中一个添加模糊效果（在我的示例中为绿色）。 我已经玩了MaskPass，但我没有让它与我的东西一起工作，我也没有在THREE.js例子中找到匹配的例子。

以下是整个屏幕模糊的示例：

var container;

var camera, scene, renderer, composer;

var cube1, cube2, cube3, cube4;

var group1, group2;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.y = 150;
    camera.position.z = 500;

    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xf0f0f0 );

   // Cube
   var geometry = new THREE.BoxGeometry( 200, 200, 200 );
   var material1 = new THREE.MeshBasicMaterial( { color: 0x4444ff } );
   var material2 = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
   var material3 = new THREE.MeshBasicMaterial( { color: 0x66ff66 } );
   var material4 = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

   cube1 = new THREE.Mesh( geometry, material1 );
   
   cube2 = new THREE.Mesh( geometry, material2 );
   cube2.rotation.x = Math.PI / 3;
   cube2.rotation.y = Math.PI / 3;
   
   cube3 = new THREE.Mesh( geometry, material3 );
   
   cube4 = new THREE.Mesh( geometry, material4 );
   cube4.rotation.x = Math.PI / 3;
   cube4.rotation.y = Math.PI / 3;
   
   group1 = new THREE.Object3D();
   group1.add(cube1);
   group1.add(cube2);
   group1.position.y = 150;
   group1.position.x = 200;
   
   group2 = new THREE.Object3D();
   group2.add(cube3);
   group2.add(cube4);
   group2.position.y = 150;
   group2.position.x = -200;
   
   scene.add( group1 );
   scene.add( group2 );

   renderer = new THREE.WebGLRenderer({ antialias: true });
   renderer.setPixelRatio( window.devicePixelRatio );
   renderer.setSize( window.innerWidth, window.innerHeight );
   document.body.appendChild( renderer.domElement );
   
   var renderPass = new THREE.RenderPass(scene, camera);
   var blurShaderPass = new THREE.ShaderPass(THREE.HorizontalBlurShader);
   blurShaderPass.uniforms.h.value = 2.5 / 512;
   blurShaderPass.renderToScreen = true;
   
   composer = new THREE.EffectComposer(renderer);
   composer.addPass(renderPass);
   composer.addPass(blurShaderPass);
}

function animate() {
	requestAnimationFrame( animate );
	render();
}

function render() {
   group1.rotation.y -= 0.01;
   group2.rotation.y -= 0.15;
   composer.render();
}

html, body {
   padding: 0;
   margin: 0;
}

<script src="https://webauth.cloud/libs/three/three.min.js"></script>
<script src="https://webauth.cloud/libs/three/postprocessing/EffectComposer.js"></script>
<script src="https://webauth.cloud/libs/three/postprocessing/RenderPass.js"></script>
<script src="https://webauth.cloud/libs/three/postprocessing/ShaderPass.js"></script>
<script src="https://webauth.cloud/libs/three/postprocessing/ClearPass.js"></script>
<script src="https://webauth.cloud/libs/three/postprocessing/MaskPass.js"></script>
<script src="https://webauth.cloud/libs/three/shaders/CopyShader.js"></script>
<script src="https://webauth.cloud/libs/three/shaders/HorizontalBlurShader.js"></script>