이미지(jpg/png/hdr)파일을 추가 한 뒤 webpack으로 build를 해도 해당 이미지의 경로를 찾지못하는 404 에러 발생 그래서
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: "file-loader",
options:{
name: "[name].[hash].[ext]",
},
},
},
이런 식으로 webpack.config.js에 추가 했지만 결과는 그대로 404 에러 발생
webpack에 hdr넣어 threejs enviroment로 사용하기
static 하위 폴더로 images 폴더 추가
npm install -D copy-webpack-plugin
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이 있는 폴더 경로 추가
빌드 시 dist 폴더 안에 images폴더 및 하위 파일들이 추가 된 모습
이거 한다고 하루 넘게 걸렸다...
잊지말자 static 폴더!