# Wooden Fence

> A modular wooden fence section that tiles seamlessly: 2 m long by default with a post at each end, so sections can be placed end to end. Choose a white-picket style with pointed boards, a rustic ranch rail fence or a tall privacy board fence, and set the length and paint color. Perfect for gardens, farms, yards and village borders.

![Wooden Fence preview](https://codels.download/m/wooden-fence.png)

Multi-view sheet (3/4, front, side, top): https://codels.download/m/wooden-fence.sheet.png

## Facts

- Category: Buildings › Structures
- Size (W × H × D): 2.11 × 1.10 × 0.11 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 272 · Meshes: 19 · Materials: 2
- License: CC0-1.0 (Codels built-in)
- Tags: fence, picket-fence, wooden-fence, low-poly, stylized, farm, exterior, garden, grassland, village, city-builder, farming-sim, decoration, modular, obstacle, wood, game-ready, instancing-friendly, mobile-friendly, parametric, color-white, size-medium, poly-ultra-low
- Page: https://codels.download/models/wooden-fence

## Files

| Format | URL |
|---|---|
| three.js ES module (`createWoodenFence()`) | https://codels.download/m/wooden-fence.js |
| React Three Fiber component (`<WoodenFence />`) | https://codels.download/m/wooden-fence.jsx |
| Instancing module (`createWoodenFenceInstances(count, place)`, one draw call per material) | https://codels.download/m/wooden-fence.instanced.js |
| Standalone HTML demo | https://codels.download/m/wooden-fence.html |
| glTF binary | https://codels.download/m/wooden-fence.glb |
| glTF binary, Meshopt-compressed (2–3× smaller; GLTFLoader needs `setMeshoptDecoder(MeshoptDecoder)`) | https://codels.download/m/wooden-fence.glb?compress=meshopt |
| glTF JSON | https://codels.download/m/wooden-fence.gltf |
| OBJ (vertex colors) + MTL | https://codels.download/m/wooden-fence.obj · https://codels.download/m/wooden-fence.mtl |
| STL | https://codels.download/m/wooden-fence.stl |
| CodelSpec JSON | https://codels.download/m/wooden-fence.json |

## Parameters

Append them as query parameters to any URL above to get a customized variant (e.g. `?length=...`).

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `length` | number | 1 – 4 | 2 | 2 |
| `style` | select | picket \| rail \| privacy | picket | picket |
| `color` | color | #rrggbb | #f1ece2 | #f1ece2 |

## Parts

- post (box · post)
- postCap (cylinder · post)
- post (box · post)
- postCap (cylinder · post)
- rail (box · post)
- rail (box · post)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)
- picket (extrude · board)

## How to use

Save the code below as `wooden-fence.js`, then:

```js
import { createWoodenFence } from './wooden-fence.js';
const model = createWoodenFence();
scene.add(model);
```

## Code

