问Three.js SSAOPass在AFrame中的实现

EN

AFRAME.registerComponent('ssao', {

  init: function () {
    this.el.addEventListener('that', evt => this.onEnter());
    this.el.addEventListener('mouseleave', evt => this.onLeave());
    setTimeout(() => this.el.emit("that"), 2000);
  },
  onEnter: function () {
    const scene = this.el.sceneEl.object3D;
    const camera = this.el.sceneEl.camera;
    const renderer = this.el.sceneEl.renderer;
    const render = renderer.render;
    const composer = new THREE.EffectComposer(renderer);
    //let renderPass = new THREE.RenderPass(scene, camera);
    //let outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
    const ssaoPass = new THREE.SSAOPass( scene, camera, window.innerWidth, window.innerHeight );
    //composer.addPass(renderPass);
    //composer.addPass(outlinePass);
    ssaoPass.kernelRadius = 16;
        composer.addPass( ssaoPass );
    // let objects = [];
    // this.el.object3D.traverse(node => {
    //   if (!node.isMesh) return;
    //   objects.push(node);
    // });
    // outlinePass.selectedObjects = objects;
    // outlinePass.renderToScreen = true;
    // outlinePass.edgeStrength = this.data.strength;
    // outlinePass.edgeGlow = this.data.glow;
    // outlinePass.visibleEdgeColor.set(this.data.color);
    // HACK the AFRAME render method (a bit ugly)
    const clock = new THREE.Clock();
    this.originalRenderMethod = render;
    let calledByComposer = false;
        renderer.render = function () {
      if (calledByComposer) {
        render.apply(renderer, arguments);
      } else {
        calledByComposer = true;
        composer.render(clock.getDelta());
        calledByComposer = false;
      }
    };
  },
  onLeave: function () {
    this.el.sceneEl.renderer.render = this.originalRenderMethod;
  },
  remove: function () {
    this.onLeave();
  }
});