# Arrow

> A stylized wooden arrow (about 0.75 m) standing upright with the head pointing +Y: leaf broadhead or pointed bodkin tip, thread bindings and three feather vanes with a contrasting cock feather. Use it as ammo pickup, projectile, quiver filler or stuck-in-the-ground decoration in fantasy and medieval games.

![Arrow preview](https://codels.download/m/arrow.png)

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

## Facts

- Category: Items & Weapons › Weapons
- Size (W × H × D): 0.07 × 0.76 × 0.05 m — units are meters, +Y up, front faces +Z
- Origin: center of the base (y = 0)
- Triangles: 236 · Meshes: 11 · Materials: 5
- License: CC0-1.0 (Codels built-in)
- Tags: archery, arrow, low-poly, stylized, fantasy, medieval, adventure, rpg, survival, pickup, projectile, weapon, wood, game-ready, instancing-friendly, mobile-friendly, parametric, color-gray, multicolor, color-orange, color-red, size-small, poly-ultra-low
- Page: https://codels.download/models/arrow

## Files

| Format | URL |
|---|---|
| three.js ES module (`createArrow()`) | https://codels.download/m/arrow.js |
| React Three Fiber component (`<Arrow />`) | https://codels.download/m/arrow.jsx |
| Instancing module (`createArrowInstances(count, place)`, one draw call per material) | https://codels.download/m/arrow.instanced.js |
| Standalone HTML demo | https://codels.download/m/arrow.html |
| glTF binary | https://codels.download/m/arrow.glb |
| glTF binary, Meshopt-compressed (2–3× smaller; GLTFLoader needs `setMeshoptDecoder(MeshoptDecoder)`) | https://codels.download/m/arrow.glb?compress=meshopt |
| glTF JSON | https://codels.download/m/arrow.gltf |
| OBJ (vertex colors) + MTL | https://codels.download/m/arrow.obj · https://codels.download/m/arrow.mtl |
| STL | https://codels.download/m/arrow.stl |
| CodelSpec JSON | https://codels.download/m/arrow.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 | 0.5 – 1 | 0.75 | 0.75 |
| `head` | select | broadhead \| bodkin | broadhead | broadhead |
| `fletching` | color | #rrggbb | #d6493a | #d6493a |

## Parts

- nock (cylinder · thread)
- nockProngR (box · thread)
- nockProngL (box · thread)
- shaft (cylinder · shaft)
- vane1 (extrude · cock)
- vane2 (extrude · feather)
- vane3 (extrude · feather)
- binding1 (cylinder · thread)
- binding2 (cylinder · thread)
- socket (cylinder · steel)
- head (extrude · steel)

## How to use

Save the code below as `arrow.js`, then:

```js
import { createArrow } from './arrow.js';
const model = createArrow();
scene.add(model);
```

## Code

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

  // Materials
  const shaftMat = new THREE.MeshStandardMaterial({ name: 'shaft', color: 0xc79c5e, roughness: 0.85, flatShading: true });
  const steelMat = new THREE.MeshStandardMaterial({ name: 'steel', color: 0xa7b0ba, roughness: 0.35, metalness: 0.7, flatShading: true });
  const featherMat = new THREE.MeshStandardMaterial({ name: 'feather', color: 0xd6493a, roughness: 0.9, flatShading: true, side: THREE.DoubleSide });
  const cockMat = new THREE.MeshStandardMaterial({ name: 'cock', color: 0xf1ece0, roughness: 0.9, flatShading: true, side: THREE.DoubleSide });
  const threadMat = new THREE.MeshStandardMaterial({ name: 'thread', color: 0x3d2a1c, roughness: 0.9, flatShading: true });

  // Shared geometries
  const boxGeo = new THREE.BoxGeometry(0.004, 0.012, 0.012);
  const extrudeGeo = extrude([[0.0038, 0.04], [0.03, 0.052], [0.034, 0.1308], [0.022, 0.1803], [0.0038, 0.205]], 0.0025);
  const cylinderGeo = new THREE.CylinderGeometry(0.0093, 0.0093, 0.012, 6);

  // Parts
  const nock = new THREE.Mesh(new THREE.CylinderGeometry(0.0095, 0.0085, 0.022, 6), threadMat);
  nock.name = 'nock';
  nock.position.set(0, 0.011, 0);
  root.add(nock);
  const nockProngR = new THREE.Mesh(boxGeo, threadMat);
  nockProngR.name = 'nockProngR';
  nockProngR.position.set(0.0052, 0.022, 0);
  root.add(nockProngR);
  const nockProngL = new THREE.Mesh(boxGeo, threadMat);
  nockProngL.name = 'nockProngL';
  nockProngL.position.set(-0.0052, 0.022, 0);
  root.add(nockProngL);
  const shaft = new THREE.Mesh(new THREE.CylinderGeometry(0.0075, 0.0075, 0.64, 6), shaftMat);
  shaft.name = 'shaft';
  shaft.position.set(0, 0.34, 0);
  root.add(shaft);
  const vane1 = new THREE.Mesh(extrudeGeo, cockMat);
  vane1.name = 'vane1';
  vane1.rotation.set(0, deg(90), 0);
  root.add(vane1);
  const vane2 = new THREE.Mesh(extrudeGeo, featherMat);
  vane2.name = 'vane2';
  vane2.rotation.set(0, deg(210), 0);
  root.add(vane2);
  const vane3 = new THREE.Mesh(extrudeGeo, featherMat);
  vane3.name = 'vane3';
  vane3.rotation.set(0, deg(330), 0);
  root.add(vane3);
  const binding1 = new THREE.Mesh(cylinderGeo, threadMat);
  binding1.name = 'binding1';
  binding1.position.set(0, 0.034, 0);
  root.add(binding1);
  const binding2 = new THREE.Mesh(cylinderGeo, threadMat);
  binding2.name = 'binding2';
  binding2.position.set(0, 0.211, 0);
  root.add(binding2);
  const socket = new THREE.Mesh(new THREE.CylinderGeometry(0.0105, 0.0085, 0.035, 6), steelMat);
  socket.name = 'socket';
  socket.position.set(0, 0.6455, 0);
  root.add(socket);
  const head = new THREE.Mesh(extrude([[0, 0], [0.03, 0.025], [0.026, 0.055], [0, 0.11], [-0.026, 0.055], [-0.03, 0.025]], 0.002, [], [0.004, 0.003, 1]), steelMat);
  head.name = 'head';
  head.position.set(0, 0.65, 0);
  root.add(head);

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

export default createArrow;
```

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