728x90
728x90
문제 상황
react에서 Three.js를 활용해서 3D 모델을 띄우려고 했다.
Canvas가 로딩되는 동안 Progress 컴포넌트를 렌더링 하기위해 Suspense의 fallback 속성을 사용하였지만 다음과 같은 오류가 발생하였다.
⚠️R3F: P is not part of the THREE namespace! Did you forget to extend?
잘못된 코드
React Three Fiber Canvas 요소 내에 표준 HTML 태그를 추가하려고 하면 발생하는 문제였다.
React에서는 Three.js를 사용할 때 Dom을 직접 조작하지 않고 React Three Fiber를 사용한다.
React Three Fiber는 HTML 태그를 해석할 수 없고 Three.js scene을 렌더링 하기 때문에 HTML 태그를 직접 사용하면 오류가 발생되는 것으로 보인다.
const HomePage = () => {
return (
<StyledMain className="main">
<Canvas>
<Suspense
fallback={
<GifProgress
width="15rem"
src={pikachuGif}
text="Loading..."
fontSize="1.5rem"
/>
}
>
<Model />
<OrbitControls />
<Environment files="/pokemon-center.hdr" background />
</Suspense>
</Canvas>
</StyledMain>
);
};
export default HomePage;
개선한 코드
const HomePage = () => {
return (
<StyledMain className="main">
<Canvas>
<Suspense
fallback={
<Html center>
<GifProgress
width="15rem"
src={pikachuGif}
text="Loading..."
fontSize="1.5rem"
/>
</Html>
}
>
<Model />
<OrbitControls />
<Environment files="/pokemon-center.hdr" background />
</Suspense>
</Canvas>
</StyledMain>
);
};
@react-three/drei에서 Html 컴포넌트로 Progress를 wrapping 하여 해결하였다.
728x90
반응형
'이슈관리' 카테고리의 다른 글
| 리액트 결측치 처리 (0) | 2023.06.02 |
|---|---|
| 리액트 Encountered two children with the same key (0) | 2023.06.01 |
| Error: error:0308010C:digital envelope routines::unsupported (0) | 2023.03.26 |
| next 환경변수 undefined 오류 (0) | 2023.03.20 |
| 리액트 Failed to load resource : the server responded with a status of 404 () (0) | 2023.03.10 |
댓글