Build a walkable 3D store in three.js with Claude and Blender

Build a walkable corner shop that runs in the browser (three.js).
Use only the models listed in manifest.json (names, sizes in metres, pivots,
triangles). Do not invent model names or sizes.

1. layout.py: pure Python, no bpy. A Lay class with add() / box() / stock() / drop().
   Room 6 x 5 x 3 m. Blender axes: x right, y into the room, z up, front = -y.
   Placements are data. Anything that depends on real geometry (items on a shelf
   board, a till on a counter) is a job that Blender resolves later with ray casts.
2. place.py: headless Blender. Place everything, resolve the jobs, export a GLB and
   write the collision boxes for the walker.
3. walk.html: three.js, joystick + drag to look + WASD, simple collision.

After each step tell me: objects placed, slots rejected, triangles, file size.

# manifest.py - list every model in a folder with its real size, pivot offset and triangle count.
# blender -b --factory-startup -P manifest.py -- <folder with .glb files> <out.json>
import bpy, sys, os, glob, json
from mathutils import Vector

src, out = sys.argv[sys.argv.index('--') + 1:][:2]
rows = {}
for f in sorted(glob.glob(os.path.join(src, '**', '*.glb'), recursive=True)):
    bpy.ops.wm.read_factory_settings(use_empty=True)
    bpy.ops.import_scene.gltf(filepath=f)
    meshes = [o for o in bpy.data.objects if o.type == 'MESH']
    pts = [o.matrix_world @ Vector(c) for o in meshes for c in o.bound_box]
    lo = [min(p[i] for p in pts) for i in range(3)]
    hi = [max(p[i] for p in pts) for i in range(3)]
    rows[os.path.basename(f)[:-4]] = {
        'size_m': {'x': round(hi[0] - lo[0], 3), 'y_depth': round(hi[1] - lo[1], 3), 'z_height': round(hi[2] - lo[2], 3)},
        'min_corner': [round(v, 3) for v in lo],   # pivot is at the bottom centre when x, y are about -/+ half the size and z is 0
        'tris': sum(len(p.vertices) - 2 for o in meshes for p in o.data.polygons),
    }
json.dump(rows, open(out, 'w'), indent=1)
print('MANIFEST', len(rows), 'models ->', out)

"sk_shelf_wall_120": {
 "size_m": { "x": 1.204, "y_depth": 0.425, "z_height": 1.961 },
 "min_corner": [ -0.602, -0.425, 0.0 ],
 "tris": 1284
}

# gen/layout_market.py of the Store Simulator Kit (paid), lines 12-22, unedited
class Lay:
    def __init__(self): self.P = []; self.J = []
    def add(self, name, x, y, z=0.0, rz=0.0, tag='prop'):
        assert name in MOD, name
        self.P.append(dict(pid=len(self.P), name=name, module=MOD[name], x=round(x, 4), y=round(y, 4), z=round(z, 4), rz=rz, tag=tag)); return len(self.P) - 1
    # jobs (resolved in Blender)
    def stock(self, unit, z, prod, xr, yr, side=0, rows=3, fill=(0.8, 0.95), designs='abc', gap=0.006, run=(2, 4), tol=0.006):
        self.J.append(dict(kind='stock', unit=unit, z=z, prod=prod, xr=xr, yr=yr, side=side, rows=rows, fill=fill, designs=designs, gap=gap, run=run, tol=tol))
    def pile(self, unit, name, c, size, zr, rz_unit=True, aligned=None, spacing=1.08, jitter=0.12):
        self.J.append(dict(kind='pile', unit=unit, name=name, c=c, size=size, zr=zr, aligned=aligned, spacing=spacing, jitter=jitter))
    def drop(self, name, x, y, rz=0.0, tag='prop', z0=2.6): self.J.append(dict(kind='drop', name=name, x=x, y=y, rz=rz, tag=tag, z0=z0))

# layout.py - the corner shop as data. Blender axes, metres: x to the right, y into the room (back wall at y = 5), z up, front = -y.
# Pure Python (no bpy): run it, print it and diff it before Blender ever opens.
import json, os
MAN = json.load(open(os.path.join(os.path.dirname(os.path.abspath(__file__)), 'manifest.json')))   # what exists, with real sizes

