npm install @pmndrs/assets

These assets are base64 packed javascript exports that can be npm installed and imported. They are thereby self-hosted and safe from outages.

Index

Usage

React-three-fiber

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

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

Dynamic import

If you import the asset will be bundle split, it will not be part of your main bundle.

const city = await import('@pmndrs/assets/hdri/city.exr')
new THREE.EXRLoader().load(city.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 city from '@pmndrs/assets/hdri/city.exr'

new THREE.EXRLoader().load(city, (texture) => {
  // ...
})

Fonts

The Inter font family converted to json using facetype.js with a subset of ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789,;.:-_<>$£!+"*ç%&/~[]{}()=?``^'#€öÖäÄüܧ°. files are ~30-40kb.

import('@pmndrs/assets/fonts/inter_regular.json')

see: src/fonts for all

HDRIs

A selection of Polyhaven HDRIs, resized to 512x512 and converted to EXR with ZIP compression. They are about 3x smaller than the Polyhaven originals, ~500-800kb.

import('@pmndrs/assets/hdri/apartment.exr')

see: src/hdri for all

Textures

Compressed textures, resized to 512x512 and converted to webp.

import('@pmndrs/assets/textures/cloud.webp')

see: src/textures for all

Build

Pre-requisites:

• Make
• ImageMagick
• jq

$ make