如何将threejs模块与Aframe集成？答案

【问题标题】：How to integrate threejs modules with Aframe?如何将threejs模块与Aframe集成？
【发布时间】：2021-11-08 01:38:17
【问题描述】：

所以我发现很多有趣的脚本都是用 threejs 构建的，但我想以某种方式将它们与 Aframe 提供的易用性结合起来。

下面的代码从导入 three.module.js 开始——我相信它已经与 Aframe 捆绑在一起，那么如何包含/导入所需的文件并在组件中使用它们？

我很高兴在我的文件中包含了 three.module.js 并完全按如下方式加载它，但这似乎是不必要的要求/重复代码。

<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';

编辑：

我想我可能会慢慢到达那里

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

但是现在它抛出了这个错误

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

【问题讨论】：

标签： three.js aframe

【解决方案1】：

Three.js 目前不支持 VR 的后期处理 (https://github.com/mrdoob/three.js/pull/15840)。虽然您可能能够使用默认的 2D 相机在 A-Frame 中进行后期处理，但它目前会在您切换到 VR 或 AR 时中断——这是由于 Three.js 依赖项，而不是 A-Frame 本身.要让 2D 后期处理在 A-Frame 中工作，您可以尝试将 EffectComposer 绑定到 A-Frame 渲染循环 (https://gist.github.com/donmccurdy/31560945d5723737e6c656a2974ab628)。

【讨论】：

我没有使用 VR - 感谢 effect-system.js 的链接 - 我已经尝试实现该方法，而是使用 AfterImagePass 后期效果。没有错误，但屏幕上也没有任何变化：/