class Lay:
    def __init__(self): self.P = []; self.J = []                      # P = placed things, J = jobs that Blender resolves with ray casts
    def box(self, name, lo, hi, col, tag='solid'):                    # plain box for walls, floor, counters; origin 0, so local = world
        self.P.append(dict(pid=len(self.P), name=name, box=(lo, hi), col=col, x=0, y=0, z=0, rz=0, tag=tag)); return len(self.P) - 1
    def add(self, name, x, y, z=0.0, rz=0.0, tag='prop'):
        assert name in MAN, name                                       # only models that exist in manifest.json
        self.P.append(dict(pid=len(self.P), name=name, x=x, y=y, z=z, rz=rz, tag=tag)); return len(self.P) - 1
    def stock(self, unit, z, prod, xr, yr, rows=2, gap=0.01):          # fill one shelf board (z above the unit) with prod
        self.J.append(dict(kind='stock', unit=unit, z=z, prod=prod, xr=xr, yr=yr, rows=rows, gap=gap))
    def drop(self, name, x, y, rz=0.0, z0=1.6, tag='prop'):            # lower name from z0 until it lands on whatever is below
        self.J.append(dict(kind='drop', name=name, x=x, y=y, rz=rz, z0=z0, tag=tag))

def build():
    L = Lay(); W, D, H = 6, 5, 3                                       # room 6 x 5 x 3 m, door gap in the front wall at x 4.4 .. 5.6
    L.box('floor', (0, 0, -.05), (W, D, 0), (.6, .58, .55), tag='shell'); L.box('ceiling', (0, 0, H), (W, D, H + .05), (.93, .93, .9), tag='shell')
    for n, lo, hi in (('back', (-.1, D, 0), (W + .1, D + .1, H)), ('left', (-.1, 0, 0), (0, D, H)), ('right', (W, 0, 0), (W + .1, D, H)),
                      ('front_l', (-.1, -.1, 0), (4.4, 0, H)), ('front_r', (5.6, -.1, 0), (W + .1, 0, H)), ('door_top', (4.4, -.1, 2.2), (5.6, 0, H))):
        L.box('wall_' + n, lo, hi, (.86, .82, .74))
    boards = (.291, .691, 1.091, 1.491)                                # shelf board heights, read with a ray scan (section 4)
    for x, y, rz in ((.65, D, 0), (1.9, D, 0), (3.15, D, 0), (4.4, D, 0), (0, 1.75, 90), (0, 3.0, 90)):   # wall shelves: back wall, then left wall turned 90 degrees
        u = L.add('sk_shelf_wall_120', x, y, 0, rz, tag='solid')
        for z, p in zip(boards, ('cereal_l_a', 'can_soda_a', 'cereal_l_a', 'can_soda_a')): L.stock(u, z, 'sk_prod_' + p, (-.56, .56), (-.38, -.02))
    t = L.box('table', (1.9, 2.2, 0), (3.7, 3.0, .8), (.55, .38, .22))  # island: boxes work as stock units too
    L.stock(t, .8, 'sk_prod_can_soda_a', (1.95, 2.8), (2.25, 2.95), rows=3); L.stock(t, .8, 'sk_prod_cereal_l_a', (2.9, 3.65), (2.25, 2.95))
    L.box('counter', (4.8, 1.8, 0), (W, 2.4, .95), (.5, .34, .2)); L.drop('sk_pos_till', 5.4, 2.1, 180)
    for x, y, rz in ((5.4, 3.4, 0), (5.4, 3.4, 8), (5.75, 3.4, -5)): L.drop('sk_carton_s', x, y, rz, 1.0, 'solid')   # cartons by the counter
    return L

if __name__ == '__main__':
    L = build(); print(len(L.P), 'placed,', len(L.J), 'jobs for Blender to resolve')

