npm install @pmndrs/assets

Base64-packed javascript (default-)module exports that can be npm installed and imported. Assets are thereby self-hosted and safe from outages. All assets are resized, optimized and compressed, ready to be consumed on the web.

Index

Usage

React-three-fiber

In React you can use suspend from suspend-react, or anything else that can resolve a promise. This will allow components to fall into suspense which allows you to control loading states. The assets will be lazy loaded and cached for multiple re-use, they will not appear in the main bundle.

import { Gltf, Text, Environment } from '@react-three/drei'
import { suspend } from 'suspend-react'

const inter = import('@pmndrs/assets/fonts/inter_regular.woff')
const suzi = import('@pmndrs/assets/models/suzi.glb')
const bridge = import('@pmndrs/assets/hdri/bridge.exr')

function Scene() {
  return (
    <Environment files={suspend(city).default} />
    <Gltf src={suspend(suzi).default} />
    <Text font={suspend(inter).default}>hello</Text>

Dynamic import (recommended 👍)

If you import dynamically 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 (with care ⚠️)

You can of course also directly import the assets, but do it only in modules that already are split from the main bundle! It is not recommended for your entry points as it would considerally impede time-to-load.

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, and _.woff using fonttools with a subset of ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789,;.:-_<>$£!+"*ç%&/~[]{}()=?``^'#€öÖäÄüܧ°. Each json is ~40kb, each woff ~20kb.

import interJson from '@pmndrs/assets/fonts/inter_regular.json'
import interWoff from '@pmndrs/assets/fonts/inter_regular.woff'

index: src/fonts

HDRIs

A selection of Polyhaven HDRIs, resized to 512x512 and converted to EXR with DWAB compression. They are about 7x smaller than the Polyhaven originals. Each exr is ~100-200kb.

import apartment from '@pmndrs/assets/hdri/apartment.exr'

index: src/hdri

Models

A selection of models optimized with gltf-transform optimize and converted to glb.

import suzi from '@pmndrs/assets/models/suzi.glb'

index: src/models

Textures

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

import cloud from '@pmndrs/assets/textures/cloud.webp'

index: src/textures

Build

Pre-requisites:

• Make
• Nodejs
• ImageMagick 7+
• jq
• fonttools
• openssl

$ make