如何解决无法从Three.js导入后处理
每当我尝试在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>
)
}
解决方法
three / jsm具有未编译的导入语句,这些语句在node / next / gatsby中不起作用。这三个人都有补救措施。例如next具有动态导入功能https://nextjs.org/docs/advanced-features/dynamic-import,您还会发现很多问题,因为这是人们遇到的https://github.com/vercel/next.js/issues/9890
的一个非常普遍的问题版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。