https://github.com/pmndrs/assets
📦 Importable base64 encoded CC0 assets
https://github.com/pmndrs/assets
Last synced: 9 months ago
JSON representation
📦 Importable base64 encoded CC0 assets
- Host: GitHub
- URL: https://github.com/pmndrs/assets
- Owner: pmndrs
- License: cc0-1.0
- Created: 2023-06-02T22:41:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-26T09:10:32.000Z (over 1 year ago)
- Last Synced: 2024-10-29T15:32:13.556Z (about 1 year ago)
- Language: Makefile
- Homepage: https://codesandbox.io/s/pmndrs-assets-5p5c47
- Size: 147 MB
- Stars: 91
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@pmndrs/assets)
[](https://www.npmjs.com/package/@pmndrs/assets)
[](https://discord.com/channels/740090768164651008/741751532592038022)
```sh
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](https://github.com/pmndrs/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.
```jsx
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 (
hello
hello
```
## 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.
```jsx
const city = await import('@pmndrs/assets/hdri/city.exr')
new EXRLoader().load(city.default, (texture) => {
// ...
})
```
Keep [bundler limitations](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#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](#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.
```jsx
import city from '@pmndrs/assets/hdri/city.exr'
new EXRLoader().load(city, (texture) => {
// ...
})
```
# Fonts
The [Inter](https://rsms.me/inter/) font family converted to _.json using [facetype.js](https://gero3.github.io/facetype.js), and _.woff using [fonttools](https://github.com/fonttools/fonttools) with a subset of:
https://github.com/pmndrs/assets/blob/e46e0fc9ebb5faff61d19dabdb5c2fdbabb75ad0/Makefile#L6
Each json is ~40kb, each woff ~20kb.
```js
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) })
```
```js
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`](src/fonts)
# HDRIs
A selection of [Polyhaven](https://polyhaven.com/hdris) 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.
```js
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`](src/hdri)
# Matcaps
Compressed matcaps, resized to 512x512 and converted to `webp`. refer to [emmelleppi/matcaps](https://github.com/emmelleppi/matcaps) for previews.
```js
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`](src/matcaps)
# Normals
Compressed normal-maps, resized to 512x512 and converted to `webp`. refer to [emmelleppi/normal-maps](https://github.com/emmelleppi/normal-maps) for previews.
```js
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`](src/normals)
# Models
A selection of models optimized with [`gltf-transform optimize`](https://gltf-transform.donmccurdy.com/cli) and converted to `glb`.
```js
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`](src/models)
# Textures
Compressed textures, resized to 512x512 and converted to `webp`.
```js
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`](src/textures)
# Build
Pre-requisites:
- Make
- Nodejs
- ImageMagick 7+
- jq
- fonttools
- openssl
```sh
$ make
```