ТРИ. Эффект Composer в A-Frame

Question

У кого-нибудь есть хороший пример того, как правильно использовать THREE.Effect Composer в A-Frame? Особенно сочетание Effect Composer и PMRemGenerator.

Используется https://gist.github.com/donmccurdy/31560945d5723737e6c656a2974ab628 на данный момент, но этот метод ломает пару вещей. Инспектор, но, что более важно, использование PMRemGenerator, например. (Это также не работает в VR, но это незначительно для моего проекта c)

И https://github.com/wizgrav/aframe-effects больше не работает в последних версиях и не работает кажется, поддерживается больше. (И я слишком много новичка ie, чтобы попытаться исправить то, что я боюсь) (отредактировано)

ОБНОВЛЕНИЕ: Отредактировал исходный вопрос, чтобы прояснить комбинацию PMRemGenerator / Effect Composer это важная часть. VR не так много, но это не было ясно в первоначальном виде.

Answer 1

Не возможно. Постобработка VR зависит от продолжающейся ТРИ работы, за которой вы можете следить за этим PR: https://github.com/mrdoob/three.js/pull/15840

Answer 2

How would this work do you think?
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.module.js';
import {EffectComposer} from 'https://threejsfundamentals.org/threejs/resources/threejs/r113/examples/jsm/postprocessing/EffectComposer.js';
import {RenderPass} from 'https://threejsfundamentals.org/threejs/resources/threejs/r113/examples/jsm/postprocessing/RenderPass.js';
import {BloomPass} from 'https://threejsfundamentals.org/threejs/resources/threejs/r113/examples/jsm/postprocessing/BloomPass.js';
import {FilmPass} from 'https://threejsfundamentals.org/threejs/resources/threejs/r113/examples/jsm/postprocessing/FilmPass.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  {
    const color = 0xFFFFFF;
    const intensity = 2;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
  }

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  function makeInstance(geometry, color, x) {
    const material = new THREE.MeshPhongMaterial({color});

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.x = x;

    return cube;
  }

  const cubes = [
    makeInstance(geometry, 0x44aa88,  0),
    makeInstance(geometry, 0x8844aa, -2),
    makeInstance(geometry, 0xaa8844,  2),
  ];

  const composer = new EffectComposer(renderer);
  composer.addPass(new RenderPass(scene, camera));

  const bloomPass = new BloomPass(
      1,    // strength
      25,   // kernel size
      4,    // sigma ?
      256,  // blur render target resolution
  );
  composer.addPass(bloomPass);

  const filmPass = new FilmPass(
      0.35,   // noise intensity
      0.025,  // scanline intensity
      648,    // scanline count
      false,  // grayscale
  );
  filmPass.renderToScreen = true;
  composer.addPass(filmPass);

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  let then = 0;
  function render(now) {
    now *= 0.001;  // convert to seconds
    const deltaTime = now - then;
    then = now;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
      composer.setSize(canvas.width, canvas.height);
    }

    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * .1;
      const rot = now * speed;
      cube.rotation.x = rot;
      cube.rotation.y = rot;
    });

    composer.render(deltaTime);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();