Skip to documentation
CranberryClock.Ideas / Systems / Design

INDEPENDENT TOOL / v0.1.0

BiomeTutorial

Work through the Biome example and adapt the pattern to your own project.

Tutorial: a repeatable meadow

javascript
import * as THREE from 'three';
import { scatter, createInstances, disposeInstances } from '@cranberry-forge/biome';

// Author the model bottom at Y=0; no model-specific dependency is required.
const geometry = new THREE.ConeGeometry(0.6, 2, 7);
geometry.translate(0, 1, 0);
const material = new THREE.MeshStandardMaterial({ color: '#527448' });

const height = (x, z) => Math.sin(x * 0.12) * Math.cos(z * 0.12) * 2;
const field = scatter({
  seed: 42,
  count: 800,
  radius: 30,
  minDistance: 1.4,
  maxSlope: 35,
  minHeight: -2,
  maxHeight: 2,
  scale: [0.8, 1.4],
  exclusions: [
    { type: 'circle', x: 0, z: 0, radius: 4 },
    { type: 'path', points: [[-25, -2], [0, 3], [25, 0]], width: 3 }
  ]
}, height);

const meadow = createInstances(field, [{ geometry, material }]);
scene.add(meadow); // Your scene must include lighting for standard materials.
console.log(field.stats); // Requested, placed, attempts, saturation, rejections.

// Later, release only instance buffers. You still own the prototype resources.
disposeInstances(meadow);
geometry.dispose();
material.dispose();

Your terrain mesh must use the same height function. Biome does not create or alter terrain geometry.

View versioned source on GitHub ↗