# Arrow Marker

> A floating objective marker that points straight down at whatever matters: a chunky bevelled arrow, a stacked double chevron or a map-pin waypoint, all with a soft emissive tint. Centered on its origin so it can bob and spin above quest givers, pickups, doors and goals.

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

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

## Facts

- Category: Game Kit › Markers & Goals
- Size (W × H × D): 0.69 × 0.99 × 0.21 m — units are meters, +Y up, front faces +Z
- Origin: center of the model (it floats — pickups, planets)
- Triangles: 76 · Meshes: 2 · Materials: 2
- License: CC0-1.0 (Codels built-in)
- Tags: arrow, indicator, marker, waypoint, cartoon, low-poly, stylized, adventure, party-game, platformer, rpg, checkpoint, goal, signage, energy, emissive, game-ready, mobile-friendly, parametric, color-orange, color-white, size-small, poly-ultra-low
- Page: https://codels.download/models/arrow-marker

## Files

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

## Parts

- marker (group)
  - arrow (extrude · main)
  - arrowInset (extrude · white)

## How to use

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

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

## Code

```js
/**
 * Arrow Marker — Codels 3D model library (https://codels.download/models/arrow-marker)
 * License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the model (it floats — pickups, planets)
 * Triangles: 76 · Size (W × H × D): 0.69 × 0.99 × 0.21 m
 *
 * Usage:
 *   import { createArrowMarker } from './arrow-marker.js';
 *   
 *   const model = createArrowMarker();
 *   model.position.set(0, 0, 0);
 *   scene.add(model);
 */
import * as THREE from 'three';

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

  // Materials
  const mainMat = new THREE.MeshStandardMaterial({ name: 'main', color: 0xffc93c, roughness: 0.4, emissive: 0xffc93c, emissiveIntensity: 0.45, flatShading: true });
  const whiteMat = new THREE.MeshStandardMaterial({ name: 'white', color: 0xfff2ce, roughness: 0.3, emissive: 0xffffff, emissiveIntensity: 0.5, flatShading: true });

  // Parts
  const marker = new THREE.Group();
  marker.name = 'marker';
  root.add(marker);
  const arrow = new THREE.Mesh(extrude([[0, -0.47], [0.3, -0.07], [0.12, -0.07], [0.12, 0.44], [-0.12, 0.44], [-0.12, -0.07], [-0.3, -0.07]], 0.12, [], [0.035, 0.035, 1]), mainMat);
  arrow.name = 'arrow';
  marker.add(arrow);
  const arrowInset = new THREE.Mesh(extrude([[0, -0.309], [0.165, -0.061], [0.066, -0.061], [0.066, 0.2552], [-0.066, 0.2552], [-0.066, -0.061], [-0.165, -0.061]], 0.21), whiteMat);
  arrowInset.name = 'arrowInset';
  marker.add(arrowInset);

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

export default createArrowMarker;
```

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