How to integrate threejs modules with Aframe? - three.js

Question

So I find a lot of interesting scripts that are built just with threejs, but I would like to somehow combine them with the ease of use that Aframe provides.
The below code starts by importing three.module.js - which I believe is already bundled with Aframe, so how can I include/import the required files and use them within a component?
I have had some joy including the three.module.js in my files and loading it exactly as below, but this seems like an unnecessary requirement/duplication of code.
<script type="module">
import * as THREE from '../build/three.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
import { RenderPass } from './jsm/postprocessing/RenderPass.js';
import { AfterimagePass } from './jsm/postprocessing/AfterimagePass.js';
EDIT:
Think I may be slowly getting there
<script src="./scripts/Pass.js"></script>
<script src="./scripts/CopyShader.js"></script>
<script src="./scripts/ShaderPass.js"></script>
<script src="./scripts/EffectComposer.js"></script>
<script src="./scripts/RenderPass.js"></script>
<script src="./scripts/AfterImageShader.js"></script>
<script src="./scripts/AfterImagePass.js"></script>
<script>
let composer;
let mesh;
let afterimagePass;
document.querySelector('a-scene').addEventListener('loaded', function () {
console.log(sceneEl.renderer.getSize());
composer = new THREE.EffectComposer( sceneEl.renderer );
composer.addPass( new THREE.RenderPass( sceneEl, sceneEl.camera ) );
afterimagePass = new THREE.AfterimagePass();
composer.addPass( afterimagePass );
composer.render(sceneEl, sceneEl.camera);
});
</script>
But now it's throwing this error
three.js:19204 Uncaught TypeError: t.onBeforeRender is not a function
at qe.render (three.js:19204)
at RenderPass.render (RenderPass.js:52)
at EffectComposer.render (EffectComposer.js:123)
at HTMLElement.<anonymous> ((index):982)
at HTMLElement.<anonymous> (a-node.js:263)
at a-node.js:128

Answer 1

Three.js doesn't currently support post processing for VR (https://github.com/mrdoob/three.js/pull/15840). While you might be able to get post processing to work in A-Frame using the default 2D camera, it currently breaks as soon as you switch to VR or AR -- this is due to the Three.js dependency, not A-Frame itself. To get 2D post processing to work in A-Frame you might try binding the EffectComposer to the A-Frame render loop (https://gist.github.com/donmccurdy/31560945d5723737e6c656a2974ab628).