```js
/**
 * Wooden Fence — Codels 3D model library (https://codels.download/models/wooden-fence)
 * License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
 * Triangles: 272 · Size (W × H × D): 2.11 × 1.10 × 0.11 m
 *
 * Usage:
 *   import { createWoodenFence } from './wooden-fence.js';
 *   
 *   const model = createWoodenFence();
 *   model.position.set(0, 0, 0);
 *   scene.add(model);
 */
import * as THREE from 'three';

const deg = THREE.MathUtils.degToRad;

// Extrude a 2D outline along Z (centered). bevel = [thickness, size, segments].
function extrude(outline, depth, holes = [], bevel = null) {
  const shape = new THREE.Shape(outline.map(([x, y]) => new THREE.Vector2(x, y)));
  for (const hole of holes) shape.holes.push(new THREE.Path(hole.map(([x, y]) => new THREE.Vector2(x, y))));
  const options = bevel
    ? { depth, bevelEnabled: true, bevelThickness: bevel[0], bevelSize: bevel[1], bevelSegments: bevel[2] }
    : { depth, bevelEnabled: false };
  return new THREE.ExtrudeGeometry(shape, options).translate(0, 0, -depth / 2);
}

export function createWoodenFence() {
  const root = new THREE.Group();
  root.name = 'WoodenFence';

  // Materials
  const boardMat = new THREE.MeshStandardMaterial({ name: 'board', color: 0xf1ece2, roughness: 0.85, flatShading: true });
  const postMat = new THREE.MeshStandardMaterial({ name: 'post', color: 0xc6c2b9, roughness: 0.9, flatShading: true });

  // Shared geometries
  const boxGeo = new THREE.BoxGeometry(0.1, 1, 0.1);
  const cylinderGeo = new THREE.CylinderGeometry(0, 0.075, 0.1, 4);
  const boxGeo2 = new THREE.BoxGeometry(2, 0.08, 0.04);

  // Parts
  const post = new THREE.Mesh(boxGeo, postMat);
  post.name = 'post';
  post.position.set(-1, 0.5, 0);
  root.add(post);
  const postCap = new THREE.Mesh(cylinderGeo, postMat);
  postCap.name = 'postCap';
  postCap.position.set(-1, 1.05, 0);
  postCap.rotation.set(0, deg(45), 0);
  root.add(postCap);
  const post2 = new THREE.Mesh(boxGeo, postMat);
  post2.name = 'post';
  post2.position.set(1, 0.5, 0);
  root.add(post2);
  const postCap2 = new THREE.Mesh(cylinderGeo, postMat);
  postCap2.name = 'postCap';
  postCap2.position.set(1, 1.05, 0);
  postCap2.rotation.set(0, deg(45), 0);
  root.add(postCap2);
  const rail = new THREE.Mesh(boxGeo2, postMat);
  rail.name = 'rail';
  rail.position.set(0, 0.25, -0.01);
  root.add(rail);
  const rail2 = new THREE.Mesh(boxGeo2, postMat);
  rail2.name = 'rail';
  rail2.position.set(0, 0.72, -0.01);
  root.add(rail2);
  const picket = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8152], [0, 0.8852], [-0.0425, 0.8152]], 0.025), boardMat);
  picket.name = 'picket';
  picket.position.set(-0.81, 0.04, 0.025);
  picket.rotation.set(0, 0, deg(0.5375));
  root.add(picket);
  const picket2 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8175], [0, 0.8875], [-0.0425, 0.8175]], 0.025), boardMat);
  picket2.name = 'picket';
  picket2.position.set(-0.675, 0.04, 0.025);
  picket2.rotation.set(0, 0, deg(-0.7217));
  root.add(picket2);
  const picket3 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8075], [0, 0.8775], [-0.0425, 0.8075]], 0.025), boardMat);
  picket3.name = 'picket';
  picket3.position.set(-0.54, 0.04, 0.025);
  picket3.rotation.set(0, 0, deg(-0.247));
  root.add(picket3);
  const picket4 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.7973], [0, 0.8673], [-0.0425, 0.7973]], 0.025), boardMat);
  picket4.name = 'picket';
  picket4.position.set(-0.405, 0.04, 0.025);
  picket4.rotation.set(0, 0, deg(0.6905));
  root.add(picket4);
  const picket5 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8194], [0, 0.8894], [-0.0425, 0.8194]], 0.025), boardMat);
  picket5.name = 'picket';
  picket5.position.set(-0.27, 0.04, 0.025);
  picket5.rotation.set(0, 0, deg(0.2617));
  root.add(picket5);
  const picket6 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8046], [0, 0.8746], [-0.0425, 0.8046]], 0.025), boardMat);
  picket6.name = 'picket';
  picket6.position.set(-0.135, 0.04, 0.025);
  picket6.rotation.set(0, 0, deg(0.3684));
  root.add(picket6);
  const picket7 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8122], [0, 0.8822], [-0.0425, 0.8122]], 0.025), boardMat);
  picket7.name = 'picket';
  picket7.position.set(0, 0.04, 0.025);
  picket7.rotation.set(0, 0, deg(-0.125));
  root.add(picket7);
  const picket8 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8166], [0, 0.8866], [-0.0425, 0.8166]], 0.025), boardMat);
  picket8.name = 'picket';
  picket8.position.set(0.135, 0.04, 0.025);
  picket8.rotation.set(0, 0, deg(-0.724));
  root.add(picket8);
  const picket9 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8164], [0, 0.8864], [-0.0425, 0.8164]], 0.025), boardMat);
  picket9.name = 'picket';
  picket9.position.set(0.27, 0.04, 0.025);
  picket9.rotation.set(0, 0, deg(0.4165));
  root.add(picket9);
  const picket10 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8203], [0, 0.8903], [-0.0425, 0.8203]], 0.025), boardMat);
  picket10.name = 'picket';
  picket10.position.set(0.405, 0.04, 0.025);
  picket10.rotation.set(0, 0, deg(-0.3463));
  root.add(picket10);
  const picket11 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8214], [0, 0.8914], [-0.0425, 0.8214]], 0.025), boardMat);
  picket11.name = 'picket';
  picket11.position.set(0.54, 0.04, 0.025);
  picket11.rotation.set(0, 0, deg(0.5331));
  root.add(picket11);
  const picket12 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8182], [0, 0.8882], [-0.0425, 0.8182]], 0.025), boardMat);
  picket12.name = 'picket';
  picket12.position.set(0.675, 0.04, 0.025);
  picket12.rotation.set(0, 0, deg(0.4861));
  root.add(picket12);
  const picket13 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8237], [0, 0.8937], [-0.0425, 0.8237]], 0.025), boardMat);
  picket13.name = 'picket';
  picket13.position.set(0.81, 0.04, 0.025);
  picket13.rotation.set(0, 0, deg(0.248));
  root.add(picket13);

  root.traverse((o) => {
    if (o.isMesh) {
      o.castShadow = true;
      o.receiveShadow = true;
    }
  });
  return root;
}

export default createWoodenFence;
```

---
Codels — 3D models as code for three.js. Search more: https://codels.download/api/v1/models?q=<query> · Guide: https://codels.download/llms.txt