1

每当我尝试在我的 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>
    )
}
4

1 回答 1

1

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

于 2020-09-25T22:39:11.847 回答