# Pressure Plate

> A square floor pressure plate for puzzles, traps and doors: a riveted dark steel frame with a recessed light gap and a chunky colored plate marked with four chevrons pointing at a center stud. Pressed sinks the plate flush and switches the glow from amber to green. The plate is the 'plate' group with its origin at its bottom center, so you can push it down in code; 1 m or 2 m sizes.

![Pressure Plate preview](https://codels.download/m/pressure-plate.png)

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

## Facts

- Category: Game Kit › Interactive
- Size (W × H × D): 1.00 × 0.21 × 1.00 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 464 · Meshes: 26 · Materials: 7
- License: CC0-1.0 (Codels built-in)
- Tags: pressure-plate, switch, cartoon, low-poly, stylized, sci-fi, dungeon, adventure, party-game, platformer, puzzle, interactable, modular, metal, flat, emissive, game-ready, mobile-friendly, parametric, color-blue, color-orange, size-medium, poly-low
- Page: https://codels.download/models/pressure-plate

## Files

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

## Parameters

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

| Param | Type | Range / options | Default | Current |
|---|---|---|---|---|
| `pressed` | boolean | true \| false | false | false |
| `color` | color | #rrggbb | #ff8a2a | #ff8a2a |
| `size` | int | 1 – 2 | 1 | 1 |

## Parts

- frameBase (box · frame)
- gapGlow (box · glow)
- plate (group)
  - plateBody (box · plate)
  - plateTop (box · plateTop)
  - stud (cylinder · mark)
  - studLight (cylinder · glow)
  - chevron1 (group)
  - chevron2 (group)
  - chevron3 (group)
  - chevron4 (group)

## How to use

Save the code below as `pressure-plate.js`, then:

```js
import { createPressurePlate } from './pressure-plate.js';
const model = createPressurePlate();
scene.add(model);
```

## Code

```js
/**
 * Pressure Plate — Codels 3D model library (https://codels.download/models/pressure-plate)
 * License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
 * Triangles: 464 · Size (W × H × D): 1.00 × 0.21 × 1.00 m
 *
 * Usage:
 *   import { createPressurePlate } from './pressure-plate.js';
 *   
 *   const model = createPressurePlate();
 *   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 createPressurePlate() {
  const root = new THREE.Group();
  root.name = 'PressurePlate';

  // Materials
  const frameMat = new THREE.MeshStandardMaterial({ name: 'frame', color: 0x3a4252, roughness: 0.6, metalness: 0.35, flatShading: true });
  const darkMat = new THREE.MeshStandardMaterial({ name: 'dark', color: 0x1c1f26, roughness: 0.8, flatShading: true });
  const steelMat = new THREE.MeshStandardMaterial({ name: 'steel', color: 0xaeb6c2, roughness: 0.3, metalness: 0.75, flatShading: true });
  const plateMat = new THREE.MeshStandardMaterial({ name: 'plate', color: 0xff8a2a, roughness: 0.5, flatShading: true });
  const plateTopMat = new THREE.MeshStandardMaterial({ name: 'plateTop', color: 0xff9844, roughness: 0.5, flatShading: true });
  const markMat = new THREE.MeshStandardMaterial({ name: 'mark', color: 0xa65a1b, roughness: 0.6, flatShading: true });
  const glowMat = new THREE.MeshStandardMaterial({ name: 'glow', color: 0xffb347, roughness: 0.4, emissive: 0xff9a1f, emissiveIntensity: 0.7, flatShading: true });

  // Shared geometries
  const boxGeo = new THREE.BoxGeometry(1, 0.06, 0.09);
  const boxGeo2 = new THREE.BoxGeometry(0.09, 0.06, 0.82);
  const boxGeo3 = new THREE.BoxGeometry(1, 0.012, 0.02);
  const boxGeo4 = new THREE.BoxGeometry(0.02, 0.012, 0.8);
  const cylinderGeo = new THREE.CylinderGeometry(0.022, 0.022, 0.015, 6);
  const boxGeo5 = new THREE.BoxGeometry(0.24, 0.014, 0.035);
  const boxGeo6 = new THREE.BoxGeometry(0.035, 0.014, 0.24);
  const extrudeGeo = extrude([[0, 0], [0.12, -0.12], [0.12, -0.17], [0, -0.05], [-0.12, -0.17], [-0.12, -0.12]], 0.012);

  // Parts
  const frameBase = new THREE.Mesh(new THREE.BoxGeometry(1, 0.04, 1), frameMat);
  frameBase.name = 'frameBase';
  frameBase.position.set(0, 0.02, 0);
  root.add(frameBase);
  const gapGlow = new THREE.Mesh(new THREE.BoxGeometry(0.82, 0.012, 0.82), glowMat);
  gapGlow.name = 'gapGlow';
  gapGlow.position.set(0, 0.046, 0);
  root.add(gapGlow);
  const box3 = new THREE.Mesh(boxGeo, frameMat);
  box3.position.set(0, 0.07, -0.455);
  root.add(box3);
  const box4 = new THREE.Mesh(boxGeo2, frameMat);
  box4.position.set(-0.455, 0.07, 0);
  root.add(box4);
  const box5 = new THREE.Mesh(boxGeo3, darkMat);
  box5.position.set(0, 0.106, -0.422);
  root.add(box5);
  const box6 = new THREE.Mesh(boxGeo4, darkMat);
  box6.position.set(-0.422, 0.106, 0);
  root.add(box6);
  const box7 = new THREE.Mesh(boxGeo, frameMat);
  box7.position.set(0, 0.07, 0.455);
  root.add(box7);
  const box8 = new THREE.Mesh(boxGeo2, frameMat);
  box8.position.set(0.455, 0.07, 0);
  root.add(box8);
  const box9 = new THREE.Mesh(boxGeo3, darkMat);
  box9.position.set(0, 0.106, 0.422);
  root.add(box9);
  const box10 = new THREE.Mesh(boxGeo4, darkMat);
  box10.position.set(0.422, 0.106, 0);
  root.add(box10);
  const cylinder11 = new THREE.Mesh(cylinderGeo, steelMat);
  cylinder11.position.set(-0.455, 0.1075, -0.455);
  root.add(cylinder11);
  const cylinder12 = new THREE.Mesh(cylinderGeo, steelMat);
  cylinder12.position.set(0.455, 0.1075, -0.455);
  root.add(cylinder12);
  const cylinder13 = new THREE.Mesh(cylinderGeo, steelMat);
  cylinder13.position.set(0.455, 0.1075, 0.455);
  root.add(cylinder13);
  const cylinder14 = new THREE.Mesh(cylinderGeo, steelMat);
  cylinder14.position.set(-0.455, 0.1075, 0.455);
  root.add(cylinder14);
  const box15 = new THREE.Mesh(boxGeo5, glowMat);
  box15.position.set(0, 0.107, 0.455);
  root.add(box15);
  const box16 = new THREE.Mesh(boxGeo6, glowMat);
  box16.position.set(0.455, 0.107, 0);
  root.add(box16);
  const box17 = new THREE.Mesh(boxGeo5, glowMat);
  box17.position.set(0, 0.107, -0.455);
  root.add(box17);
  const box18 = new THREE.Mesh(boxGeo6, glowMat);
  box18.position.set(-0.455, 0.107, 0);
  root.add(box18);
  const plate = new THREE.Group();
  plate.name = 'plate';
  plate.position.set(0, 0.08, 0);
  root.add(plate);
  const plateBody = new THREE.Mesh(new THREE.BoxGeometry(0.74, 0.08, 0.74), plateMat);
  plateBody.name = 'plateBody';
  plateBody.position.set(0, 0.04, 0);
  plate.add(plateBody);
  const plateTop = new THREE.Mesh(new THREE.BoxGeometry(0.66, 0.012, 0.66), plateTopMat);
  plateTop.name = 'plateTop';
  plateTop.position.set(0, 0.086, 0);
  plate.add(plateTop);
  const stud = new THREE.Mesh(new THREE.CylinderGeometry(0.09, 0.1, 0.025, 12), markMat);
  stud.name = 'stud';
  stud.position.set(0, 0.1045, 0);
  plate.add(stud);
  const studLight = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.05, 0.012, 12), glowMat);
  studLight.name = 'studLight';
  studLight.position.set(0, 0.123, 0);
  plate.add(studLight);
  const chevron1 = new THREE.Group();
  chevron1.name = 'chevron1';
  chevron1.position.set(0, 0.098, 0);
  plate.add(chevron1);
  const extrude25 = new THREE.Mesh(extrudeGeo, markMat);
  extrude25.position.set(0, 0, -0.12);
  extrude25.rotation.set(deg(90), 0, 0);
  chevron1.add(extrude25);
  const chevron2 = new THREE.Group();
  chevron2.name = 'chevron2';
  chevron2.position.set(0, 0.098, 0);
  chevron2.rotation.set(0, deg(90), 0);
  plate.add(chevron2);
  const extrude27 = new THREE.Mesh(extrudeGeo, markMat);
  extrude27.position.set(0, 0, -0.12);
  extrude27.rotation.set(deg(90), 0, 0);
  chevron2.add(extrude27);
  const chevron3 = new THREE.Group();
  chevron3.name = 'chevron3';
  chevron3.position.set(0, 0.098, 0);
  chevron3.rotation.set(0, deg(180), 0);
  plate.add(chevron3);
  const extrude29 = new THREE.Mesh(extrudeGeo, markMat);
  extrude29.position.set(0, 0, -0.12);
  extrude29.rotation.set(deg(90), 0, 0);
  chevron3.add(extrude29);
  const chevron4 = new THREE.Group();
  chevron4.name = 'chevron4';
  chevron4.position.set(0, 0.098, 0);
  chevron4.rotation.set(0, deg(270), 0);
  plate.add(chevron4);
  const extrude31 = new THREE.Mesh(extrudeGeo, markMat);
  extrude31.position.set(0, 0, -0.12);
  extrude31.rotation.set(deg(90), 0, 0);
  chevron4.add(extrude31);

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

export default createPressurePlate;
```

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