three fiber에서 glb파일을 불러오며 발생한 문제입니다.
import icon from "@Assets/model/model.glb";glb 파일을 canvas에 올리기 위해 기존의 이미지 파일을 불러오는 방식으로 파일을 import 했습니다.
Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .glb file format, or if it's an asset, add "*/.glb" to
assetsIncludein your configuration.
하지만 위와 같은 오류가 발생했습니다. 구글링을 통해 문제점을 확인해보니 glb 파일을 정적으로 import 하려해 문제가 발생한 것이었습니다.
import icon from "@Assets/model/model.glb?url";위와 같이 .url 경로 확장자를 추가해 동적인 방법으로 파일을 import하자 glb 파일을 성공적으로 불러올 수 있었습니다.
🔎 Dynamic Import (동적 import)
파일을 불러오는 방식에는 두 가지 주요 접근 방법이 있습니다: 정적 방식과 동적 방식입니다. 정적 방식에서는 모듈의 의존성을 빌드 시간에 파악하여 가져오고, 동적 방식에서는 런타임 시간에 모듈을 가져옵니다.
import icon from "@Assets/model/model.glb"; 구문은 정적 방식의 import 문을 사용하고 있습니다. 이는 빌드 시간에 파일의 경로를 분석하여 해당 파일을 가져오려고 합니다. 그러나 .glb 파일은 일반적인 JavaScript 모듈이 아니므로, 이러한 정적 방식으로는 파일을 가져올 수 없습니다. 따라서 파일이 제대로 불러와지지 않습니다.
import icon from "@Assets/model/model.glb?url"; 구문은 동적 방식의 import 문을 사용하고 있습니다. url이라는 경로 확장자를 추가함으로써 파일을 동적으로 가져옵니다. 이 경우 동적으로 모듈을 해석하는 로직이 추가되어 파일을 올바르게 가져올 수 있습니다.
.glb 파일과 같은 비표준 파일 형식을 동적으로 가져오기 위해서는 웹 브라우저의 import() 함수를 사용하거나, 해당 파일을 로드하기 위한 특수한 로더를 사용해야 할 수도 있습니다. 예를 들어, Three.js의 GLTFLoader는 .glb 파일을 로드하기 위한 특수한 로더입니다.
따라서 파일을 성공적으로 가져오기 위해서는 동적 방식의 import 문을 사용하거나, .glb 파일을 처리할 수 있는 특정 로더를 사용해야 합니다.
glb 파일에 대해 아무것도 모르고, three.js나 three fiber 라이브러리에 대해 공부하기 전 무작정 glb 파일을 업로드하려다 발생한 문제였다.. 이제는 파일 확장자를 확인하고 라이브러리에서 제공하는 loader를 이용해 간단하게 파일을 업로드한다
