@pmndrs/assets

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

Fonts HDRIs Matcaps Normals Models Textures

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