abernier / assets

📦 Importable base64 encoded CC0 assets

npm install @pmndrs/assets

Index

HDRIs Apartment City Dawn Forest Night Studio Sunset Warehouse Textures Cloud

Usage

React-three-fiber

Components in the R3F eco system know how to deal with promises.

import { Environment } from '@react-three/drei'
...
<Environment files={import('@pmndrs/assets/sunset')} />

Dynamic import

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.

Import (usually not recommended)

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) => {
  // ...
})

HDRIs

apartment

city

dawn

forest

night

studio

sunset

sunset

Textures

cloud