Codels
572 tris2.00 × 3.00 × 0.36 m

Use it in code

Remix in the editor
Self-contained ES module — only depends on three. Call the factory and add the group to your scene.
/**
 * Modular Window Wall — Codels 3D model library
 * License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
 * Triangles: 572 · Size (W × H × D): 2.00 × 3.00 × 0.35 m
 *
 * Usage:
 *   import { createWindowWall } from './window-wall.js';
 *   
 *   const model = createWindowWall();
 *   model.position.set(0, 0, 0);
 *   scene.add(model);
 */
import * as THREE from 'three';

// Deterministic vertex displacement (organic low-poly look).
function jitter(geometry, amount, seed) {
  const pos = geometry.attributes.position;
  const h = (a, b, c, s) => {
    let x = Math.imul(a, 73856093) ^ Math.imul(b, 19349663) ^ Math.imul(c, 83492791) ^ Math.imul(s, 2654435761);
    x = Math.imul(x ^ (x >>> 16), 2246822507);
    x = Math.imul(x ^ (x >>> 13), 3266489909);
    return ((x ^ (x >>> 16)) >>> 0) / 4294967295 - 0.5;
  };
  for (let i = 0; i < pos.count; i++) {
    const x = pos.getX(i), y = pos.getY(i), z = pos.getZ(i);
    const qx = Math.round(x * 1000), qy = Math.round(y * 1000), qz = Math.round(z * 1000);
    pos.setXYZ(i, x + h(qx, qy, qz, seed) * 2 * amount, y + h(qx, qy, qz, seed + 1) * 2 * amount, z + h(qx, qy, qz, seed + 2) * 2 * amount);
  }
  pos.needsUpdate = true;
  geometry.computeVertexNormals();
  return geometry;
}

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

  // Materials
  const stoneMat = new THREE.MeshStandardMaterial({ name: 'stone', color: 0x7c7871, roughness: 0.95, flatShading: true });
  const stone2Mat = new THREE.MeshStandardMaterial({ name: 'stone2', color: 0x67635c, roughness: 0.95, flatShading: true });
  const stone3Mat = new THREE.MeshStandardMaterial({ name: 'stone3', color: 0x8b867c, roughness: 0.95, flatShading: true });
  const mortarMat = new THREE.MeshStandardMaterial({ name: 'mortar', color: 0x3f3c38, roughness: 1, flatShading: true });
  const plinthMat = new THREE.MeshStandardMaterial({ name: 'plinth', color: 0x57534d, roughness: 0.95, flatShading: true });
  const dressedMat = new THREE.MeshStandardMaterial({ name: 'dressed', color: 0x9a9488, roughness: 0.9, flatShading: true });
  const glassMat = new THREE.MeshStandardMaterial({ name: 'glass', color: 0xa9d0e2, roughness: 0.08, metalness: 0.1, transparent: true, opacity: 0.35 });
  const sashMat = new THREE.MeshStandardMaterial({ name: 'sash', color: 0x34302c, roughness: 0.8, flatShading: true });

  // Shared geometries
  const boxGeo = new THREE.BoxGeometry(0.045, 1.18, 0.25);
  const boxGeo2 = new THREE.BoxGeometry(0.21, 0.255, 0.3);
  const boxGeo3 = new THREE.BoxGeometry(0.33, 0.255, 0.3);
  const boxGeo4 = new THREE.BoxGeometry(0.05, 1.1, 0.06);
  const boxGeo5 = new THREE.BoxGeometry(0.9, 0.05, 0.06);

  // Parts
  const plinth = new THREE.Mesh(new THREE.BoxGeometry(2, 0.3, 0.31), plinthMat);
  plinth.name = 'plinth';
  plinth.position.set(0, 0.15, 0);
  root.add(plinth);
  const cap = new THREE.Mesh(new THREE.BoxGeometry(2, 0.2, 0.32), dressedMat);
  cap.name = 'cap';
  cap.position.set(0, 2.9, 0);
  root.add(cap);
  const core = new THREE.Mesh(extrude([[-1, 0.3], [1, 0.3], [1, 2.8], [-1, 2.8]], 0.25, [[[-0.54, 0.86], [0.54, 0.86], [0.54, 2.04], [-0.54, 2.04]]]), mortarMat);
  core.name = 'core';
  root.add(core);
  const revealLining = new THREE.Mesh(boxGeo, mortarMat);
  revealLining.name = 'revealLining';
  revealLining.position.set(-0.5275, 1.45, 0);
  root.add(revealLining);
  const revealLining2 = new THREE.Mesh(boxGeo, mortarMat);
  revealLining2.name = 'revealLining';
  revealLining2.position.set(0.5275, 1.45, 0);
  root.add(revealLining2);
  const jamb = new THREE.Mesh(boxGeo2, dressedMat);
  jamb.name = 'jamb';
  jamb.position.set(-0.605, 1.0375, 0);
  root.add(jamb);
  const jamb2 = new THREE.Mesh(boxGeo2, dressedMat);
  jamb2.name = 'jamb';
  jamb2.position.set(0.605, 1.0375, 0);
  root.add(jamb2);
  const jamb3 = new THREE.Mesh(boxGeo3, dressedMat);
  jamb3.name = 'jamb';
  jamb3.position.set(-0.665, 1.3125, 0);
  root.add(jamb3);
  const jamb4 = new THREE.Mesh(boxGeo3, dressedMat);
  jamb4.name = 'jamb';
  jamb4.position.set(0.665, 1.3125, 0);
  root.add(jamb4);
  const jamb5 = new THREE.Mesh(boxGeo2, dressedMat);
  jamb5.name = 'jamb';
  jamb5.position.set(-0.605, 1.5875, 0);
  root.add(jamb5);
  const jamb6 = new THREE.Mesh(boxGeo2, dressedMat);
  jamb6.name = 'jamb';
  jamb6.position.set(0.605, 1.5875, 0);
  root.add(jamb6);
  const jamb7 = new THREE.Mesh(boxGeo3, dressedMat);
  jamb7.name = 'jamb';
  jamb7.position.set(-0.665, 1.8625, 0);
  root.add(jamb7);
  const jamb8 = new THREE.Mesh(boxGeo3, dressedMat);
  jamb8.name = 'jamb';
  jamb8.position.set(0.665, 1.8625, 0);
  root.add(jamb8);
  const lintel = new THREE.Mesh(new THREE.BoxGeometry(1.52, 0.19, 0.3), dressedMat);
  lintel.name = 'lintel';
  lintel.position.set(0, 2.095, 0);
  root.add(lintel);
  const sill = new THREE.Mesh(new THREE.BoxGeometry(1.36, 0.15, 0.345), dressedMat);
  sill.name = 'sill';
  sill.position.set(0, 0.825, 0.0225);
  root.add(sill);
  const stone = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.6065, 0.28, 0.2669), 0.005, 650), stoneMat);
  stone.name = 'stone';
  stone.position.set(-0.6867, 0.45, 0);
  root.add(stone);
  const stone2 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.524, 0.28, 0.2682), 0.005, 651), stone2Mat);
  stone2.name = 'stone';
  stone2.position.set(-0.1014, 0.45, 0);
  root.add(stone2);
  const stone3 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4082, 0.28, 0.2794), 0.005, 652), stone3Mat);
  stone3.name = 'stone';
  stone3.position.set(0.3847, 0.45, 0);
  root.add(stone3);
  const stone4 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.3812, 0.28, 0.2817), 0.005, 653), stone3Mat);
  stone4.name = 'stone';
  stone4.position.set(0.7994, 0.45, 0);
  root.add(stone4);
  const stone5 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.29, 0.28, 0.27), 0.005, 654), stone2Mat);
  stone5.name = 'stone';
  stone5.position.set(-0.845, 0.75, 0);
  root.add(stone5);
  const stone6 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.5261, 0.12, 0.2808), 0.005, 655), stoneMat);
  stone6.name = 'stone';
  stone6.position.set(-0.4169, 0.67, 0);
  root.add(stone6);
  const stone7 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.8139, 0.12, 0.2815), 0.005, 656), stone2Mat);
  stone7.name = 'stone';
  stone7.position.set(0.2731, 0.67, 0);
  root.add(stone7);
  const stone8 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.29, 0.28, 0.2741), 0.005, 657), stoneMat);
  stone8.name = 'stone';
  stone8.position.set(0.845, 0.75, 0);
  root.add(stone8);
  const stone9 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.26, 0.255, 0.2757), 0.005, 658), stoneMat);
  stone9.name = 'stone';
  stone9.position.set(-0.86, 1.0375, 0);
  root.add(stone9);
  const stone10 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.26, 0.255, 0.267), 0.005, 659), stoneMat);
  stone10.name = 'stone';
  stone10.position.set(0.86, 1.0375, 0);
  root.add(stone10);
  const stone11 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.14, 0.255, 0.288), 0.005, 660), stone2Mat);
  stone11.name = 'stone';
  stone11.position.set(-0.92, 1.3125, 0);
  root.add(stone11);
  const stone12 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.14, 0.255, 0.2713), 0.005, 661), stone2Mat);
  stone12.name = 'stone';
  stone12.position.set(0.92, 1.3125, 0);
  root.add(stone12);
  const stone13 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.26, 0.255, 0.2828), 0.005, 662), stoneMat);
  stone13.name = 'stone';
  stone13.position.set(-0.86, 1.5875, 0);
  root.add(stone13);
  const stone14 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.26, 0.255, 0.268), 0.005, 663), stoneMat);
  stone14.name = 'stone';
  stone14.position.set(0.86, 1.5875, 0);
  root.add(stone14);
  const stone15 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.14, 0.255, 0.2688), 0.005, 664), stoneMat);
  stone15.name = 'stone';
  stone15.position.set(-0.92, 1.8625, 0);
  root.add(stone15);
  const stone16 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.14, 0.255, 0.2882), 0.005, 665), stoneMat);
  stone16.name = 'stone';
  stone16.position.set(0.92, 1.8625, 0);
  root.add(stone16);
  const stone17 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.21, 0.18, 0.2842), 0.005, 666), stoneMat);
  stone17.name = 'stone';
  stone17.position.set(-0.885, 2.1, 0);
  root.add(stone17);
  const stone18 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.21, 0.18, 0.2723), 0.005, 667), stone3Mat);
  stone18.name = 'stone';
  stone18.position.set(0.885, 2.1, 0);
  root.add(stone18);
  const stone19 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.7783, 0.28, 0.275), 0.005, 668), stoneMat);
  stone19.name = 'stone';
  stone19.position.set(-0.6009, 2.35, 0);
  root.add(stone19);
  const stone20 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.6865, 0.28, 0.2847), 0.005, 669), stoneMat);
  stone20.name = 'stone';
  stone20.position.set(0.1515, 2.35, 0);
  root.add(stone20);
  const stone21 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4753, 0.28, 0.2718), 0.005, 670), stoneMat);
  stone21.name = 'stone';
  stone21.position.set(0.7524, 2.35, 0);
  root.add(stone21);
  const stone22 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.6584, 0.28, 0.2749), 0.005, 671), stone2Mat);
  stone22.name = 'stone';
  stone22.position.set(-0.6608, 2.65, 0);
  root.add(stone22);
  const stone23 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.7127, 0.28, 0.2827), 0.005, 672), stone3Mat);
  stone23.name = 'stone';
  stone23.position.set(0.0447, 2.65, 0);
  root.add(stone23);
  const stone24 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.5689, 0.28, 0.2814), 0.005, 673), stone3Mat);
  stone24.name = 'stone';
  stone24.position.set(0.7055, 2.65, 0);
  root.add(stone24);
  const pane = new THREE.Mesh(new THREE.BoxGeometry(0.996, 1.096, 0.012), glassMat);
  pane.name = 'pane';
  pane.position.set(0, 1.45, 0);
  root.add(pane);
  const sashSide = new THREE.Mesh(boxGeo4, sashMat);
  sashSide.name = 'sashSide';
  sashSide.position.set(-0.475, 1.45, 0);
  root.add(sashSide);
  const sashRail = new THREE.Mesh(boxGeo5, sashMat);
  sashRail.name = 'sashRail';
  sashRail.position.set(0, 0.925, 0);
  root.add(sashRail);
  const sashSide2 = new THREE.Mesh(boxGeo4, sashMat);
  sashSide2.name = 'sashSide';
  sashSide2.position.set(0.475, 1.45, 0);
  root.add(sashSide2);
  const sashRail2 = new THREE.Mesh(boxGeo5, sashMat);
  sashRail2.name = 'sashRail';
  sashRail2.position.set(0, 1.975, 0);
  root.add(sashRail2);
  const mullion = new THREE.Mesh(new THREE.BoxGeometry(0.035, 1, 0.045), sashMat);
  mullion.name = 'mullion';
  mullion.position.set(0, 1.45, 0);
  root.add(mullion);
  const transom = new THREE.Mesh(new THREE.BoxGeometry(0.9, 0.035, 0.045), sashMat);
  transom.name = 'transom';
  transom.position.set(0, 1.582, 0);
  root.add(transom);

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

export default createWindowWall;

Ratings & comments

—
No ratings yet — be the first.
5
0
4
0
3
0
2
0
1
0

Sign in to rate and comment.

0 comments

No comments yet. Share how you used this model or what could be better.

Related models

Same category or similar tags