# Boulder
> A chunky low-poly boulder made from a jittered, flattened polyhedron with crisp faceted planes, a couple of loose pebbles at its foot and an optional cap of green moss. Pick a size, color and one of 20 shape variations to scatter over mountains, forests, beaches and caves.
Multi-view sheet (3/4, front, side, top): https://codels.download/m/boulder.sheet.png
## Facts
- Category: Nature › Rocks & Cliffs
- Size (W × H × D): 1.33 × 0.85 × 1.42 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 268 · Meshes: 5 · Materials: 3
- License: CC0-1.0 (Codels built-in)
- Tags: boulder, moss, rock, low-poly, stylized, beach, cave, forest, grassland, mountain, rpg, survival, background, decoration, obstacle, stone, game-ready, instancing-friendly, mobile-friendly, parametric, color-gray, color-green, size-medium, poly-ultra-low
- Page: https://codels.download/models/boulder
## Files
| Format | URL |
|---|---|
| three.js ES module (`createBoulder()`) | https://codels.download/m/boulder.js |
| React Three Fiber component (``) | https://codels.download/m/boulder.jsx |
| Instancing module (`createBoulderInstances(count, place)`, one draw call per material) | https://codels.download/m/boulder.instanced.js |
| Standalone HTML demo | https://codels.download/m/boulder.html |
| glTF binary | https://codels.download/m/boulder.glb |
| glTF binary, Meshopt-compressed (2–3× smaller; GLTFLoader needs `setMeshoptDecoder(MeshoptDecoder)`) | https://codels.download/m/boulder.glb?compress=meshopt |
| glTF JSON | https://codels.download/m/boulder.gltf |
| OBJ (vertex colors) + MTL | https://codels.download/m/boulder.obj · https://codels.download/m/boulder.mtl |
| STL | https://codels.download/m/boulder.stl |
| CodelSpec JSON | https://codels.download/m/boulder.json |
## Parameters
Append them as query parameters to any URL above to get a customized variant (e.g. `?size=...`).
| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `size` | number | 0.3 – 3 | 1.2 | 1.2 |
| `seed` | int | 1 – 20 | 4 | 4 |
| `color` | color | #rrggbb | #676b72 | #676b72 |
| `moss` | boolean | true \| false | true | true |
## Parts
- rock (icosahedron · stone)
- moss (icosahedron · moss)
- pebble1 (dodecahedron · pebble)
- pebble2 (dodecahedron · pebble)
- pebble3 (dodecahedron · pebble)
## How to use
Save the code below as `boulder.js`, then:
```js
import { createBoulder } from './boulder.js';
const model = createBoulder();
scene.add(model);
```
## Code
```js
/**
* Boulder — Codels 3D model library (https://codels.download/models/boulder)
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
* Triangles: 268 · Size (W × H × D): 1.33 × 0.85 × 1.42 m
*
* Usage:
* import { createBoulder } from './boulder.js';
*
* const model = createBoulder();
* model.position.set(0, 0, 0);
* scene.add(model);
*/
import * as THREE from 'three';
const deg = THREE.MathUtils.degToRad;
// Deterministic vertex displacement (organic low-poly look).
function jitter(geometry, amount, seed) {
const pos = geometry.attributes.position;
const h = (a, b, c, s) => {
let x = Math.imul(a, 73856093) ^ Math.imul(b, 19349663) ^ Math.imul(c, 83492791) ^ Math.imul(s, 2654435761);
x = Math.imul(x ^ (x >>> 16), 2246822507);
x = Math.imul(x ^ (x >>> 13), 3266489909);
return ((x ^ (x >>> 16)) >>> 0) / 4294967295 - 0.5;
};
for (let i = 0; i < pos.count; i++) {
const x = pos.getX(i), y = pos.getY(i), z = pos.getZ(i);
const qx = Math.round(x * 1000), qy = Math.round(y * 1000), qz = Math.round(z * 1000);
pos.setXYZ(i, x + h(qx, qy, qz, seed) * 2 * amount, y + h(qx, qy, qz, seed + 1) * 2 * amount, z + h(qx, qy, qz, seed + 2) * 2 * amount);
}
pos.needsUpdate = true;
geometry.computeVertexNormals();
return geometry;
}
export function createBoulder() {
const root = new THREE.Group();
root.name = 'Boulder';
// Materials
const stoneMat = new THREE.MeshStandardMaterial({ name: 'stone', color: 0x676b72, roughness: 0.92, flatShading: true });
const pebbleMat = new THREE.MeshStandardMaterial({ name: 'pebble', color: 0x595c62, roughness: 0.95, flatShading: true });
const mossMat = new THREE.MeshStandardMaterial({ name: 'moss', color: 0x52733a, roughness: 1, flatShading: true });
// Shared geometries
const icosahedronGeo = jitter(new THREE.IcosahedronGeometry(1, 1), 0.14, 4);
// Parts
const rock = new THREE.Mesh(icosahedronGeo, stoneMat);
rock.name = 'rock';
rock.position.set(0, 0.4594, 0);
rock.rotation.set(deg(5.9306), deg(338.5505), 0);
rock.scale.set(0.6871, 0.4027, 0.5469);
root.add(rock);
const moss = new THREE.Mesh(icosahedronGeo, mossMat);
moss.name = 'moss';
moss.position.set(0, 0.4876, 0);
moss.rotation.set(deg(5.9306), deg(338.5505), 0);
moss.scale.set(0.6184, 0.4027, 0.4922);
root.add(moss);
const pebble1 = new THREE.Mesh(jitter(new THREE.DodecahedronGeometry(0.1162, 0), 0.0174, 28), pebbleMat);
pebble1.name = 'pebble1';
pebble1.position.set(0.3287, 0.0592, -0.7388);
pebble1.rotation.set(deg(3.1291), deg(262.3212), 0);
pebble1.scale.set(1, 0.6, 1);
root.add(pebble1);
const pebble2 = new THREE.Mesh(jitter(new THREE.DodecahedronGeometry(0.1235, 0), 0.0185, 29), pebbleMat);
pebble2.name = 'pebble2';
pebble2.position.set(0.4849, 0.1215, -0.5006);
pebble2.rotation.set(deg(76.0278), deg(84.1818), 0);
pebble2.scale.set(1, 0.6, 1);
root.add(pebble2);
const pebble3 = new THREE.Mesh(jitter(new THREE.DodecahedronGeometry(0.082, 0), 0.0123, 30), pebbleMat);
pebble3.name = 'pebble3';
pebble3.position.set(0.4246, 0.054, -0.6306);
pebble3.rotation.set(deg(31.3078), deg(352.5002), 0);
pebble3.scale.set(1, 0.6, 1);
root.add(pebble3);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createBoulder;
```
---
Codels — 3D models as code for three.js. Search more: https://codels.download/api/v1/models?q= · Guide: https://codels.download/llms.txt