76 tris0.69 × 0.99 × 0.21 m
Use it in code
Remix in the editorarrow-marker.js · 54 lines
Self-contained ES module — only depends on three. Call the factory and add the group to your scene.
/**
* Arrow Marker — Codels 3D model library
* 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;
Ratings & comments
0 comments
No comments yet. Share how you used this model or what could be better.
Related models
Same category or similar tags









