272 tris2.11 × 1.10 × 0.11 m
Use it in code
Remix in the editorwooden-fence.js · 143 lines
Self-contained ES module — only depends on three. Call the factory and add the group to your scene.
/**
* Wooden Fence — Codels 3D model library
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
* Triangles: 272 · Size (W × H × D): 2.11 × 1.10 × 0.11 m
*
* Usage:
* import { createWoodenFence } from './wooden-fence.js';
*
* const model = createWoodenFence();
* 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 createWoodenFence() {
const root = new THREE.Group();
root.name = 'WoodenFence';
// Materials
const boardMat = new THREE.MeshStandardMaterial({ name: 'board', color: 0xf1ece2, roughness: 0.85, flatShading: true });
const postMat = new THREE.MeshStandardMaterial({ name: 'post', color: 0xc6c2b9, roughness: 0.9, flatShading: true });
// Shared geometries
const boxGeo = new THREE.BoxGeometry(0.1, 1, 0.1);
const cylinderGeo = new THREE.CylinderGeometry(0, 0.075, 0.1, 4);
const boxGeo2 = new THREE.BoxGeometry(2, 0.08, 0.04);
// Parts
const post = new THREE.Mesh(boxGeo, postMat);
post.name = 'post';
post.position.set(-1, 0.5, 0);
root.add(post);
const postCap = new THREE.Mesh(cylinderGeo, postMat);
postCap.name = 'postCap';
postCap.position.set(-1, 1.05, 0);
postCap.rotation.set(0, deg(45), 0);
root.add(postCap);
const post2 = new THREE.Mesh(boxGeo, postMat);
post2.name = 'post';
post2.position.set(1, 0.5, 0);
root.add(post2);
const postCap2 = new THREE.Mesh(cylinderGeo, postMat);
postCap2.name = 'postCap';
postCap2.position.set(1, 1.05, 0);
postCap2.rotation.set(0, deg(45), 0);
root.add(postCap2);
const rail = new THREE.Mesh(boxGeo2, postMat);
rail.name = 'rail';
rail.position.set(0, 0.25, -0.01);
root.add(rail);
const rail2 = new THREE.Mesh(boxGeo2, postMat);
rail2.name = 'rail';
rail2.position.set(0, 0.72, -0.01);
root.add(rail2);
const picket = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8152], [0, 0.8852], [-0.0425, 0.8152]], 0.025), boardMat);
picket.name = 'picket';
picket.position.set(-0.81, 0.04, 0.025);
picket.rotation.set(0, 0, deg(0.5375));
root.add(picket);
const picket2 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8175], [0, 0.8875], [-0.0425, 0.8175]], 0.025), boardMat);
picket2.name = 'picket';
picket2.position.set(-0.675, 0.04, 0.025);
picket2.rotation.set(0, 0, deg(-0.7217));
root.add(picket2);
const picket3 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8075], [0, 0.8775], [-0.0425, 0.8075]], 0.025), boardMat);
picket3.name = 'picket';
picket3.position.set(-0.54, 0.04, 0.025);
picket3.rotation.set(0, 0, deg(-0.247));
root.add(picket3);
const picket4 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.7973], [0, 0.8673], [-0.0425, 0.7973]], 0.025), boardMat);
picket4.name = 'picket';
picket4.position.set(-0.405, 0.04, 0.025);
picket4.rotation.set(0, 0, deg(0.6905));
root.add(picket4);
const picket5 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8194], [0, 0.8894], [-0.0425, 0.8194]], 0.025), boardMat);
picket5.name = 'picket';
picket5.position.set(-0.27, 0.04, 0.025);
picket5.rotation.set(0, 0, deg(0.2617));
root.add(picket5);
const picket6 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8046], [0, 0.8746], [-0.0425, 0.8046]], 0.025), boardMat);
picket6.name = 'picket';
picket6.position.set(-0.135, 0.04, 0.025);
picket6.rotation.set(0, 0, deg(0.3684));
root.add(picket6);
const picket7 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8122], [0, 0.8822], [-0.0425, 0.8122]], 0.025), boardMat);
picket7.name = 'picket';
picket7.position.set(0, 0.04, 0.025);
picket7.rotation.set(0, 0, deg(-0.125));
root.add(picket7);
const picket8 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8166], [0, 0.8866], [-0.0425, 0.8166]], 0.025), boardMat);
picket8.name = 'picket';
picket8.position.set(0.135, 0.04, 0.025);
picket8.rotation.set(0, 0, deg(-0.724));
root.add(picket8);
const picket9 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8164], [0, 0.8864], [-0.0425, 0.8164]], 0.025), boardMat);
picket9.name = 'picket';
picket9.position.set(0.27, 0.04, 0.025);
picket9.rotation.set(0, 0, deg(0.4165));
root.add(picket9);
const picket10 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8203], [0, 0.8903], [-0.0425, 0.8203]], 0.025), boardMat);
picket10.name = 'picket';
picket10.position.set(0.405, 0.04, 0.025);
picket10.rotation.set(0, 0, deg(-0.3463));
root.add(picket10);
const picket11 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8214], [0, 0.8914], [-0.0425, 0.8214]], 0.025), boardMat);
picket11.name = 'picket';
picket11.position.set(0.54, 0.04, 0.025);
picket11.rotation.set(0, 0, deg(0.5331));
root.add(picket11);
const picket12 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8182], [0, 0.8882], [-0.0425, 0.8182]], 0.025), boardMat);
picket12.name = 'picket';
picket12.position.set(0.675, 0.04, 0.025);
picket12.rotation.set(0, 0, deg(0.4861));
root.add(picket12);
const picket13 = new THREE.Mesh(extrude([[-0.0425, 0], [0.0425, 0], [0.0425, 0.8237], [0, 0.8937], [-0.0425, 0.8237]], 0.025), boardMat);
picket13.name = 'picket';
picket13.position.set(0.81, 0.04, 0.025);
picket13.rotation.set(0, 0, deg(0.248));
root.add(picket13);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createWoodenFence;
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









