How to integrate threejs modules with Aframe?

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

score 1 · Answer 1 · answered Jun 23 '21 at 18:28

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).

answered Jun 23 '21 at 18:28

Omegahed

36
2

I'm not using VR - Thanks for the link to the effect-system.js - I have tried implementing that method, but instead using the AfterImagePass post effect. No errors, but also nothing changes on screen :/ – heroicsatsuma Jun 25 '21 at 09:51

How to integrate threejs modules with Aframe?

1 Answers1