@pmndrs/assets
v1.7.0
Published
📦 Base64 encoded CC0 assets
Downloads
16,160
Readme
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. 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>
Vanilla javascript
Dynamic import
[!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.
Import
[!IMPORTANT]
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) => {
// ...
})
Fonts
The Inter font family converted to _.json using facetype.js, and _.woff using fonttools with a subset of: https://github.com/pmndrs/assets/blob/e46e0fc9ebb5faff61d19dabdb5c2fdbabb75ad0/Makefile#L6 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
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 { 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
Matcaps
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
Normals
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
Models
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
Textures
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
Build
Pre-requisites:
- Make
- Nodejs
- ImageMagick 7+
- jq
- fonttools
- openssl
$ make