# Modular Grid Pillar

> A corner post for the 2 m grid modular kit: a 0.4 × 0.4 m pier (0.46 m plinth and cap) centered on its origin at a grid-line intersection, 3 m high like the walls or 1 m for half walls. It covers the notch where two perpendicular walls meet, caps free wall ends and stacks storey on storey. Coursed stone, brick bond, chamfered timber post for plaster or plank walls.

![Modular Grid Pillar preview](https://codels.download/m/grid-pillar.png)

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

## Facts

- Category: Buildings › Modular Kit
- Size (W × H × D): 0.46 × 3.00 × 0.46 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 144 · Meshes: 12 · Materials: 6
- License: CC0-1.0 (Codels built-in)
- Tags: corner, grid, house, pillar, post, wall, low-poly, stylized, fantasy, medieval, castle, dungeon, exterior, interior, village, adventure, roguelike, rpg, building, modular, brick, stone, wood, game-ready, instancing-friendly, mobile-friendly, parametric, color-gray, size-large, poly-ultra-low
- Page: https://codels.download/models/grid-pillar

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `style` | select | stone \| brick \| plaster \| wood | stone | stone |
| `height` | select | full \| half | full | full |
| `tint` | color | #rrggbb | #ffffff | #ffffff |

## Parts

- plinth (box · plinth)
- cap (box · dressed)
- core (box · mortar)
- block (box · stone3)
- block (box · stone3)
- block (box · stone3)
- block (box · stone)
- block (box · stone2)
- block (box · stone2)
- block (box · stone)
- block (box · stone3)
- block (box · stone3)

## How to use

Save the code below as `grid-pillar.js`, then:

```js
import { createGridPillar } from './grid-pillar.js';
const model = createGridPillar();
scene.add(model);
```

## Code

```js
/**
 * Modular Grid Pillar — Codels 3D model library (https://codels.download/models/grid-pillar)
 * License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
 * Triangles: 144 · Size (W × H × D): 0.46 × 3.00 × 0.46 m
 *
 * Usage:
 *   import { createGridPillar } from './grid-pillar.js';
 *   
 *   const model = createGridPillar();
 *   model.position.set(0, 0, 0);
 *   scene.add(model);
 */
import * as THREE from 'three';

// 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 createGridPillar() {
  const root = new THREE.Group();
  root.name = 'GridPillar';

  // Materials
  const stoneMat = new THREE.MeshStandardMaterial({ name: 'stone', color: 0x7c7871, roughness: 0.95, flatShading: true });
  const stone2Mat = new THREE.MeshStandardMaterial({ name: 'stone2', color: 0x67635c, roughness: 0.95, flatShading: true });
  const stone3Mat = new THREE.MeshStandardMaterial({ name: 'stone3', color: 0x8b867c, roughness: 0.95, flatShading: true });
  const mortarMat = new THREE.MeshStandardMaterial({ name: 'mortar', color: 0x3f3c38, roughness: 1, flatShading: true });
  const plinthMat = new THREE.MeshStandardMaterial({ name: 'plinth', color: 0x57534d, roughness: 0.95, flatShading: true });
  const dressedMat = new THREE.MeshStandardMaterial({ name: 'dressed', color: 0x9a9488, roughness: 0.9, flatShading: true });

  // Parts
  const plinth = new THREE.Mesh(new THREE.BoxGeometry(0.46, 0.35, 0.46), plinthMat);
  plinth.name = 'plinth';
  plinth.position.set(0, 0.175, 0);
  root.add(plinth);
  const cap = new THREE.Mesh(new THREE.BoxGeometry(0.46, 0.25, 0.46), dressedMat);
  cap.name = 'cap';
  cap.position.set(0, 2.875, 0);
  root.add(cap);
  const core = new THREE.Mesh(new THREE.BoxGeometry(0.37, 2.4, 0.37), mortarMat);
  core.name = 'core';
  core.position.set(0, 1.55, 0);
  root.add(core);
  const block = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4, 0.23, 0.412), 0.004, 40), stone3Mat);
  block.name = 'block';
  block.position.set(0, 0.475, 0);
  root.add(block);
  const block2 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.412, 0.28, 0.4), 0.004, 41), stone3Mat);
  block2.name = 'block';
  block2.position.set(0, 0.75, 0);
  root.add(block2);
  const block3 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4, 0.255, 0.412), 0.004, 42), stone3Mat);
  block3.name = 'block';
  block3.position.set(0, 1.0375, 0);
  root.add(block3);
  const block4 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.412, 0.255, 0.4), 0.004, 43), stoneMat);
  block4.name = 'block';
  block4.position.set(0, 1.3125, 0);
  root.add(block4);
  const block5 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4, 0.255, 0.412), 0.004, 44), stone2Mat);
  block5.name = 'block';
  block5.position.set(0, 1.5875, 0);
  root.add(block5);
  const block6 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.412, 0.255, 0.4), 0.004, 45), stone2Mat);
  block6.name = 'block';
  block6.position.set(0, 1.8625, 0);
  root.add(block6);
  const block7 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4, 0.18, 0.412), 0.004, 46), stoneMat);
  block7.name = 'block';
  block7.position.set(0, 2.1, 0);
  root.add(block7);
  const block8 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.412, 0.28, 0.4), 0.004, 47), stone3Mat);
  block8.name = 'block';
  block8.position.set(0, 2.35, 0);
  root.add(block8);
  const block9 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4, 0.23, 0.412), 0.004, 48), stone3Mat);
  block9.name = 'block';
  block9.position.set(0, 2.625, 0);
  root.add(block9);

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

export default createGridPillar;
```

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