# Ramp
> A clean wedge ramp for platformers, racing and party games, extruded from a single profile with grippy contrast stripes across the slope and darker side trims. Length, height and width snap to grid sizes; the low end faces +Z so it drops straight into a level layout.
Multi-view sheet (3/4, front, side, top): https://codels.download/m/ramp.sheet.png
## Facts
- Category: Game Kit › Platforms
- Size (W × H × D): 2.08 × 1.54 × 4.01 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 116 · Meshes: 9 · Materials: 3
- License: CC0-1.0 (Codels built-in)
- Tags: ramp, wedge, low-poly, minimal, stylized, endless-runner, party-game, platformer, racing-game, modular, obstacle, platform, plastic, game-ready, mobile-friendly, parametric, color-blue, size-large, poly-ultra-low
- Page: https://codels.download/models/ramp
## Files
| Format | URL |
|---|---|
| three.js ES module (`createRamp()`) | https://codels.download/m/ramp.js |
| React Three Fiber component (``) | https://codels.download/m/ramp.jsx |
| Instancing module (`createRampInstances(count, place)`, one draw call per material) | https://codels.download/m/ramp.instanced.js |
| Standalone HTML demo | https://codels.download/m/ramp.html |
| glTF binary | https://codels.download/m/ramp.glb |
| glTF binary, Meshopt-compressed (2–3× smaller; GLTFLoader needs `setMeshoptDecoder(MeshoptDecoder)`) | https://codels.download/m/ramp.glb?compress=meshopt |
| glTF JSON | https://codels.download/m/ramp.gltf |
| OBJ (vertex colors) + MTL | https://codels.download/m/ramp.obj · https://codels.download/m/ramp.mtl |
| STL | https://codels.download/m/ramp.stl |
| CodelSpec JSON | https://codels.download/m/ramp.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` | int | 1 – 8 | 4 | 4 |
| `height` | number | 0.5 – 4 | 1.5 | 1.5 |
| `width` | int | 1 – 4 | 2 | 2 |
| `color` | color | #rrggbb | #4a8ee6 | #4a8ee6 |
| `stripes` | boolean | true \| false | true | true |
## Parts
- wedge (extrude · body)
- railLeft (extrude · trim)
- railRight (extrude · trim)
- stripe1 (box · stripe)
- stripe2 (box · stripe)
- stripe3 (box · stripe)
- stripe4 (box · stripe)
- stripe5 (box · stripe)
- stripe6 (box · stripe)
## How to use
Save the code below as `ramp.js`, then:
```js
import { createRamp } from './ramp.js';
const model = createRamp();
scene.add(model);
```
## Code
```js
/**
* Ramp — Codels 3D model library (https://codels.download/models/ramp)
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
* Triangles: 116 · Size (W × H × D): 2.08 × 1.54 × 4.01 m
*
* Usage:
* import { createRamp } from './ramp.js';
*
* const model = createRamp();
* 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 createRamp() {
const root = new THREE.Group();
root.name = 'Ramp';
// Materials
const bodyMat = new THREE.MeshStandardMaterial({ name: 'body', color: 0x4a8ee6, roughness: 0.6, flatShading: true });
const trimMat = new THREE.MeshStandardMaterial({ name: 'trim', color: 0x305991, roughness: 0.6, flatShading: true });
const stripeMat = new THREE.MeshStandardMaterial({ name: 'stripe', color: 0xffd23f, roughness: 0.5, flatShading: true });
// Shared geometries
const extrudeGeo = extrude([[-2, 0], [2.01, 0], [2.01, 1.54], [1.75, 1.54], [-2, 0.04]], 0.05);
const boxGeo = new THREE.BoxGeometry(1.72, 0.02, 0.22);
// Parts
const wedge = new THREE.Mesh(extrude([[-2, 0], [2, 0], [2, 1.5], [1.75, 1.5]], 2), bodyMat);
wedge.name = 'wedge';
wedge.rotation.set(0, deg(90), 0);
root.add(wedge);
const railLeft = new THREE.Mesh(extrudeGeo, trimMat);
railLeft.name = 'railLeft';
railLeft.position.set(-1.015, 0, 0);
railLeft.rotation.set(0, deg(90), 0);
root.add(railLeft);
const railRight = new THREE.Mesh(extrudeGeo, trimMat);
railRight.name = 'railRight';
railRight.position.set(1.015, 0, 0);
railRight.rotation.set(0, deg(90), 0);
root.add(railRight);
const stripe1 = new THREE.Mesh(boxGeo, stripeMat);
stripe1.name = 'stripe1';
stripe1.position.set(0, 0.2234, 1.4576);
stripe1.rotation.set(deg(21.8014), 0, 0);
root.add(stripe1);
const stripe2 = new THREE.Mesh(boxGeo, stripeMat);
stripe2.name = 'stripe2';
stripe2.position.set(0, 0.4363, 0.9255);
stripe2.rotation.set(deg(21.8014), 0, 0);
root.add(stripe2);
const stripe3 = new THREE.Mesh(boxGeo, stripeMat);
stripe3.name = 'stripe3';
stripe3.position.set(0, 0.6491, 0.3933);
stripe3.rotation.set(deg(21.8014), 0, 0);
root.add(stripe3);
const stripe4 = new THREE.Mesh(boxGeo, stripeMat);
stripe4.name = 'stripe4';
stripe4.position.set(0, 0.862, -0.1388);
stripe4.rotation.set(deg(21.8014), 0, 0);
root.add(stripe4);
const stripe5 = new THREE.Mesh(boxGeo, stripeMat);
stripe5.name = 'stripe5';
stripe5.position.set(0, 1.0749, -0.671);
stripe5.rotation.set(deg(21.8014), 0, 0);
root.add(stripe5);
const stripe6 = new THREE.Mesh(boxGeo, stripeMat);
stripe6.name = 'stripe6';
stripe6.position.set(0, 1.2877, -1.2032);
stripe6.rotation.set(deg(21.8014), 0, 0);
root.add(stripe6);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createRamp;
```
---
Codels — 3D models as code for three.js. Search more: https://codels.download/api/v1/models?q= · Guide: https://codels.download/llms.txt