无法从 Three.js 导入后处理答案

【问题标题】：Cannot import postprocessing from Three.js无法从 Three.js 导入后处理
【发布时间】：2021-01-08 09:26:47
【问题描述】：

每当我尝试在我的 React 应用程序中运行此代码时，它都会失败并显示：

SyntaxError: 不能在模块外使用 import 语句

import React, { useRef, useEffect } from 'react'
import { extend, useThree, useFrame } from 'react-three-fiber'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass'

extend({ EffectComposer, ShaderPass, RenderPass, UnrealBloomPass, FilmPass });

export default function Effects() {
    const { gl, scene, camera, size } = useThree();
    const composer = useRef();
    useEffect(() => void composer.current.setSize(size.width, size.height), [size]);
    useFrame(() => composer.current.render(), 2);

    return (
        <effectComposer ref={composer} args={[gl]}>
            <renderPass attachArray="passes" scene={scene} camera={camera} />
            <unrealBloomPass attachArray="passes" args={[undefined, 1.8, 1, 0]} />
        </effectComposer>
    )
}

【问题讨论】：

你尝试过 .js 吗？例如from 'three/examples/jsm/postprocessing/EffectComposer.js'
@soju 是的，不起作用:(
是否有机会将您的整个应用程序分享为实时示例或 GitHub 存储库？
您是否尝试删除除导入之外的所有代码？

标签： reactjs three.js next.js react-three-fiber

【解决方案1】：

three/jsm 具有在 node/next/gatsby 中不起作用的未编译导入语句。这三个人都有补救措施。例如 next 有动态导入 https://nextjs.org/docs/advanced-features/dynamic-import 你也会发现很多问题，因为这是人们遇到的一个非常常见的问题 https://github.com/vercel/next.js/issues/9890

【讨论】：