[Webpack] image(hdr)추가하기

옥영빈·2022년 12월 9일
1

threejs

목록 보기
3/7

문제점

이미지(jpg/png/hdr)파일을 추가 한 뒤 webpack으로 build를 해도 해당 이미지의 경로를 찾지못하는 404 에러 발생 그래서

               test: /\.(png|svg|jpg|gif)$/,
               use: {
                   loader: "file-loader",
                   options:{
                       name: "[name].[hash].[ext]",
                   },
               },
           },

이런 식으로 webpack.config.js에 추가 했지만 결과는 그대로 404 에러 발생

static 폴더 사용

webpack에 hdr넣어 threejs enviroment로 사용하기

1. static 폴더를 생성

static 하위 폴더로 images 폴더 추가

2. copy webpack plugin 설치

npm install -D copy-webpack-plugin

3. webpack.config.js

       new CopyPlugin({
        patterns:[
            {
                from: 'static'
            }
        ]
       })

위의 코드 추가 하기
-> webpack의 기본 폴더인 dist폴더에 추가 됨

	new RGBELoader().load( '../../static/images/photo_studio_01_1k.hdr', function ( texture ) {
		texture.mapping = THREE.EquirectangularReflectionMapping;
		//editor.scene.background = texture; // 3차원 배경으로 사용
		editor.scene.environment = texture; // 광원으로 사용
	
		render();
	} );

그리고 위의 코드 처럼 RGBELoader를 추가하고 hdr이 있는 폴더 경로 추가

4. npm run build 실행

빌드 시 dist 폴더 안에 images폴더 및 하위 파일들이 추가 된 모습

5. 결론

이거 한다고 하루 넘게 걸렸다...
잊지말자 static 폴더!

profile
webGL개발 초보

0개의 댓글