# Rock Cluster
> A natural-looking low-poly group of three to six faceted rocks of different sizes and proportions, from a big anchor stone to small chips, laid out deterministically. Control count, spread, scale and stone color to break up terrain, line paths and fill mountain, desert or cave scenes.
Multi-view sheet (3/4, front, side, top): https://codels.download/m/rock-cluster.sheet.png
## Facts
- Category: Nature › Rocks & Cliffs
- Size (W × H × D): 1.92 × 0.90 × 2.29 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 288 · Meshes: 5 · Materials: 3
- License: CC0-1.0 (Codels built-in)
- Tags: rock, low-poly, stylized, beach, cave, desert, forest, mountain, rpg, strategy, background, decoration, obstacle, stone, cluster, game-ready, instancing-friendly, mobile-friendly, parametric, color-gray, size-medium, poly-ultra-low
- Page: https://codels.download/models/rock-cluster
## Files
| Format | URL |
|---|---|
| three.js ES module (`createRockCluster()`) | https://codels.download/m/rock-cluster.js |
| React Three Fiber component (``) | https://codels.download/m/rock-cluster.jsx |
| Instancing module (`createRockClusterInstances(count, place)`, one draw call per material) | https://codels.download/m/rock-cluster.instanced.js |
| Standalone HTML demo | https://codels.download/m/rock-cluster.html |
| glTF binary | https://codels.download/m/rock-cluster.glb |
| glTF binary, Meshopt-compressed (2–3× smaller; GLTFLoader needs `setMeshoptDecoder(MeshoptDecoder)`) | https://codels.download/m/rock-cluster.glb?compress=meshopt |
| glTF JSON | https://codels.download/m/rock-cluster.gltf |
| OBJ (vertex colors) + MTL | https://codels.download/m/rock-cluster.obj · https://codels.download/m/rock-cluster.mtl |
| STL | https://codels.download/m/rock-cluster.stl |
| CodelSpec JSON | https://codels.download/m/rock-cluster.json |
## Parameters
Append them as query parameters to any URL above to get a customized variant (e.g. `?count=...`).
| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `count` | int | 3 – 6 | 5 | 5 |
| `spread` | number | 0.6 – 2 | 1 | 1 |
| `size` | number | 0.4 – 2.5 | 1 | 1 |
| `color` | color | #rrggbb | #625f5a | #625f5a |
| `seed` | int | 1 – 20 | 2 | 2 |
## Parts
- mainRock (dodecahedron · stone)
- rock2 (dodecahedron · stoneLight)
- rock3 (dodecahedron · stoneDark)
- rock4 (dodecahedron · stone)
- rock5 (dodecahedron · stoneLight)
## How to use
Save the code below as `rock-cluster.js`, then:
```js
import { createRockCluster } from './rock-cluster.js';
const model = createRockCluster();
scene.add(model);
```
## Code
```js
/**
* Rock Cluster — Codels 3D model library (https://codels.download/models/rock-cluster)
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
* Triangles: 288 · Size (W × H × D): 1.92 × 0.90 × 2.29 m
*
* Usage:
* import { createRockCluster } from './rock-cluster.js';
*
* const model = createRockCluster();
* 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 createRockCluster() {
const root = new THREE.Group();
root.name = 'RockCluster';
// Materials
const stoneMat = new THREE.MeshStandardMaterial({ name: 'stone', color: 0x625f5a, roughness: 0.92, flatShading: true });
const stoneLightMat = new THREE.MeshStandardMaterial({ name: 'stoneLight', color: 0x75726e, roughness: 0.9, flatShading: true });
const stoneDarkMat = new THREE.MeshStandardMaterial({ name: 'stoneDark', color: 0x52504c, roughness: 0.95, flatShading: true });
// Parts
const mainRock = new THREE.Mesh(jitter(new THREE.DodecahedronGeometry(1, 1), 0.13, 26), stoneMat);
mainRock.name = 'mainRock';
mainRock.position.set(0, 0.3656, 0);
mainRock.rotation.set(deg(6.7859), deg(147.8987), deg(-0.2767));
mainRock.scale.set(0.6102, 0.3523, 0.4004);
root.add(mainRock);
const rock2 = new THREE.Mesh(jitter(new THREE.DodecahedronGeometry(1, 0), 0.22, 27), stoneLightMat);
rock2.name = 'rock2';
rock2.position.set(-0.6805, 0.4363, -0.1155);
rock2.rotation.set(deg(8.3837), deg(138.705), deg(-9.104));
rock2.scale.set(0.4146, 0.4098, 0.2945);
root.add(rock2);
const rock3 = new THREE.Mesh(jitter(new THREE.DodecahedronGeometry(1, 0), 0.22, 28), stoneDarkMat);
rock3.name = 'rock3';
rock3.position.set(0.672, 0.3318, -0.4341);
rock3.rotation.set(deg(-3.5391), deg(144.9353), deg(-10.1288));
rock3.scale.set(0.3679, 0.3676, 0.2224);
root.add(rock3);
const rock4 = new THREE.Mesh(jitter(new THREE.DodecahedronGeometry(1, 0), 0.22, 29), stoneMat);
rock4.name = 'rock4';
rock4.position.set(-0.2377, 0.3015, 0.9094);
rock4.rotation.set(deg(7.1479), deg(42.6035), deg(-1.0222));
rock4.scale.set(0.2584, 0.2766, 0.1984);
root.add(rock4);
const rock5 = new THREE.Mesh(jitter(new THREE.DodecahedronGeometry(1, 0), 0.22, 30), stoneLightMat);
rock5.name = 'rock5';
rock5.position.set(-0.4928, 0.2758, -0.933);
rock5.rotation.set(deg(5.1674), deg(274.8037), deg(-3.9933));
rock5.scale.set(0.2148, 0.2309, 0.1443);
root.add(rock5);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createRockCluster;
```
---
Codels — 3D models as code for three.js. Search more: https://codels.download/api/v1/models?q= · Guide: https://codels.download/llms.txt