npm install @pmndrs/assetsBase64-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.
In React you can use suspend from suspend-react, or anything else that can resolve a promise. The assets will be lazy loaded and cached for multiple re-use, they will not appear in the main bundle.
import { Environment, Gltf, Text, Text3D } from '@react-three/drei'
import { suspend } from 'suspend-react'
const bridge = import('@pmndrs/assets/hdri/bridge.exr')
const suzi = import('@pmndrs/assets/models/suzi.glb')
const inter = import('@pmndrs/assets/fonts/inter_regular.woff')
const interBold = import('@pmndrs/assets/fonts/inter_bold.json')
function Scene() {
return (
<Environment files={suspend(bridge).default} />
<Gltf src={suspend(suzi).default} />
<Text font={suspend(inter).default}>hello</Text>
<Text3D font={suspend(interBold).default}>hello</Text3D>Note
This is the recommended way
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 EXRLoader().load(city.default, (texture) => {
// ...
})Keep bundler limitations in mind when you use fully dynamic imports with template literals.
Warning
With care, if you know what you're doing, otherwise: go with dynamic import
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 EXRLoader().load(city, (texture) => {
// ...
})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 { FontLoader, TextGeometry } from 'three-stdlib'
const interJson = await import('@pmndrs/assets/fonts/inter_regular.json')
const geometry = new TextGeometry('hello', { font: new FontLoader().parse(interJson.default) })import { Text } from 'troika-three-text'
const interWoff = await import('@pmndrs/assets/fonts/inter_regular.woff')
const mesh = new Text()
mesh.font = interWoff.default
mesh.text = 'hello'
mesh.sync()index: src/fonts
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 { EXRLoader } from 'three-stdlib'
const apartment = await import('@pmndrs/assets/hdri/apartment.exr')
new EXRLoader().load(apartment.default, (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping
scene.environment = texture
})index: src/hdri
Compressed matcaps, resized to 512x512 and converted to webp. refer to emmelleppi/matcaps for previews.
const matcap = await import('@pmndrs/assets/matcaps/0000.webp')
new THREE.TextureLoader().load(matcap.default, (texture) => {
const mesh = new THREE.Mesh(geometry, new THREE.MatCapMaterial({ matcap: texture }))
})index: src/matcaps
Compressed normal-maps, resized to 512x512 and converted to webp. refer to emmelleppi/normal-maps for previews.
const normal = await import('@pmndrs/assets/normals/0000.webp')
new THREE.TextureLoader().load(normal.default, (texture) => {
const mesh = new THREE.Mesh(geometry, new THREE.MatStandardMaterial({ normalMap: texture }))
})index: src/normals
A selection of models optimized with gltf-transform optimize and converted to glb.
import { GLTFLoader } from 'three-stdlib'
const suzi = await import('@pmndrs/assets/models/suzi.glb')
new GLTFLoader().load(suzi.default, (gltf) => {
scene.add(gltf.scene)
})index: src/models
Compressed textures, resized to 512x512 and converted to webp.
const cloud = await import('@pmndrs/assets/textures/cloud.webp')
new THREE.TextureLoader().load(cloud.default, (map) => {
const m = new THREE.MeshStandardMaterial({ map })
})index: src/textures
Pre-requisites:
- Make
- Nodejs
- ImageMagick 7+
- jq
- fonttools
- openssl
$ make