# scan.py - find the shelf board heights with rays. blender -b --factory-startup -P scan.py -- <shelf.glb>
import bpy, sys
from mathutils import Vector
bpy.ops.wm.read_factory_settings(use_empty=True); bpy.ops.import_scene.gltf(filepath=sys.argv[sys.argv.index('--') + 1])
bpy.context.view_layer.update(); dg = bpy.context.evaluated_depsgraph_get()
z, tops = 2.5, []
while z > 0:                                                    # a ray straight down through the shelf, surface by surface
    ok, loc, nrm, *_ = bpy.context.scene.ray_cast(dg, Vector((0, -0.2, z)), Vector((0, 0, -1)), distance=z)
    if not ok: break
    if nrm.z > 0.99: tops.append(round(loc.z, 3))               # keep only surfaces that face up: the board tops
    z = loc.z - 0.002                                           # step just below the hit and go on
print('BOARD TOPS', tops)

# gen/demo_market.py of the Store Simulator Kit (paid), lines 40-47 and 63-66, unedited (the ray test the demo store uses)
    def ray(self, x, y, z, dist):
        ok, loc, nrm, idx, ob, _ = self.sc.ray_cast(self.dg, Vector((x, y, z)), Vector((0, 0, -1)), distance=dist)
        if not ok: return None
        return loc.z, nrm.z, (ob.original if hasattr(ob, 'original') else ob).get('pid')

def foot(cx, cy, ang, W, D, inset=0.003):
    c, s = math.cos(ang), math.sin(ang); pts = [(0, 0)] + [(sx * (W / 2 - inset), sy * (D / 2 - inset)) for sx in (-1, 1) for sy in (-1, 1)]
    return [(cx + u * c - v * s, cy + u * s + v * c) for u, v in pts]
    ...
            def valid(lx, ly):
                wx, wy = at(lx, ly); hs = hits(foot(wx, wy, ang, W, D), z0, H + 0.06)
                if any(h is None or h[2] != u['pid'] or abs(h[0] - zt) > j['tol'] for h in hs): return None
                return max(h[0] for h in hs)

def ray(dg, x, y, z, dist):                                            # one ray straight down: (hit height, surface normal z, which placed thing)
    ok, loc, nrm, _, ob, _ = sc.ray_cast(dg, Vector((x, y, z)), Vector((0, 0, -1)), distance=dist)
    return (loc.z, nrm.z, (ob.original if hasattr(ob, 'original') else ob).get('pid')) if ok else None
...
hits = [ray(dg, fx, fy, zt + H + .004, H + .06) for fx, fy in foot(wx, wy, a, W, D)]
if all(h and h[2] == u['pid'] and h[1] > .99 and abs(h[0] - zt) < .006 for h in hits):   # all 5 rays hit THIS unit, flat, at board height
    add(j['prod'], wx, wy, max(h[0] for h in hits), u['rz'] + rng.uniform(-1, 1), 'stock')
else: stats['rejected'] += 1

PLACED 515 things; {'stock': 495, 'rejected': 0, 'drop': 4} ; triangles 160938 ; GLB 2.68 MB -> shop.glb

npx @gltf-transform/cli optimize shop.glb shop.web.glb --compress meshopt --texture-compress webp

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Walkable shop starter</title>
<style>
  html, body { margin: 0; height: 100%; overflow: hidden; background: #cfd8e0; touch-action: none; user-select: none; font: 600 13px system-ui; }
  canvas { display: block; width: 100%; height: 100%; }
  #stick { position: fixed; left: 24px; bottom: 28px; width: 120px; height: 120px; border-radius: 50%; border: 2px solid #fff9; display: none; }
  #knob { position: absolute; left: 36px; top: 36px; width: 48px; height: 48px; border-radius: 50%; background: #fffc; }
  .hint { position: fixed; bottom: 160px; color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none; display: none; }
  #hmove { left: 24px; } #hlook { right: 24px; }
  body.touch #stick { display: block; }
  body.touch:not(.started) .hint { display: block; }                    /* one rule per state, so "started" really hides the hints */
</style>
<canvas id="c"></canvas><div id="stick"><div id="knob"></div></div><div class="hint" id="hmove">Drag to walk</div><div class="hint" id="hlook">Drag to look</div>
<script type="importmap">{ "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/" } }</script>
<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

