302 tris0.60 × 2.56 × 0.20 m
Use it in code
Remix in the editorroad-sign.js · 137 lines
Self-contained ES module — only depends on three. Call the factory and add the group to your scene.
/**
* Road Sign — Codels 3D model library
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
* Triangles: 302 · Size (W × H × D): 0.60 × 2.56 × 0.20 m
*
* Usage:
* import { createRoadSign } from './road-sign.js';
*
* const model = createRoadSign();
* model.position.set(0, 0, 0);
* scene.add(model);
*/
import * as THREE from 'three';
const deg = THREE.MathUtils.degToRad;
export function createRoadSign() {
const root = new THREE.Group();
root.name = 'RoadSign';
// Materials
const postMat = new THREE.MeshStandardMaterial({ name: 'post', color: 0x9aa1a6, roughness: 0.45, metalness: 0.6, flatShading: true });
const concreteMat = new THREE.MeshStandardMaterial({ name: 'concrete', color: 0x9c998f, roughness: 0.95, flatShading: true });
const backMat = new THREE.MeshStandardMaterial({ name: 'back', color: 0x8e949a, roughness: 0.5, metalness: 0.5, flatShading: true });
const darkMat = new THREE.MeshStandardMaterial({ name: 'dark', color: 0x3a3f44, roughness: 0.6, metalness: 0.4, flatShading: true });
const whiteMat = new THREE.MeshStandardMaterial({ name: 'white', color: 0xf3f3ee, roughness: 0.45, flatShading: true });
const redMat = new THREE.MeshStandardMaterial({ name: 'red', color: 0xc3161c, roughness: 0.45, flatShading: true });
const blackMat = new THREE.MeshStandardMaterial({ name: 'black', color: 0x1c1d20, roughness: 0.5, flatShading: true });
// Shared geometries
const boxGeo = new THREE.BoxGeometry(0.1, 0.035, 0.03);
const boxGeo2 = new THREE.BoxGeometry(0.075, 0.03, 0.016);
const planeGeo = new THREE.PlaneGeometry(0.1064, 0.0323);
const planeGeo2 = new THREE.PlaneGeometry(0.0323, 0.095);
// Parts
const footing = new THREE.Mesh(new THREE.CylinderGeometry(0.09, 0.1, 0.06, 8), concreteMat);
footing.name = 'footing';
footing.position.set(0, 0.03, 0);
root.add(footing);
const post = new THREE.Mesh(new THREE.CylinderGeometry(0.03, 0.03, 2.38, 8), postMat);
post.name = 'post';
post.position.set(0, 1.25, 0);
root.add(post);
const postCap = new THREE.Mesh(new THREE.SphereGeometry(0.033, 8, 2, 0, Math.PI * 2, 0, Math.PI / 2), postMat);
postCap.name = 'postCap';
postCap.position.set(0, 2.44, 0);
root.add(postCap);
const bracket = new THREE.Mesh(boxGeo, darkMat);
bracket.name = 'bracket';
bracket.position.set(0, 2.11, 0.03);
root.add(bracket);
const clamp = new THREE.Mesh(boxGeo2, darkMat);
clamp.name = 'clamp';
clamp.position.set(0, 2.11, -0.035);
root.add(clamp);
const bracket2 = new THREE.Mesh(boxGeo, darkMat);
bracket2.name = 'bracket';
bracket2.position.set(0, 2.41, 0.03);
root.add(bracket2);
const clamp2 = new THREE.Mesh(boxGeo2, darkMat);
clamp2.name = 'clamp';
clamp2.position.set(0, 2.41, -0.035);
root.add(clamp2);
const sign = new THREE.Group();
sign.name = 'sign';
sign.position.set(0, 2.26, 0.045);
root.add(sign);
const signBack = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.3, 0.01, 24), backMat);
signBack.name = 'signBack';
signBack.position.set(0, 0, 0.0055);
signBack.rotation.set(deg(90), 0, 0);
sign.add(signBack);
const signFace = new THREE.Mesh(new THREE.CircleGeometry(0.298, 24), redMat);
signFace.name = 'signFace';
signFace.position.set(0, 0, 0.0127);
sign.add(signFace);
const signInner = new THREE.Mesh(new THREE.CircleGeometry(0.225, 24), whiteMat);
signInner.name = 'signInner';
signInner.position.set(0, 0, 0.0139);
sign.add(signInner);
const paint = new THREE.Mesh(planeGeo, blackMat);
paint.name = 'paint';
paint.position.set(-0.0702, 0.0789, 0.0151);
sign.add(paint);
const paint2 = new THREE.Mesh(planeGeo2, blackMat);
paint2.name = 'paint';
paint2.position.set(-0.1073, 0.0475, 0.0151);
sign.add(paint2);
const paint3 = new THREE.Mesh(planeGeo, blackMat);
paint3.name = 'paint';
paint3.position.set(-0.0702, 0, 0.0151);
sign.add(paint3);
const paint4 = new THREE.Mesh(planeGeo2, blackMat);
paint4.name = 'paint';
paint4.position.set(-0.0332, -0.0475, 0.0151);
sign.add(paint4);
const paint5 = new THREE.Mesh(planeGeo, blackMat);
paint5.name = 'paint';
paint5.position.set(-0.0702, -0.0788, 0.0151);
sign.add(paint5);
const paint6 = new THREE.Mesh(planeGeo, blackMat);
paint6.name = 'paint';
paint6.position.set(0.0702, 0.0789, 0.0151);
sign.add(paint6);
const paint7 = new THREE.Mesh(planeGeo2, blackMat);
paint7.name = 'paint';
paint7.position.set(0.1073, 0.0475, 0.0151);
sign.add(paint7);
const paint8 = new THREE.Mesh(planeGeo2, blackMat);
paint8.name = 'paint';
paint8.position.set(0.1073, -0.0475, 0.0151);
sign.add(paint8);
const paint9 = new THREE.Mesh(planeGeo, blackMat);
paint9.name = 'paint';
paint9.position.set(0.0702, -0.0788, 0.0151);
sign.add(paint9);
const paint10 = new THREE.Mesh(planeGeo2, blackMat);
paint10.name = 'paint';
paint10.position.set(0.0332, -0.0475, 0.0151);
sign.add(paint10);
const paint11 = new THREE.Mesh(planeGeo2, blackMat);
paint11.name = 'paint';
paint11.position.set(0.0332, 0.0475, 0.0151);
sign.add(paint11);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createRoadSign;
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









