npm install @pmndrs/assets
Components in the R3F eco system know how to deal with promises.
import { Environment } from '@react-three/drei'
...
<Environment files={import('@pmndrs/assets/sunset')} />
If you import the asset will be bundle split, it will not be part of your main bundle.
const sunset = await import('@pmndrs/assets/sunset.js')
new THREE.RGBELoader().load(sunset.default, (texture) => {
// ...
})
Keep bundler limitations in mind when you use fully dynamic imports with template literals.
You can do it in files that already are split from the main bundle. But it is not recommended for your entry points, it would increase the bundle size by a lot.
import sunset from '@pmndrs/assets/sunset'
new THREE.RGBELoader().load(sunset, (texture) => {
// ...
})