const EYE = 1.6, R = 0.25, SPEED = 2.2;                                  // metres, metres, metres per second
if (matchMedia('(pointer: coarse)').matches) document.body.classList.add('touch');
const cv = document.getElementById('c'), knob = document.getElementById('knob'), stick = document.getElementById('stick');
const renderer = new THREE.WebGLRenderer({ canvas: cv, antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
const scene = new THREE.Scene(); scene.background = new THREE.Color(0xcfd8e0);
scene.environment = new THREE.PMREMGenerator(renderer).fromScene(new RoomEnvironment(), 0.04).texture;
scene.environmentIntensity = 0.5; scene.add(new THREE.HemisphereLight(0xffffff, 0xd8d0c4, 0.7));
const cam = new THREE.PerspectiveCamera(70, 1, 0.1, 60); window.cam = cam;   // window.cam: poke at it from the console
const pos = new THREE.Vector3(4.3, 0, -0.7); let yaw = 0.35, pitch = 0;   // just inside the door, turned a little towards the shelves (-z is into the shop)

let walls = [];                                                          // boxes written by place.py: [minX, minZ, maxX, maxZ, bottom]
const loader = new GLTFLoader().setMeshoptDecoder(MeshoptDecoder);
Promise.all([loader.loadAsync('shop.web.glb'), fetch('shop.walls.json').then(r => r.json())]).then(([gltf, w]) => {
  scene.add(gltf.scene); walls = w.filter(b => b[4] < 1.0);               // a lintel above head height does not block the door
});
const blocked = (x, z) => walls.some(b => x > b[0] - R && x < b[2] + R && z > b[1] - R && z < b[3] + R);
function move(dx, dz) {                                                  // slide along walls: try each axis on its own
  if (!blocked(pos.x + dx, pos.z)) pos.x += dx;
  if (!blocked(pos.x, pos.z + dz)) pos.z += dz;
  pos.z = Math.min(pos.z, -0.3);                                         // the door gap is open: do not walk out into the void
}

const keys = {}, mv = new THREE.Vector2(); let look = null, drive = null;
addEventListener('keydown', e => keys[e.code] = 1); addEventListener('keyup', e => keys[e.code] = 0);
cv.addEventListener('pointerdown', e => {
  document.body.classList.add('started'); cv.setPointerCapture(e.pointerId);
  if (e.pointerType === 'touch' && e.clientX < innerWidth * 0.4) drive = e.pointerId; else look = { id: e.pointerId, x: e.clientX, y: e.clientY };
});
cv.addEventListener('pointermove', e => {
  if (drive === e.pointerId) {                                           // joystick: finger offset from the ring centre, 50 px = full speed
    const r = stick.getBoundingClientRect(); mv.set(e.clientX - r.left - 60, e.clientY - r.top - 60).divideScalar(50);
    if (mv.length() > 1) mv.normalize(); knob.style.transform = `translate(${mv.x * 40}px,${mv.y * 40}px)`;
  } else if (look && look.id === e.pointerId) {                          // drag to look
    yaw -= (e.clientX - look.x) * 0.005; pitch = THREE.MathUtils.clamp(pitch - (e.clientY - look.y) * 0.005, -1.2, 1.2); look.x = e.clientX; look.y = e.clientY;
  }
});
const end = e => { if (look && look.id === e.pointerId) look = null; if (drive === e.pointerId) { drive = null; mv.set(0, 0); knob.style.transform = ''; } };
cv.addEventListener('pointerup', end); cv.addEventListener('pointercancel', end);

const fit = () => { renderer.setSize(innerWidth, innerHeight, false); cam.aspect = innerWidth / innerHeight; cam.updateProjectionMatrix(); };
addEventListener('resize', fit); fit();
const clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
  const dt = Math.min(clock.getDelta(), 0.05);
  const f = (keys.KeyW || keys.ArrowUp ? 1 : 0) - (keys.KeyS || keys.ArrowDown ? 1 : 0) - mv.y;     // forward / back
  const s = (keys.KeyD || keys.ArrowRight ? 1 : 0) - (keys.KeyA || keys.ArrowLeft ? 1 : 0) + mv.x;  // strafe
  const v = SPEED * dt * (keys.ShiftLeft ? 1.8 : 1);
  move((-Math.sin(yaw) * f + Math.cos(yaw) * s) * v, (-Math.cos(yaw) * f - Math.sin(yaw) * s) * v);
  cam.position.set(pos.x, EYE, pos.z); cam.rotation.set(pitch, yaw, 0, 'YXZ'); renderer.render(scene, cam);
});
</script>