Hattie's Lot \u2014 3D Site Model<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --ink:#efe7d6; --ink-dim:#b9b2a1; --panel:#171b23e6; --panel-line:#3a3f4a;\n --brass:#c98a3d; --brass-soft:#e0ab6b;\n --red:#a8433a; --navy:#3a4b6c; --cream:#eee6d4; --olive:#6b7f3f; --brown:#8a5a2b;\n }\n *{box-sizing:border-box;}\n html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0f1420;\n font-family:'Inter',sans-serif;}\n #canvas-wrap{position:fixed;inset:0;}\n canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;}\n canvas.dragging{cursor:grabbing;}\n .hud{position:fixed;inset:0;pointer-events:none;z-index:10;}\n .hud > *{pointer-events:auto;}\n .title-block{position:absolute;top:16px;left:16px;max-width:min(78vw,430px);}\n .title-block h1{font-family:'Fraunces',serif;font-weight:600;font-optical-sizing:auto;\n font-size:clamp(15px,3.4vw,21px);color:var(--ink);margin:0 0 3px 0;letter-spacing:.01em;\n text-shadow:0 2px 10px rgba(0,0,0,.6);}\n .title-block p{margin:0;font-size:11.5px;color:var(--ink-dim);letter-spacing:.02em;\n text-shadow:0 1px 6px rgba(0,0,0,.6);}\n .title-block .rule{width:34px;height:2px;background:var(--brass);margin:8px 0 8px 0;\n box-shadow:0 0 8px var(--brass);}\n #compass{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;\n background:var(--panel);border:1px solid var(--panel-line);backdrop-filter:blur(6px);\n display:flex;align-items:center;justify-content:center;}\n #compass svg{width:26px;height:26px;transition:transform .05s linear;}\n #presets{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;\n max-width:70vw;}\n #presets .label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);\n margin-bottom:1px;}\n #presets .row{display:flex;flex-wrap:wrap;gap:6px;}\n .pill{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink);\n background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;\n padding:8px 14px;backdrop-filter:blur(6px);cursor:pointer;white-space:nowrap;\n transition:background .15s,border-color .15s,transform .1s;}\n .pill:hover{border-color:var(--brass);}\n .pill:active{transform:scale(.96);}\n .pill.active{background:var(--brass);border-color:var(--brass);color:#1a1206;}\n #panel-toggle{position:absolute;right:16px;bottom:16px;z-index:11;}\n #side-panel{position:absolute;right:16px;bottom:16px;width:255px;max-height:min(64vh,540px);\n background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;\n backdrop-filter:blur(8px);padding:14px 14px 12px 14px;overflow-y:auto;\n transform-origin:bottom right;transition:transform .18s ease,opacity .18s ease;}\n #side-panel.hidden{transform:scale(.92);opacity:0;pointer-events:none;}\n #side-panel h2{font-family:'Fraunces',serif;font-size:13px;font-weight:600;color:var(--brass-soft);\n margin:0 0 8px 0;letter-spacing:.02em;}\n #side-panel h2.second{margin-top:14px;}\n .legend-item{display:flex;align-items:center;gap:8px;font-size:11.2px;color:var(--ink);\n padding:3px 0;line-height:1.25;}\n .swatch{width:16px;height:16px;border-radius:5px;flex:none;display:flex;align-items:center;\n justify-content:center;font-size:9px;font-weight:700;color:#fff;font-family:'Inter';}\n .toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;\n color:var(--ink);padding:6px 0;border-top:1px solid var(--panel-line);}\n .toggle-row:first-of-type{border-top:none;}\n .switch{position:relative;width:36px;height:20px;background:#3a3f4a;border-radius:12px;\n cursor:pointer;flex:none;transition:background .15s;}\n .switch.on{background:var(--brass);}\n .switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;\n border-radius:50%;background:#efe7d6;transition:left .15s;}\n .switch.on::after{left:18px;}\n .tod-row{display:flex;gap:6px;margin-top:4px;}\n .tod-btn{flex:1;font-size:11px;font-weight:600;color:var(--ink);background:#20242e;\n border:1px solid var(--panel-line);border-radius:8px;padding:6px 4px;cursor:pointer;text-align:center;}\n .tod-btn.active{background:var(--brass);color:#1a1206;border-color:var(--brass);}\n #close-panel{background:none;border:none;color:var(--ink-dim);font-size:16px;cursor:pointer;\n position:absolute;top:10px;right:10px;line-height:1;}\n .fab{width:46px;height:46px;border-radius:50%;background:var(--panel);\n border:1px solid var(--panel-line);backdrop-filter:blur(6px);display:flex;\n align-items:center;justify-content:center;cursor:pointer;color:var(--brass-soft);font-size:18px;}\n .hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);\n font-size:11px;color:var(--ink-dim);background:var(--panel);border:1px solid var(--panel-line);\n border-radius:20px;padding:6px 14px;backdrop-filter:blur(6px);white-space:nowrap;\n opacity:1;transition:opacity .6s ease;}\n .hint.fade{opacity:0;}\n @media (max-width:560px){\n #side-panel{width:min(80vw,262px);}\n .title-block{max-width:66vw;}\n #presets{max-width:58vw;}\n }\n<\/style>\n<\/head>\n<body>\n<div id=\"canvas-wrap\"><\/div>\n\n<div class=\"hud\">\n <div class=\"title-block\">\n <h1>Nikki Mitchell Jazz Festival<\/h1>\n <div class=\"rule\"><\/div>\n <p>Bollar Lewis's lot at 778 Old Norlina Rd, between N Garnett St and Old Norlina Rd<br>drag to orbit \u00b7 scroll \/ pinch to zoom<\/p>\n <\/div>\n\n <div id=\"compass\">\n <svg viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"46\" fill=\"none\" stroke=\"#5a5748\" stroke-width=\"1.5\"\/>\n <polygon points=\"50,10 58,50 50,42 42,50\" fill=\"#c98a3d\"\/>\n <polygon points=\"50,90 58,50 50,58 42,50\" fill=\"#5a5748\"\/>\n <text x=\"50\" y=\"26\" text-anchor=\"middle\" font-size=\"13\" fill=\"#efe7d6\" font-family=\"Inter\" font-weight=\"700\">N<\/text>\n <\/svg>\n <\/div>\n\n <div id=\"presets\">\n <div class=\"label\">Camera<\/div>\n <div class=\"row\">\n <div class=\"pill active\" data-preset=\"aerial\">Aerial<\/div>\n <div class=\"pill\" data-preset=\"stage\">Stage-eye<\/div>\n <div class=\"pill\" data-preset=\"crowd\">Crowd-eye<\/div>\n <div class=\"pill\" data-preset=\"corner\">Highway Corner<\/div>\n <\/div>\n <\/div>\n\n <div id=\"panel-toggle\" class=\"fab\" title=\"Legend & settings\">\u2630<\/div>\n\n <div id=\"side-panel\" class=\"hidden\">\n <button id=\"close-panel\">\u2715<\/button>\n <h2>Site Key<\/h2>\n <div id=\"legend-list\"><\/div>\n <h2 class=\"second\">Time of Day<\/h2>\n <div class=\"tod-row\" id=\"tod-row\">\n <div class=\"tod-btn active\" data-tod=\"noon\">Midday<\/div>\n <div class=\"tod-btn\" data-tod=\"golden\">Golden Hr<\/div>\n <div class=\"tod-btn\" data-tod=\"dusk\">Dusk<\/div>\n <\/div>\n <h2 class=\"second\">Display<\/h2>\n <div class=\"toggle-row\"><span>Labels<\/span><div class=\"switch on\" id=\"toggle-labels\"><\/div><\/div>\n <div class=\"toggle-row\"><span>Crowd markers<\/span><div class=\"switch on\" id=\"toggle-crowd\"><\/div><\/div>\n <div class=\"toggle-row\"><span>Perimeter fence<\/span><div class=\"switch on\" id=\"toggle-fence\"><\/div><\/div>\n <\/div>\n\n <div class=\"hint\" id=\"hint\">drag to look around \u00b7 scroll to zoom \u00b7 tap \u2630 for the key<\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n<script>\n(function(){\n\n\/* ============================================================\n LEGEND\n ============================================================ *\/\nvar LEGEND = [\n {k:'A', name:'Stage (compact)', color:0x2c2a28},\n {k:'B', name:'FOH mix position', color:0xc98a3d},\n {k:'C', name:'Audience area', color:0x8a9a5b},\n {k:'D', name:'Green room tent', color:0xeee6d4},\n {k:'E', name:'Vendor & food row', color:0x8a5a2b},\n {k:'F', name:'Restroom cluster', color:0xe8e2d0},\n {k:'G', name:'Entry \/ ticketing', color:0xa8433a},\n {k:'H', name:'First aid', color:0xa8433a},\n {k:'J', name:'Perimeter fence', color:0xa8433a},\n {k:'K', name:'Off-site \/ shared parking', color:0x3a4b6c},\n {k:'L', name:'Trash \/ recycling', color:0x6b7f3f}\n];\nvar legendList = document.getElementById('legend-list');\nLEGEND.forEach(function(item){\n var row = document.createElement('div');\n row.className = 'legend-item';\n var hex = '#' + item.color.toString(16).padStart(6,'0');\n row.innerHTML = '<div class=\"swatch\" style=\"background:'+hex+'\">'+item.k+'<\/div><div>'+item.name+'<\/div>';\n legendList.appendChild(row);\n});\n\n\/* ============================================================\n SCENE SETUP\n ============================================================ *\/\nvar wrap = document.getElementById('canvas-wrap');\nvar scene = new THREE.Scene();\nvar camera = new THREE.PerspectiveCamera(48, wrap.clientWidth\/wrap.clientHeight, 0.1, 400);\nvar renderer = new THREE.WebGLRenderer({antialias:true});\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio,2));\nrenderer.setSize(wrap.clientWidth, wrap.clientHeight);\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\nwrap.appendChild(renderer.domElement);\nvar canvasEl = renderer.domElement;\n\nwindow.addEventListener('resize', function(){\n camera.aspect = wrap.clientWidth\/wrap.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(wrap.clientWidth, wrap.clientHeight);\n});\n\nfunction mulberry32(a){\n return function(){\n a |= 0; a = a + 0x6D2B79F5 | 0;\n var t = Math.imul(a ^ a >>> 15, 1 | a);\n t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;\n return ((t ^ t >>> 14) >>> 0) \/ 4294967296;\n };\n}\nvar rng = mulberry32(2026);\n\n\/* ============================================================\n LIGHTING \/ TIME OF DAY\n ============================================================ *\/\nvar hemi = new THREE.HemisphereLight(0xffffff, 0x25201a, 0.55);\nscene.add(hemi);\nvar sun = new THREE.DirectionalLight(0xffffff, 1);\nsun.castShadow = true;\nsun.shadow.mapSize.set(1536,1536);\nsun.shadow.camera.left = -30; sun.shadow.camera.right = 30;\nsun.shadow.camera.top = 30; sun.shadow.camera.bottom = -30;\nsun.shadow.camera.near = 1; sun.shadow.camera.far = 90;\nsun.shadow.bias = -0.0015;\nscene.add(sun); scene.add(sun.target);\n\nvar TOD = {\n noon: {sunPos:[10,32,14], sunColor:0xfff2d6, sunI:1.15, hemiSky:0x8fb4d9, hemiGround:0x4a4530,\n hemiI:0.65, top:'#7fa8c9', bottom:'#d9c9a0', fog:'#cdd6c0', fogNear:30, fogFar:85},\n golden: {sunPos:[-24,9,6], sunColor:0xffa552, sunI:1.05, hemiSky:0x35496b, hemiGround:0x2a1f18,\n hemiI:0.5, top:'#33456b', bottom:'#e8935a', fog:'#caa06a', fogNear:24, fogFar:72},\n dusk: {sunPos:[-13,4,9], sunColor:0x8aa0ff, sunI:0.35, hemiSky:0x0f1420, hemiGround:0x1a1522,\n hemiI:0.4, top:'#0b0f18', bottom:'#3c2f42', fog:'#221c2a', fogNear:16, fogFar:56}\n};\nfunction skyTexture(topHex, bottomHex){\n var c = document.createElement('canvas'); c.width = 8; c.height = 256;\n var ctx = c.getContext('2d');\n var g = ctx.createLinearGradient(0,0,0,256);\n g.addColorStop(0, topHex); g.addColorStop(1, bottomHex);\n ctx.fillStyle = g; ctx.fillRect(0,0,8,256);\n var tex = new THREE.CanvasTexture(c); tex.magFilter = THREE.LinearFilter;\n return tex;\n}\nvar stageGlowLights = [];\nfunction applyTOD(name){\n var s = TOD[name];\n sun.position.set(s.sunPos[0], s.sunPos[1], s.sunPos[2]);\n sun.target.position.set(0,0,0);\n sun.color.setHex(s.sunColor); sun.intensity = s.sunI;\n hemi.color.setHex(s.hemiSky); hemi.groundColor.setHex(s.hemiGround); hemi.intensity = s.hemiI;\n scene.background = skyTexture(s.top, s.bottom);\n scene.fog = new THREE.Fog(new THREE.Color(s.fog), s.fogNear, s.fogFar);\n var glowI = name === 'dusk' ? 1.4 : (name === 'golden' ? 0.5 : 0.05);\n stageGlowLights.forEach(function(l){ l.intensity = glowI; });\n}\n\n\/* ============================================================\n GROUND\n ============================================================ *\/\nvar ground = new THREE.Mesh(new THREE.PlaneGeometry(140,140,1,1),\n new THREE.MeshLambertMaterial({color:0x5a6a45}));\nground.rotation.x = -Math.PI\/2; ground.receiveShadow = true;\nscene.add(ground);\n\n\/* festival lot boundary \u2014 trapezoid, wider at the north end, per aerial *\/\nvar lotPts = [\n [-6.2,-3.0],[-5.2,7.6],[-3.6,9.0],[2.6,8.6],[6.4,6.3],\n [5.6,1.6],[3.6,-2.0],[-0.8,-2.8],[-4.2,-2.6]\n];\nvar shape = new THREE.Shape(lotPts.map(function(p){return new THREE.Vector2(p[0],p[1]);}));\n\/* bare dirt\/weed base under the lot, matching the ground-level reference photos \u2014\n this parcel reads as open gravel\/dirt with sparse weeds, not a mowed lawn *\/\nvar lotDirt = new THREE.Mesh(new THREE.ShapeGeometry(shape),\n new THREE.MeshLambertMaterial({color:0x8a7f63}));\nlotDirt.rotation.x = -Math.PI\/2; lotDirt.position.y = 0.015; lotDirt.receiveShadow = true;\nscene.add(lotDirt);\nvar lotFill = new THREE.Mesh(new THREE.ShapeGeometry(shape),\n new THREE.MeshBasicMaterial({color:0xc98a3d, transparent:true, opacity:0.14, depthWrite:false}));\nlotFill.rotation.x = -Math.PI\/2; lotFill.position.y = 0.02;\nscene.add(lotFill);\n\nfunction dashedLoop(pts, y, colorHex, dashSize, gapSize, closeLoop){\n var vpts = pts.map(function(p){return new THREE.Vector3(p[0], y, p[1]);});\n if(closeLoop!==false) vpts.push(vpts[0].clone());\n var geo = new THREE.BufferGeometry().setFromPoints(vpts);\n var mat = new THREE.LineDashedMaterial({color:colorHex, dashSize:dashSize, gapSize:gapSize});\n var line = new THREE.Line(geo, mat);\n line.computeLineDistances();\n scene.add(line);\n return line;\n}\ndashedLoop(lotPts, 0.03, 0xc98a3d, 0.55, 0.3);\n\n\/* perimeter fence \u2014 runs the Garnett St + Old Norlina Rd frontages (J) *\/\nvar fencePts = [[-6.2,-3.0],[-5.2,7.6],[-3.6,9.0],[2.6,8.6],[6.4,6.3],[5.6,1.6]];\nvar fenceLine = dashedLoop(fencePts, 0.04, 0xa8433a, 0.35, 0.2, false);\n\n\/* ============================================================\n ROADS \u2014 Garnett St (west) + Old Norlina Rd (diagonal, east)\n ============================================================ *\/\nfunction roadSegment(x1,z1,x2,z2,width,color){\n var dx=x2-x1, dz=z2-z1, len=Math.sqrt(dx*dx+dz*dz);\n var m = new THREE.Mesh(new THREE.PlaneGeometry(width,len),\n new THREE.MeshLambertMaterial({color:color}));\n m.rotation.x = -Math.PI\/2; m.rotation.z = -Math.atan2(dx,dz);\n m.position.set((x1+x2)\/2, 0.01, (z1+z2)\/2); m.receiveShadow = true;\n scene.add(m); return m;\n}\nroadSegment(-6.0,-20, -8.2,20, 3.4, 0xcabfa4); \/* N Garnett St *\/\nroadSegment(-2.0,-19, 4.6,-2.5, 3.2, 0xc3b79a); \/* Old Norlina Rd, south leg *\/\nroadSegment(4.6,-2.5, 15,18, 3.2, 0xc3b79a); \/* Old Norlina Rd, north leg *\/\nroadSegment(-4.5,-19.5, -2.3,-17.5, 2.0, 0xcabfa4); \/* Wiggins St stub *\/\n\n\/* centerline dashes for Garnett St *\/\n(function(){\n var steps=20;\n for(var i=0;i<steps;i++){\n var t0=i\/steps, t1=(i+0.5)\/steps;\n var x0=-6.0+(-8.2- -6.0)*t0, z0=-20+(20- -20)*t0;\n var x1=-6.0+(-8.2- -6.0)*t1, z1=-20+(20- -20)*t1;\n var m = new THREE.Mesh(new THREE.PlaneGeometry(0.1,0.85),\n new THREE.MeshBasicMaterial({color:0xf1e9d8}));\n m.rotation.x=-Math.PI\/2; m.rotation.z=-Math.atan2(x1-x0,z1-z0);\n m.position.set((x0+x1)\/2,0.02,(z0+z1)\/2); scene.add(m);\n }\n})();\n\n\/* BUS 158 shield marker near the south fork *\/\n(function(){\n var post = new THREE.Mesh(new THREE.CylinderGeometry(0.04,0.04,1.6,6),\n new THREE.MeshLambertMaterial({color:0x3a3835}));\n post.position.set(-3.0,0.8,-17.2); scene.add(post);\n var sign = new THREE.Mesh(new THREE.BoxGeometry(0.6,0.6,0.06),\n new THREE.MeshLambertMaterial({color:0xffffff}));\n sign.position.set(-3.0,1.55,-17.2); scene.add(sign);\n})();\n\n\/* ============================================================\n ROAD NAME \/ ADDRESS LABELS \u2014 the lot sits BETWEEN two streets:\n N Garnett St to the west, Old Norlina Rd to the east. The lot's\n own parcel address (778 Old Norlina Rd) is distinct from\n Hattie's own address (1029 N Garnett St).\n ============================================================ *\/\nfunction makeTextLabel(text, bg, fg, wide){\n var c = document.createElement('canvas');\n c.width = wide ? 512 : 320; c.height = 96;\n var ctx = c.getContext('2d');\n var r = 22;\n ctx.fillStyle = bg;\n ctx.beginPath();\n ctx.moveTo(r,4); ctx.arcTo(c.width-4,4,c.width-4,c.height-4,r);\n ctx.arcTo(c.width-4,c.height-4,4,c.height-4,r);\n ctx.arcTo(4,c.height-4,4,4,r); ctx.arcTo(4,4,c.width-4,4,r);\n ctx.closePath(); ctx.fill();\n ctx.strokeStyle = '#f1e9d8'; ctx.lineWidth = 4; ctx.stroke();\n ctx.fillStyle = fg; ctx.font = '700 40px Inter, sans-serif';\n ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\n ctx.fillText(text, c.width\/2, c.height\/2+2);\n var tex = new THREE.CanvasTexture(c);\n var mat = new THREE.SpriteMaterial({map:tex, depthTest:false});\n var sprite = new THREE.Sprite(mat);\n var w = 0.62*(wide ? 512\/96 : 320\/96);\n sprite.userData.baseW = w; sprite.userData.baseH = 0.62;\n sprite.scale.set(w,0.62,1); sprite.renderOrder = 998;\n return sprite;\n}\nvar roadLabels = [];\nfunction addRoadLabel(text,x,y,z,bg,fg,wide){\n var s = makeTextLabel(text,bg,fg,wide);\n s.position.set(x,y,z); scene.add(s); roadLabels.push(s); return s;\n}\naddRoadLabel('N GARNETT ST', -6.6, 1.3, 4.5, '#20242e', '#efe7d6', true);\naddRoadLabel('OLD NORLINA RD', 9.2, 1.3, 5.0, '#a8433a', '#ffffff', true);\naddRoadLabel('NORLINA RD (BUS. 158)', -0.5, 1.1, -12.5, '#a8433a', '#ffffff', true);\naddRoadLabel(\"778 Old Norlina Rd \\u2014 the lot's own address\", 3.0, 4.6, 6.2, '#c98a3d', '#1a1206', true);\naddRoadLabel(\"1029 N Garnett St \\u2014 Hattie's address\", -1, 3.4, -6, '#20242e', '#efe7d6', true);\n\n\/* ============================================================\n SHARED HELPERS (trees, labels, tents, people, cars)\n ============================================================ *\/\nvar canopyColors = [0x2e3a22, 0x243019, 0x35452a, 0x2a3620];\nfunction makeTree(x,z,scale){\n var g = new THREE.Group();\n var trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.06*scale,0.09*scale,0.9*scale,6),\n new THREE.MeshLambertMaterial({color:0x4a3a2a}));\n trunk.position.y = 0.45*scale; trunk.castShadow = true; g.add(trunk);\n var cCount = 2+Math.floor(rng()*2);\n for(var i=0;i<cCount;i++){\n var s=(0.55+rng()*0.35)*scale;\n var cone = new THREE.Mesh(new THREE.ConeGeometry(0.55*s,1.3*s,7),\n new THREE.MeshLambertMaterial({color:canopyColors[Math.floor(rng()*canopyColors.length)]}));\n cone.position.set((rng()-0.5)*0.3*scale, 0.9*scale+i*0.55*s, (rng()-0.5)*0.3*scale);\n cone.castShadow = true; g.add(cone);\n }\n g.position.set(x,0,z); scene.add(g); return g;\n}\n\/* sparse urban tree\/brush scatter around the lot edges (per aerial's dark patches) *\/\nvar treeSpots = [\n [-6.6,10.5],[-7.4,9.0],[7.6,9.7],[8.6,8.2],[8.0,2.0],[9.0,0.5],\n [-1.0,10.3],[1.5,10.6],[9.8,3.4]\n];\ntreeSpots.forEach(function(p){ makeTree(p[0],p[1], 0.75+rng()*0.5); });\n\nfunction makeLabel(text, hexColor){\n var c = document.createElement('canvas'); c.width=96; c.height=96;\n var ctx = c.getContext('2d');\n ctx.beginPath(); ctx.arc(48,48,42,0,Math.PI*2);\n ctx.fillStyle = '#'+hexColor.toString(16).padStart(6,'0'); ctx.fill();\n ctx.lineWidth=5; ctx.strokeStyle='#f1e9d8'; ctx.stroke();\n ctx.fillStyle='#ffffff'; ctx.font='700 46px Inter, sans-serif';\n ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillText(text,48,52);\n var tex = new THREE.CanvasTexture(c);\n var mat = new THREE.SpriteMaterial({map:tex, depthTest:false});\n var sprite = new THREE.Sprite(mat); sprite.scale.set(0.9,0.9,0.9); sprite.renderOrder=999;\n return sprite;\n}\nvar labelSprites = [];\nfunction addLabel(text,color,x,y,z){\n var s = makeLabel(text,color); s.position.set(x,y,z);\n scene.add(s); labelSprites.push(s); return s;\n}\n\nfunction tentMesh(w,d,h,roofColor,wallColor){\n var g = new THREE.Group();\n var base = new THREE.Mesh(new THREE.BoxGeometry(w,h*0.55,d),\n new THREE.MeshLambertMaterial({color:wallColor}));\n base.position.y = h*0.275; base.castShadow = true; base.receiveShadow = true; g.add(base);\n var roof = new THREE.Mesh(new THREE.ConeGeometry(Math.max(w,d)*0.72, h*0.6, 4),\n new THREE.MeshLambertMaterial({color:roofColor}));\n roof.rotation.y = Math.PI\/4; roof.position.y = h*0.55+h*0.3; roof.castShadow = true; g.add(roof);\n return g;\n}\nfunction personMarker(hex){\n var g = new THREE.Group();\n var body = new THREE.Mesh(new THREE.CylinderGeometry(0.09,0.11,0.42,6),\n new THREE.MeshLambertMaterial({color:hex}));\n body.position.y=0.21; var head = new THREE.Mesh(new THREE.SphereGeometry(0.09,6,6),\n new THREE.MeshLambertMaterial({color:0xd8b48a}));\n head.position.y=0.47; g.add(body); g.add(head); g.castShadow=true; return g;\n}\nfunction carBlock(hex){\n var g = new THREE.Group();\n var body = new THREE.Mesh(new THREE.BoxGeometry(0.85,0.28,1.7),\n new THREE.MeshLambertMaterial({color:hex})); body.position.y=0.2;\n var cabin = new THREE.Mesh(new THREE.BoxGeometry(0.7,0.24,0.9),\n new THREE.MeshLambertMaterial({color:0x1c1e24})); cabin.position.set(0,0.42,-0.1);\n g.add(body); g.add(cabin); g.castShadow=true; return g;\n}\n\n\/* ============================================================\n HATTIE'S BUILDING + PARKING LOT\n ============================================================ *\/\n(function(){\n var g = new THREE.Group();\n var walls = new THREE.Mesh(new THREE.BoxGeometry(3.4,1.5,2.0),\n new THREE.MeshLambertMaterial({color:0xece4d0}));\n walls.position.y = 0.75; walls.castShadow=true; walls.receiveShadow=true; g.add(walls);\n var roof = new THREE.Mesh(new THREE.BoxGeometry(3.7,0.18,2.3),\n new THREE.MeshLambertMaterial({color:0x3a3835}));\n roof.position.y = 1.6; roof.castShadow=true; g.add(roof);\n var sign = new THREE.Mesh(new THREE.BoxGeometry(1.6,0.4,0.08),\n new THREE.MeshLambertMaterial({color:0xa8433a}));\n sign.position.set(0,1.85,1.1); g.add(sign);\n g.position.set(-1,0,-6); g.rotation.y = 0.18;\n scene.add(g);\n addLabel(\"Hattie's\",0xa8433a,-1,2.8,-6);\n})();\n\n\/* Hattie's parking lot \u2014 diagonal striped pavement south of the building *\/\n(function(){\n var geo = new THREE.PlaneGeometry(6.2,4.4);\n var lot = new THREE.Mesh(geo, new THREE.MeshLambertMaterial({color:0xb8ae98}));\n lot.rotation.x=-Math.PI\/2; lot.position.set(-1,0.008,-9.2); lot.rotation.z = 0.12;\n lot.receiveShadow = true; scene.add(lot);\n for(var i=0;i<8;i++){\n var t = -2.6 + i*0.72;\n var stripe = new THREE.Mesh(new THREE.PlaneGeometry(0.06,3.6),\n new THREE.MeshBasicMaterial({color:0xffffff}));\n stripe.rotation.x=-Math.PI\/2; stripe.rotation.z = 0.5;\n stripe.position.set(-1+t*0.95, 0.012, -9.2+t*0.35);\n scene.add(stripe);\n }\n})();\n\n\/* ============================================================\n HESTER'S AUTO REPAIR CENTER \u2014 across Old Norlina Rd\n ============================================================ *\/\n(function(){\n var g = new THREE.Group();\n var body = new THREE.Mesh(new THREE.BoxGeometry(4.4,1.8,3.0),\n new THREE.MeshLambertMaterial({color:0x8f8a7c}));\n body.position.y = 0.9; body.castShadow=true; body.receiveShadow=true; g.add(body);\n var roofline = new THREE.Mesh(new THREE.BoxGeometry(4.6,0.15,3.2),\n new THREE.MeshLambertMaterial({color:0x4a4640}));\n roofline.position.y = 1.85; g.add(roofline);\n g.position.set(10.5,0,-5); g.rotation.y = -0.55;\n scene.add(g);\n addLabel(\"Hester's Auto\",0x555a63,10.5,2.6,-5);\n \/* a couple of parked cars out front *\/\n var carColors=[0x6b7b8a,0x8a7b6b,0x5a6b5a];\n [[9.2,-3.0],[9.9,-2.6]].forEach(function(p,i){\n var c = carBlock(carColors[i%carColors.length]);\n c.position.set(p[0],0,p[1]); c.rotation.y = -0.5; scene.add(c);\n });\n})();\n\n\/* background rooftops north of the lot, for context (per aerial) *\/\n(function(){\n [[-5,15,2.2,1.4,1.8],[3,16.5,2.6,1.2,2.0]].forEach(function(p){\n var b = new THREE.Mesh(new THREE.BoxGeometry(p[2],p[3],p[4]),\n new THREE.MeshLambertMaterial({color:0x6b675c}));\n b.position.set(p[0],p[3]\/2,p[1]); b.castShadow=true; scene.add(b);\n });\n})();\n\n\/* ============================================================\n STAGE (A) \u2014 north end of the lot, faces south toward the entry\n ============================================================ *\/\nvar stageGroup = new THREE.Group();\n(function(){\n var deck = new THREE.Mesh(new THREE.BoxGeometry(3.4,0.45,2.6),\n new THREE.MeshLambertMaterial({color:0x2c2a28}));\n deck.position.y=0.225; deck.castShadow=true; deck.receiveShadow=true; stageGroup.add(deck);\n\n var backWall = new THREE.Mesh(new THREE.BoxGeometry(3.4,2.1,0.12),\n new THREE.MeshLambertMaterial({color:0x1f1d1c}));\n backWall.position.set(0,1.5,1.2); backWall.castShadow=true; stageGroup.add(backWall);\n\n var roof = new THREE.Mesh(new THREE.BoxGeometry(3.7,0.12,3.2),\n new THREE.MeshLambertMaterial({color:0x3a3835}));\n roof.position.set(0,2.55,0.05); roof.rotation.x=0.16; roof.castShadow=true; stageGroup.add(roof);\n\n [[-1.6,-1.2],[1.6,-1.2],[-1.6,1.2],[1.6,1.2]].forEach(function(pp){\n var post = new THREE.Mesh(new THREE.CylinderGeometry(0.06,0.06,2.4,6),\n new THREE.MeshLambertMaterial({color:0x2c2a28}));\n post.position.set(pp[0],1.2,pp[1]); post.castShadow=true; stageGroup.add(post);\n });\n\n [-1.9,1.9].forEach(function(px){\n var pa = new THREE.Mesh(new THREE.BoxGeometry(0.4,1.3,0.4),\n new THREE.MeshLambertMaterial({color:0x141414}));\n pa.position.set(px,0.65,-0.9); pa.castShadow=true; stageGroup.add(pa);\n });\n\n [-1.2,0,1.2].forEach(function(lx){\n var pl = new THREE.PointLight(0xffb066, 0.05, 5);\n pl.position.set(lx,2.3,-0.4); stageGroup.add(pl); stageGlowLights.push(pl);\n });\n\n stageGroup.position.set(0,0,7);\n stageGroup.rotation.y = 0; \/* local -Z front already faces south toward the crowd\/entry *\/\n scene.add(stageGroup);\n addLabel('A',0x2c2a28,0,3.2,7);\n})();\n\n\/* FOH (B) *\/\n(function(){\n var g = new THREE.Group();\n var tower = new THREE.Mesh(new THREE.BoxGeometry(0.9,0.85,0.9),\n new THREE.MeshLambertMaterial({color:0x3a3835})); tower.position.y=0.42; tower.castShadow=true;\n var deck = new THREE.Mesh(new THREE.BoxGeometry(1.05,0.08,1.05),\n new THREE.MeshLambertMaterial({color:0x1f1d1c})); deck.position.y=0.88;\n g.add(tower); g.add(deck); g.position.set(0,0,4.5); scene.add(g);\n addLabel('B',0xc98a3d,0,1.4,4.5);\n})();\n\n\/* Audience area + crowd markers (C) *\/\nvar crowdGroup = new THREE.Group();\n(function(){\n var pClothes=[0x6b5b4a,0x4a5a6b,0x5a4a5b,0x6b6a4a,0x3d4a3a,0x555049];\n var n=42, made=0, tries=0;\n while(made<n && tries<1500){\n tries++;\n var x = -3.6+rng()*7.2;\n var z = -0.5+rng()*6.0;\n if(Math.sqrt(x*x+(z-7)*(z-7))<2.4) continue; \/* keep clear of stage *\/\n var pm = personMarker(pClothes[Math.floor(rng()*pClothes.length)]);\n pm.position.set(x,0,z); pm.rotation.y = rng()*Math.PI*2;\n crowdGroup.add(pm); made++;\n }\n scene.add(crowdGroup);\n addLabel('C',0x8a9a5b,0,0.9,2.5);\n})();\n\n\/* Green room tent (D) *\/\n(function(){\n var tent = tentMesh(1.8,1.8,1.6,0xeee6d4,0xf4eee0);\n tent.position.set(4.2,0,7.8); scene.add(tent);\n addLabel('D',0xd8cdb4,4.2,2.1,7.8);\n})();\n\n\/* Vendor & food row (E) \u2014 along the Garnett St edge *\/\n(function(){\n [[-4.6,-0.5],[-4.9,1.3],[-5.1,3.1]].forEach(function(p){\n var tent = tentMesh(1.1,1.1,1.3,0x8a5a2b,0xc4a06a);\n tent.position.set(p[0],0,p[1]); scene.add(tent);\n });\n addLabel('E',0x8a5a2b,-4.9,2.0,1.3);\n})();\n\n\/* Restroom cluster (F) *\/\n(function(){\n var g = new THREE.Group();\n for(var i=0;i<4;i++){\n var unit = new THREE.Mesh(new THREE.BoxGeometry(0.45,1.0,0.45),\n new THREE.MeshLambertMaterial({color:0xe8e2d0}));\n unit.position.set((i%2)*0.58,0.5,Math.floor(i\/2)*0.58); unit.castShadow=true; g.add(unit);\n }\n g.position.set(-2.6,0,-1.2); scene.add(g);\n addLabel('F',0xe8e2d0,-2.6,1.3,-1.2);\n})();\n\n\/* Entry \/ ticketing (G) + First aid (H) *\/\n(function(){\n var g = new THREE.Group();\n [-0.9,0.9].forEach(function(px){\n var post = new THREE.Mesh(new THREE.CylinderGeometry(0.07,0.07,2.0,8),\n new THREE.MeshLambertMaterial({color:0xa8433a})); post.position.set(px,1.0,0); post.castShadow=true; g.add(post);\n });\n var arch = new THREE.Mesh(new THREE.BoxGeometry(2.0,0.18,0.12),\n new THREE.MeshLambertMaterial({color:0xa8433a})); arch.position.set(0,1.95,0); g.add(arch);\n g.position.set(-0.5,0,-2.4); scene.add(g);\n addLabel('G',0xa8433a,-0.5,2.7,-2.4);\n\n var aidTent = tentMesh(0.9,0.9,1.1,0xa8433a,0xf1e9d8);\n aidTent.position.set(1.6,0,-2.2); scene.add(aidTent);\n addLabel('H',0xa8433a,1.6,1.7,-2.2);\n})();\n\n\/* Off-site \/ shared parking markers (K) *\/\naddLabel('K',0x3a4b6c,9.5,3.4,-4.6); \/* Hester's lot, weekend partnership *\/\naddLabel('K',0x3a4b6c,-1,1.0,-8.4); \/* small ADA allotment in Hattie's lot *\/\n\n\/* Trash \/ recycling (L) *\/\nfunction trashBin(x,z){\n var g = new THREE.Group();\n [0,0.3].forEach(function(off,i){\n var bin = new THREE.Mesh(new THREE.CylinderGeometry(0.15,0.13,0.38,8),\n new THREE.MeshLambertMaterial({color:i===0?0x6b7f3f:0x555a63}));\n bin.position.set(off,0.19,0); bin.castShadow=true; g.add(bin);\n });\n g.position.set(x,0,z); scene.add(g);\n}\ntrashBin(-4.2,6.2); trashBin(4.0,5.6);\naddLabel('L',0x6b7f3f,-4.2,0.9,6.2);\n\n\/* ============================================================\n CAMERA CONTROLS \u2014 custom spherical orbit\n ============================================================ *\/\nvar cam = { target:new THREE.Vector3(0,0.8,2), radius:22, theta:0.6, phi:0.9 };\nvar animTarget=null, animT=0, animDur=1.1, animFrom=null;\nfunction shortestAngle(a,b){ var d=(b-a)%(Math.PI*2); if(d>Math.PI)d-=Math.PI*2; if(d<-Math.PI)d+=Math.PI*2; return a+d; }\nfunction updateCameraFromSpherical(){\n var x = cam.target.x + cam.radius*Math.sin(cam.phi)*Math.sin(cam.theta);\n var y = cam.target.y + cam.radius*Math.cos(cam.phi);\n var z = cam.target.z + cam.radius*Math.sin(cam.phi)*Math.cos(cam.theta);\n camera.position.set(x,y,z); camera.lookAt(cam.target);\n var deg = (cam.theta*180\/Math.PI)%360;\n var cs = document.querySelector('#compass svg');\n if(cs) cs.style.transform = 'rotate(' + (-deg) + 'deg)';\n}\n\nvar PRESETS = {\n aerial: {theta:0.5, phi:0.6, radius:24, target:[0,0.6,2]},\n \/* camera on the stage looking south across the crowd toward the entry\/Hattie's *\/\n stage: {theta:0.05, phi:1.35, radius:6.5, target:[0,1.5,1.5]},\n \/* camera in the crowd looking back north at the stage *\/\n crowd: {theta:3.2, phi:1.40, radius:7.5, target:[0,1.9,6.8]},\n \/* camera down at the Garnett St \/ Old Norlina Rd corner, looking into the site *\/\n corner: {theta:-1.05, phi:1.30, radius:13, target:[-1,1.2,-1]}\n};\nfunction goToPreset(name){\n var pr = PRESETS[name];\n animFrom = {theta:cam.theta, phi:cam.phi, radius:cam.radius, target:cam.target.clone()};\n var toTheta = shortestAngle(cam.theta, pr.theta);\n animTarget = {theta:toTheta, phi:pr.phi, radius:pr.radius,\n target:new THREE.Vector3(pr.target[0],pr.target[1],pr.target[2])};\n animT = 0;\n}\n\nvar dragging=false, lastX=0, lastY=0, pinchDist=null;\nfunction pointerDown(x,y){ dragging=true; lastX=x; lastY=y; canvasEl.classList.add('dragging'); }\nfunction pointerMove(x,y){\n if(!dragging) return;\n var dx=x-lastX, dy=y-lastY;\n cam.theta -= dx*0.0055; cam.phi -= dy*0.0045;\n cam.phi = Math.max(0.18, Math.min(1.55, cam.phi));\n lastX=x; lastY=y;\n}\nfunction pointerUp(){ dragging=false; canvasEl.classList.remove('dragging'); }\ncanvasEl.addEventListener('mousedown', function(e){ pointerDown(e.clientX,e.clientY); });\nwindow.addEventListener('mousemove', function(e){ pointerMove(e.clientX,e.clientY); });\nwindow.addEventListener('mouseup', pointerUp);\ncanvasEl.addEventListener('touchstart', function(e){\n if(e.touches.length===1){ pointerDown(e.touches[0].clientX,e.touches[0].clientY); }\n else if(e.touches.length===2){\n var dx=e.touches[0].clientX-e.touches[1].clientX, dy=e.touches[0].clientY-e.touches[1].clientY;\n pinchDist = Math.sqrt(dx*dx+dy*dy);\n }\n},{passive:true});\ncanvasEl.addEventListener('touchmove', function(e){\n if(e.touches.length===1){ pointerMove(e.touches[0].clientX,e.touches[0].clientY); }\n else if(e.touches.length===2 && pinchDist){\n var dx=e.touches[0].clientX-e.touches[1].clientX, dy=e.touches[0].clientY-e.touches[1].clientY;\n var d=Math.sqrt(dx*dx+dy*dy); var delta=pinchDist-d;\n cam.radius = Math.max(4,Math.min(50,cam.radius+delta*0.05)); pinchDist=d;\n }\n},{passive:true});\ncanvasEl.addEventListener('touchend', function(e){ if(e.touches.length===0){ pointerUp(); pinchDist=null; } });\ncanvasEl.addEventListener('wheel', function(e){\n e.preventDefault(); cam.radius = Math.max(4,Math.min(50,cam.radius+e.deltaY*0.02));\n},{passive:false});\n\nvar hintEl = document.getElementById('hint'); var hintHidden=false;\nfunction hideHint(){ if(!hintHidden){ hintEl.classList.add('fade'); hintHidden=true; } }\ncanvasEl.addEventListener('mousedown', hideHint);\ncanvasEl.addEventListener('touchstart', hideHint);\nsetTimeout(hideHint, 5000);\n\n\/* ============================================================\n UI WIRING\n ============================================================ *\/\ndocument.querySelectorAll('.pill[data-preset]').forEach(function(btn){\n btn.addEventListener('click', function(){\n document.querySelectorAll('.pill[data-preset]').forEach(function(b){b.classList.remove('active');});\n btn.classList.add('active'); goToPreset(btn.getAttribute('data-preset'));\n });\n});\nvar panelToggle = document.getElementById('panel-toggle');\nvar sidePanel = document.getElementById('side-panel');\ndocument.getElementById('close-panel').addEventListener('click', function(){ sidePanel.classList.add('hidden'); panelToggle.style.display='flex'; });\npanelToggle.addEventListener('click', function(){ sidePanel.classList.remove('hidden'); panelToggle.style.display='none'; });\ndocument.querySelectorAll('.tod-btn').forEach(function(btn){\n btn.addEventListener('click', function(){\n document.querySelectorAll('.tod-btn').forEach(function(b){b.classList.remove('active');});\n btn.classList.add('active'); applyTOD(btn.getAttribute('data-tod'));\n });\n});\nfunction wireSwitch(id, onChange){\n var el = document.getElementById(id); var state=true;\n el.addEventListener('click', function(){ state=!state; el.classList.toggle('on',state); onChange(state); });\n}\nwireSwitch('toggle-labels', function(on){\n labelSprites.forEach(function(s){ s.visible = on; });\n roadLabels.forEach(function(s){ s.visible = on; });\n});\nwireSwitch('toggle-crowd', function(on){ crowdGroup.visible = on; });\nwireSwitch('toggle-fence', function(on){ fenceLine.visible = on; });\n\n\/* ============================================================\n ANIMATE\n ============================================================ *\/\napplyTOD('noon');\nupdateCameraFromSpherical();\nvar clock = new THREE.Clock();\nfunction animate(){\n requestAnimationFrame(animate);\n var dt = clock.getDelta();\n if(animTarget){\n animT += dt\/animDur; var tt = Math.min(1,animT);\n var e = tt<0.5 ? 2*tt*tt : 1-Math.pow(-2*tt+2,2)\/2;\n cam.theta = animFrom.theta + (animTarget.theta-animFrom.theta)*e;\n cam.phi = animFrom.phi + (animTarget.phi-animFrom.phi)*e;\n cam.radius = animFrom.radius + (animTarget.radius-animFrom.radius)*e;\n cam.target.lerpVectors(animFrom.target, animTarget.target, e);\n if(tt>=1){ animTarget=null; }\n }\n labelSprites.forEach(function(s){\n var d = s.position.distanceTo(camera.position);\n var sc = Math.max(0.5, Math.min(1.2, d*0.045));\n s.scale.set(sc,sc,sc);\n });\n roadLabels.forEach(function(s){\n var d = s.position.distanceTo(camera.position);\n var sc = Math.max(0.7, Math.min(1.8, d*0.05));\n s.scale.set(s.userData.baseW*sc, s.userData.baseH*sc, 1);\n });\n updateCameraFromSpherical();\n renderer.render(scene, camera);\n}\nanimate();\n\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hattie’s Lot \u2014 3D Site Model Nikki Mitchell Jazz Festival Bollar Lewis’s lot at 778 Old Norlina Rd, between N Garnett St and Old Norlina Rddrag to orbit \u00b7 scroll \/ pinch to zoom N Camera Aerial Stage-eye Crowd-eye Highway Corner \u2630 \u2715 Site Key Time of Day Midday Golden Hr Dusk Display Labels Crowd […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-527","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/Pa6WkL-8v","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/pages\/527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/comments?post=527"}],"version-history":[{"count":4,"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/pages\/527\/revisions"}],"predecessor-version":[{"id":531,"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/pages\/527\/revisions\/531"}],"wp:attachment":[{"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/media?parent=527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nHattie's Lot \u2014 3D Site Model<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --ink:#efe7d6; --ink-dim:#b9b2a1; --panel:#171b23e6; --panel-line:#3a3f4a;\n --brass:#c98a3d; --brass-soft:#e0ab6b;\n --red:#a8433a; --navy:#3a4b6c; --cream:#eee6d4; --olive:#6b7f3f; --brown:#8a5a2b;\n }\n *{box-sizing:border-box;}\n html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0f1420;\n font-family:'Inter',sans-serif;}\n #canvas-wrap{position:fixed;inset:0;}\n canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;}\n canvas.dragging{cursor:grabbing;}\n .hud{position:fixed;inset:0;pointer-events:none;z-index:10;}\n .hud > *{pointer-events:auto;}\n .title-block{position:absolute;top:16px;left:16px;max-width:min(78vw,430px);}\n .title-block h1{font-family:'Fraunces',serif;font-weight:600;font-optical-sizing:auto;\n font-size:clamp(15px,3.4vw,21px);color:var(--ink);margin:0 0 3px 0;letter-spacing:.01em;\n text-shadow:0 2px 10px rgba(0,0,0,.6);}\n .title-block p{margin:0;font-size:11.5px;color:var(--ink-dim);letter-spacing:.02em;\n text-shadow:0 1px 6px rgba(0,0,0,.6);}\n .title-block .rule{width:34px;height:2px;background:var(--brass);margin:8px 0 8px 0;\n box-shadow:0 0 8px var(--brass);}\n #compass{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;\n background:var(--panel);border:1px solid var(--panel-line);backdrop-filter:blur(6px);\n display:flex;align-items:center;justify-content:center;}\n #compass svg{width:26px;height:26px;transition:transform .05s linear;}\n #presets{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;\n max-width:70vw;}\n #presets .label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);\n margin-bottom:1px;}\n #presets .row{display:flex;flex-wrap:wrap;gap:6px;}\n .pill{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink);\n background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;\n padding:8px 14px;backdrop-filter:blur(6px);cursor:pointer;white-space:nowrap;\n transition:background .15s,border-color .15s,transform .1s;}\n .pill:hover{border-color:var(--brass);}\n .pill:active{transform:scale(.96);}\n .pill.active{background:var(--brass);border-color:var(--brass);color:#1a1206;}\n #panel-toggle{position:absolute;right:16px;bottom:16px;z-index:11;}\n #side-panel{position:absolute;right:16px;bottom:16px;width:255px;max-height:min(64vh,540px);\n background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;\n backdrop-filter:blur(8px);padding:14px 14px 12px 14px;overflow-y:auto;\n transform-origin:bottom right;transition:transform .18s ease,opacity .18s ease;}\n #side-panel.hidden{transform:scale(.92);opacity:0;pointer-events:none;}\n #side-panel h2{font-family:'Fraunces',serif;font-size:13px;font-weight:600;color:var(--brass-soft);\n margin:0 0 8px 0;letter-spacing:.02em;}\n #side-panel h2.second{margin-top:14px;}\n .legend-item{display:flex;align-items:center;gap:8px;font-size:11.2px;color:var(--ink);\n padding:3px 0;line-height:1.25;}\n .swatch{width:16px;height:16px;border-radius:5px;flex:none;display:flex;align-items:center;\n justify-content:center;font-size:9px;font-weight:700;color:#fff;font-family:'Inter';}\n .toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;\n color:var(--ink);padding:6px 0;border-top:1px solid var(--panel-line);}\n .toggle-row:first-of-type{border-top:none;}\n .switch{position:relative;width:36px;height:20px;background:#3a3f4a;border-radius:12px;\n cursor:pointer;flex:none;transition:background .15s;}\n .switch.on{background:var(--brass);}\n .switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;\n border-radius:50%;background:#efe7d6;transition:left .15s;}\n .switch.on::after{left:18px;}\n .tod-row{display:flex;gap:6px;margin-top:4px;}\n .tod-btn{flex:1;font-size:11px;font-weight:600;color:var(--ink);background:#20242e;\n border:1px solid var(--panel-line);border-radius:8px;padding:6px 4px;cursor:pointer;text-align:center;}\n .tod-btn.active{background:var(--brass);color:#1a1206;border-color:var(--brass);}\n #close-panel{background:none;border:none;color:var(--ink-dim);font-size:16px;cursor:pointer;\n position:absolute;top:10px;right:10px;line-height:1;}\n .fab{width:46px;height:46px;border-radius:50%;background:var(--panel);\n border:1px solid var(--panel-line);backdrop-filter:blur(6px);display:flex;\n align-items:center;justify-content:center;cursor:pointer;color:var(--brass-soft);font-size:18px;}\n .hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);\n font-size:11px;color:var(--ink-dim);background:var(--panel);border:1px solid var(--panel-line);\n border-radius:20px;padding:6px 14px;backdrop-filter:blur(6px);white-space:nowrap;\n opacity:1;transition:opacity .6s ease;}\n .hint.fade{opacity:0;}\n @media (max-width:560px){\n #side-panel{width:min(80vw,262px);}\n .title-block{max-width:66vw;}\n #presets{max-width:58vw;}\n }\n<\/style>\n<\/head>\n<body>\n<div id=\"canvas-wrap\"><\/div>\n\n<div class=\"hud\">\n <div class=\"title-block\">\n <h1>Nikki Mitchell Jazz Festival<\/h1>\n <div class=\"rule\"><\/div>\n <p>Bollar Lewis's lot at 778 Old Norlina Rd, between N Garnett St and Old Norlina Rd<br>drag to orbit \u00b7 scroll \/ pinch to zoom<\/p>\n <\/div>\n\n <div id=\"compass\">\n <svg viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"46\" fill=\"none\" stroke=\"#5a5748\" stroke-width=\"1.5\"\/>\n <polygon points=\"50,10 58,50 50,42 42,50\" fill=\"#c98a3d\"\/>\n <polygon points=\"50,90 58,50 50,58 42,50\" fill=\"#5a5748\"\/>\n <text x=\"50\" y=\"26\" text-anchor=\"middle\" font-size=\"13\" fill=\"#efe7d6\" font-family=\"Inter\" font-weight=\"700\">N<\/text>\n <\/svg>\n <\/div>\n\n <div id=\"presets\">\n <div class=\"label\">Camera<\/div>\n <div class=\"row\">\n <div class=\"pill active\" data-preset=\"aerial\">Aerial<\/div>\n <div class=\"pill\" data-preset=\"stage\">Stage-eye<\/div>\n <div class=\"pill\" data-preset=\"crowd\">Crowd-eye<\/div>\n <div class=\"pill\" data-preset=\"corner\">Highway Corner<\/div>\n <\/div>\n <\/div>\n\n <div id=\"panel-toggle\" class=\"fab\" title=\"Legend & settings\">\u2630<\/div>\n\n <div id=\"side-panel\" class=\"hidden\">\n <button id=\"close-panel\">\u2715<\/button>\n <h2>Site Key<\/h2>\n <div id=\"legend-list\"><\/div>\n <h2 class=\"second\">Time of Day<\/h2>\n <div class=\"tod-row\" id=\"tod-row\">\n <div class=\"tod-btn active\" data-tod=\"noon\">Midday<\/div>\n <div class=\"tod-btn\" data-tod=\"golden\">Golden Hr<\/div>\n <div class=\"tod-btn\" data-tod=\"dusk\">Dusk<\/div>\n <\/div>\n <h2 class=\"second\">Display<\/h2>\n <div class=\"toggle-row\"><span>Labels<\/span><div class=\"switch on\" id=\"toggle-labels\"><\/div><\/div>\n <div class=\"toggle-row\"><span>Crowd markers<\/span><div class=\"switch on\" id=\"toggle-crowd\"><\/div><\/div>\n <div class=\"toggle-row\"><span>Perimeter fence<\/span><div class=\"switch on\" id=\"toggle-fence\"><\/div><\/div>\n <\/div>\n\n <div class=\"hint\" id=\"hint\">drag to look around \u00b7 scroll to zoom \u00b7 tap \u2630 for the key<\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n<script>\n(function(){\n\n\/* ============================================================\n LEGEND\n ============================================================ *\/\nvar LEGEND = [\n {k:'A', name:'Stage (compact)', color:0x2c2a28},\n {k:'B', name:'FOH mix position', color:0xc98a3d},\n {k:'C', name:'Audience area', color:0x8a9a5b},\n {k:'D', name:'Green room tent', color:0xeee6d4},\n {k:'E', name:'Vendor & food row', color:0x8a5a2b},\n {k:'F', name:'Restroom cluster', color:0xe8e2d0},\n {k:'G', name:'Entry \/ ticketing', color:0xa8433a},\n {k:'H', name:'First aid', color:0xa8433a},\n {k:'J', name:'Perimeter fence', color:0xa8433a},\n {k:'K', name:'Off-site \/ shared parking', color:0x3a4b6c},\n {k:'L', name:'Trash \/ recycling', color:0x6b7f3f}\n];\nvar legendList = document.getElementById('legend-list');\nLEGEND.forEach(function(item){\n var row = document.createElement('div');\n row.className = 'legend-item';\n var hex = '#' + item.color.toString(16).padStart(6,'0');\n row.innerHTML = '<div class=\"swatch\" style=\"background:'+hex+'\">'+item.k+'<\/div><div>'+item.name+'<\/div>';\n legendList.appendChild(row);\n});\n\n\/* ============================================================\n SCENE SETUP\n ============================================================ *\/\nvar wrap = document.getElementById('canvas-wrap');\nvar scene = new THREE.Scene();\nvar camera = new THREE.PerspectiveCamera(48, wrap.clientWidth\/wrap.clientHeight, 0.1, 400);\nvar renderer = new THREE.WebGLRenderer({antialias:true});\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio,2));\nrenderer.setSize(wrap.clientWidth, wrap.clientHeight);\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\nwrap.appendChild(renderer.domElement);\nvar canvasEl = renderer.domElement;\n\nwindow.addEventListener('resize', function(){\n camera.aspect = wrap.clientWidth\/wrap.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(wrap.clientWidth, wrap.clientHeight);\n});\n\nfunction mulberry32(a){\n return function(){\n a |= 0; a = a + 0x6D2B79F5 | 0;\n var t = Math.imul(a ^ a >>> 15, 1 | a);\n t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;\n return ((t ^ t >>> 14) >>> 0) \/ 4294967296;\n };\n}\nvar rng = mulberry32(2026);\n\n\/* ============================================================\n LIGHTING \/ TIME OF DAY\n ============================================================ *\/\nvar hemi = new THREE.HemisphereLight(0xffffff, 0x25201a, 0.55);\nscene.add(hemi);\nvar sun = new THREE.DirectionalLight(0xffffff, 1);\nsun.castShadow = true;\nsun.shadow.mapSize.set(1536,1536);\nsun.shadow.camera.left = -30; sun.shadow.camera.right = 30;\nsun.shadow.camera.top = 30; sun.shadow.camera.bottom = -30;\nsun.shadow.camera.near = 1; sun.shadow.camera.far = 90;\nsun.shadow.bias = -0.0015;\nscene.add(sun); scene.add(sun.target);\n\nvar TOD = {\n noon: {sunPos:[10,32,14], sunColor:0xfff2d6, sunI:1.15, hemiSky:0x8fb4d9, hemiGround:0x4a4530,\n hemiI:0.65, top:'#7fa8c9', bottom:'#d9c9a0', fog:'#cdd6c0', fogNear:30, fogFar:85},\n golden: {sunPos:[-24,9,6], sunColor:0xffa552, sunI:1.05, hemiSky:0x35496b, hemiGround:0x2a1f18,\n hemiI:0.5, top:'#33456b', bottom:'#e8935a', fog:'#caa06a', fogNear:24, fogFar:72},\n dusk: {sunPos:[-13,4,9], sunColor:0x8aa0ff, sunI:0.35, hemiSky:0x0f1420, hemiGround:0x1a1522,\n hemiI:0.4, top:'#0b0f18', bottom:'#3c2f42', fog:'#221c2a', fogNear:16, fogFar:56}\n};\nfunction skyTexture(topHex, bottomHex){\n var c = document.createElement('canvas'); c.width = 8; c.height = 256;\n var ctx = c.getContext('2d');\n var g = ctx.createLinearGradient(0,0,0,256);\n g.addColorStop(0, topHex); g.addColorStop(1, bottomHex);\n ctx.fillStyle = g; ctx.fillRect(0,0,8,256);\n var tex = new THREE.CanvasTexture(c); tex.magFilter = THREE.LinearFilter;\n return tex;\n}\nvar stageGlowLights = [];\nfunction applyTOD(name){\n var s = TOD[name];\n sun.position.set(s.sunPos[0], s.sunPos[1], s.sunPos[2]);\n sun.target.position.set(0,0,0);\n sun.color.setHex(s.sunColor); sun.intensity = s.sunI;\n hemi.color.setHex(s.hemiSky); hemi.groundColor.setHex(s.hemiGround); hemi.intensity = s.hemiI;\n scene.background = skyTexture(s.top, s.bottom);\n scene.fog = new THREE.Fog(new THREE.Color(s.fog), s.fogNear, s.fogFar);\n var glowI = name === 'dusk' ? 1.4 : (name === 'golden' ? 0.5 : 0.05);\n stageGlowLights.forEach(function(l){ l.intensity = glowI; });\n}\n\n\/* ============================================================\n GROUND\n ============================================================ *\/\nvar ground = new THREE.Mesh(new THREE.PlaneGeometry(140,140,1,1),\n new THREE.MeshLambertMaterial({color:0x5a6a45}));\nground.rotation.x = -Math.PI\/2; ground.receiveShadow = true;\nscene.add(ground);\n\n\/* festival lot boundary \u2014 trapezoid, wider at the north end, per aerial *\/\nvar lotPts = [\n [-6.2,-3.0],[-5.2,7.6],[-3.6,9.0],[2.6,8.6],[6.4,6.3],\n [5.6,1.6],[3.6,-2.0],[-0.8,-2.8],[-4.2,-2.6]\n];\nvar shape = new THREE.Shape(lotPts.map(function(p){return new THREE.Vector2(p[0],p[1]);}));\n\/* bare dirt\/weed base under the lot, matching the ground-level reference photos \u2014\n this parcel reads as open gravel\/dirt with sparse weeds, not a mowed lawn *\/\nvar lotDirt = new THREE.Mesh(new THREE.ShapeGeometry(shape),\n new THREE.MeshLambertMaterial({color:0x8a7f63}));\nlotDirt.rotation.x = -Math.PI\/2; lotDirt.position.y = 0.015; lotDirt.receiveShadow = true;\nscene.add(lotDirt);\nvar lotFill = new THREE.Mesh(new THREE.ShapeGeometry(shape),\n new THREE.MeshBasicMaterial({color:0xc98a3d, transparent:true, opacity:0.14, depthWrite:false}));\nlotFill.rotation.x = -Math.PI\/2; lotFill.position.y = 0.02;\nscene.add(lotFill);\n\nfunction dashedLoop(pts, y, colorHex, dashSize, gapSize, closeLoop){\n var vpts = pts.map(function(p){return new THREE.Vector3(p[0], y, p[1]);});\n if(closeLoop!==false) vpts.push(vpts[0].clone());\n var geo = new THREE.BufferGeometry().setFromPoints(vpts);\n var mat = new THREE.LineDashedMaterial({color:colorHex, dashSize:dashSize, gapSize:gapSize});\n var line = new THREE.Line(geo, mat);\n line.computeLineDistances();\n scene.add(line);\n return line;\n}\ndashedLoop(lotPts, 0.03, 0xc98a3d, 0.55, 0.3);\n\n\/* perimeter fence \u2014 runs the Garnett St + Old Norlina Rd frontages (J) *\/\nvar fencePts = [[-6.2,-3.0],[-5.2,7.6],[-3.6,9.0],[2.6,8.6],[6.4,6.3],[5.6,1.6]];\nvar fenceLine = dashedLoop(fencePts, 0.04, 0xa8433a, 0.35, 0.2, false);\n\n\/* ============================================================\n ROADS \u2014 Garnett St (west) + Old Norlina Rd (diagonal, east)\n ============================================================ *\/\nfunction roadSegment(x1,z1,x2,z2,width,color){\n var dx=x2-x1, dz=z2-z1, len=Math.sqrt(dx*dx+dz*dz);\n var m = new THREE.Mesh(new THREE.PlaneGeometry(width,len),\n new THREE.MeshLambertMaterial({color:color}));\n m.rotation.x = -Math.PI\/2; m.rotation.z = -Math.atan2(dx,dz);\n m.position.set((x1+x2)\/2, 0.01, (z1+z2)\/2); m.receiveShadow = true;\n scene.add(m); return m;\n}\nroadSegment(-6.0,-20, -8.2,20, 3.4, 0xcabfa4); \/* N Garnett St *\/\nroadSegment(-2.0,-19, 4.6,-2.5, 3.2, 0xc3b79a); \/* Old Norlina Rd, south leg *\/\nroadSegment(4.6,-2.5, 15,18, 3.2, 0xc3b79a); \/* Old Norlina Rd, north leg *\/\nroadSegment(-4.5,-19.5, -2.3,-17.5, 2.0, 0xcabfa4); \/* Wiggins St stub *\/\n\n\/* centerline dashes for Garnett St *\/\n(function(){\n var steps=20;\n for(var i=0;i<steps;i++){\n var t0=i\/steps, t1=(i+0.5)\/steps;\n var x0=-6.0+(-8.2- -6.0)*t0, z0=-20+(20- -20)*t0;\n var x1=-6.0+(-8.2- -6.0)*t1, z1=-20+(20- -20)*t1;\n var m = new THREE.Mesh(new THREE.PlaneGeometry(0.1,0.85),\n new THREE.MeshBasicMaterial({color:0xf1e9d8}));\n m.rotation.x=-Math.PI\/2; m.rotation.z=-Math.atan2(x1-x0,z1-z0);\n m.position.set((x0+x1)\/2,0.02,(z0+z1)\/2); scene.add(m);\n }\n})();\n\n\/* BUS 158 shield marker near the south fork *\/\n(function(){\n var post = new THREE.Mesh(new THREE.CylinderGeometry(0.04,0.04,1.6,6),\n new THREE.MeshLambertMaterial({color:0x3a3835}));\n post.position.set(-3.0,0.8,-17.2); scene.add(post);\n var sign = new THREE.Mesh(new THREE.BoxGeometry(0.6,0.6,0.06),\n new THREE.MeshLambertMaterial({color:0xffffff}));\n sign.position.set(-3.0,1.55,-17.2); scene.add(sign);\n})();\n\n\/* ============================================================\n ROAD NAME \/ ADDRESS LABELS \u2014 the lot sits BETWEEN two streets:\n N Garnett St to the west, Old Norlina Rd to the east. The lot's\n own parcel address (778 Old Norlina Rd) is distinct from\n Hattie's own address (1029 N Garnett St).\n ============================================================ *\/\nfunction makeTextLabel(text, bg, fg, wide){\n var c = document.createElement('canvas');\n c.width = wide ? 512 : 320; c.height = 96;\n var ctx = c.getContext('2d');\n var r = 22;\n ctx.fillStyle = bg;\n ctx.beginPath();\n ctx.moveTo(r,4); ctx.arcTo(c.width-4,4,c.width-4,c.height-4,r);\n ctx.arcTo(c.width-4,c.height-4,4,c.height-4,r);\n ctx.arcTo(4,c.height-4,4,4,r); ctx.arcTo(4,4,c.width-4,4,r);\n ctx.closePath(); ctx.fill();\n ctx.strokeStyle = '#f1e9d8'; ctx.lineWidth = 4; ctx.stroke();\n ctx.fillStyle = fg; ctx.font = '700 40px Inter, sans-serif';\n ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\n ctx.fillText(text, c.width\/2, c.height\/2+2);\n var tex = new THREE.CanvasTexture(c);\n var mat = new THREE.SpriteMaterial({map:tex, depthTest:false});\n var sprite = new THREE.Sprite(mat);\n var w = 0.62*(wide ? 512\/96 : 320\/96);\n sprite.userData.baseW = w; sprite.userData.baseH = 0.62;\n sprite.scale.set(w,0.62,1); sprite.renderOrder = 998;\n return sprite;\n}\nvar roadLabels = [];\nfunction addRoadLabel(text,x,y,z,bg,fg,wide){\n var s = makeTextLabel(text,bg,fg,wide);\n s.position.set(x,y,z); scene.add(s); roadLabels.push(s); return s;\n}\naddRoadLabel('N GARNETT ST', -6.6, 1.3, 4.5, '#20242e', '#efe7d6', true);\naddRoadLabel('OLD NORLINA RD', 9.2, 1.3, 5.0, '#a8433a', '#ffffff', true);\naddRoadLabel('NORLINA RD (BUS. 158)', -0.5, 1.1, -12.5, '#a8433a', '#ffffff', true);\naddRoadLabel(\"778 Old Norlina Rd \\u2014 the lot's own address\", 3.0, 4.6, 6.2, '#c98a3d', '#1a1206', true);\naddRoadLabel(\"1029 N Garnett St \\u2014 Hattie's address\", -1, 3.4, -6, '#20242e', '#efe7d6', true);\n\n\/* ============================================================\n SHARED HELPERS (trees, labels, tents, people, cars)\n ============================================================ *\/\nvar canopyColors = [0x2e3a22, 0x243019, 0x35452a, 0x2a3620];\nfunction makeTree(x,z,scale){\n var g = new THREE.Group();\n var trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.06*scale,0.09*scale,0.9*scale,6),\n new THREE.MeshLambertMaterial({color:0x4a3a2a}));\n trunk.position.y = 0.45*scale; trunk.castShadow = true; g.add(trunk);\n var cCount = 2+Math.floor(rng()*2);\n for(var i=0;i<cCount;i++){\n var s=(0.55+rng()*0.35)*scale;\n var cone = new THREE.Mesh(new THREE.ConeGeometry(0.55*s,1.3*s,7),\n new THREE.MeshLambertMaterial({color:canopyColors[Math.floor(rng()*canopyColors.length)]}));\n cone.position.set((rng()-0.5)*0.3*scale, 0.9*scale+i*0.55*s, (rng()-0.5)*0.3*scale);\n cone.castShadow = true; g.add(cone);\n }\n g.position.set(x,0,z); scene.add(g); return g;\n}\n\/* sparse urban tree\/brush scatter around the lot edges (per aerial's dark patches) *\/\nvar treeSpots = [\n [-6.6,10.5],[-7.4,9.0],[7.6,9.7],[8.6,8.2],[8.0,2.0],[9.0,0.5],\n [-1.0,10.3],[1.5,10.6],[9.8,3.4]\n];\ntreeSpots.forEach(function(p){ makeTree(p[0],p[1], 0.75+rng()*0.5); });\n\nfunction makeLabel(text, hexColor){\n var c = document.createElement('canvas'); c.width=96; c.height=96;\n var ctx = c.getContext('2d');\n ctx.beginPath(); ctx.arc(48,48,42,0,Math.PI*2);\n ctx.fillStyle = '#'+hexColor.toString(16).padStart(6,'0'); ctx.fill();\n ctx.lineWidth=5; ctx.strokeStyle='#f1e9d8'; ctx.stroke();\n ctx.fillStyle='#ffffff'; ctx.font='700 46px Inter, sans-serif';\n ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillText(text,48,52);\n var tex = new THREE.CanvasTexture(c);\n var mat = new THREE.SpriteMaterial({map:tex, depthTest:false});\n var sprite = new THREE.Sprite(mat); sprite.scale.set(0.9,0.9,0.9); sprite.renderOrder=999;\n return sprite;\n}\nvar labelSprites = [];\nfunction addLabel(text,color,x,y,z){\n var s = makeLabel(text,color); s.position.set(x,y,z);\n scene.add(s); labelSprites.push(s); return s;\n}\n\nfunction tentMesh(w,d,h,roofColor,wallColor){\n var g = new THREE.Group();\n var base = new THREE.Mesh(new THREE.BoxGeometry(w,h*0.55,d),\n new THREE.MeshLambertMaterial({color:wallColor}));\n base.position.y = h*0.275; base.castShadow = true; base.receiveShadow = true; g.add(base);\n var roof = new THREE.Mesh(new THREE.ConeGeometry(Math.max(w,d)*0.72, h*0.6, 4),\n new THREE.MeshLambertMaterial({color:roofColor}));\n roof.rotation.y = Math.PI\/4; roof.position.y = h*0.55+h*0.3; roof.castShadow = true; g.add(roof);\n return g;\n}\nfunction personMarker(hex){\n var g = new THREE.Group();\n var body = new THREE.Mesh(new THREE.CylinderGeometry(0.09,0.11,0.42,6),\n new THREE.MeshLambertMaterial({color:hex}));\n body.position.y=0.21; var head = new THREE.Mesh(new THREE.SphereGeometry(0.09,6,6),\n new THREE.MeshLambertMaterial({color:0xd8b48a}));\n head.position.y=0.47; g.add(body); g.add(head); g.castShadow=true; return g;\n}\nfunction carBlock(hex){\n var g = new THREE.Group();\n var body = new THREE.Mesh(new THREE.BoxGeometry(0.85,0.28,1.7),\n new THREE.MeshLambertMaterial({color:hex})); body.position.y=0.2;\n var cabin = new THREE.Mesh(new THREE.BoxGeometry(0.7,0.24,0.9),\n new THREE.MeshLambertMaterial({color:0x1c1e24})); cabin.position.set(0,0.42,-0.1);\n g.add(body); g.add(cabin); g.castShadow=true; return g;\n}\n\n\/* ============================================================\n HATTIE'S BUILDING + PARKING LOT\n ============================================================ *\/\n(function(){\n var g = new THREE.Group();\n var walls = new THREE.Mesh(new THREE.BoxGeometry(3.4,1.5,2.0),\n new THREE.MeshLambertMaterial({color:0xece4d0}));\n walls.position.y = 0.75; walls.castShadow=true; walls.receiveShadow=true; g.add(walls);\n var roof = new THREE.Mesh(new THREE.BoxGeometry(3.7,0.18,2.3),\n new THREE.MeshLambertMaterial({color:0x3a3835}));\n roof.position.y = 1.6; roof.castShadow=true; g.add(roof);\n var sign = new THREE.Mesh(new THREE.BoxGeometry(1.6,0.4,0.08),\n new THREE.MeshLambertMaterial({color:0xa8433a}));\n sign.position.set(0,1.85,1.1); g.add(sign);\n g.position.set(-1,0,-6); g.rotation.y = 0.18;\n scene.add(g);\n addLabel(\"Hattie's\",0xa8433a,-1,2.8,-6);\n})();\n\n\/* Hattie's parking lot \u2014 diagonal striped pavement south of the building *\/\n(function(){\n var geo = new THREE.PlaneGeometry(6.2,4.4);\n var lot = new THREE.Mesh(geo, new THREE.MeshLambertMaterial({color:0xb8ae98}));\n lot.rotation.x=-Math.PI\/2; lot.position.set(-1,0.008,-9.2); lot.rotation.z = 0.12;\n lot.receiveShadow = true; scene.add(lot);\n for(var i=0;i<8;i++){\n var t = -2.6 + i*0.72;\n var stripe = new THREE.Mesh(new THREE.PlaneGeometry(0.06,3.6),\n new THREE.MeshBasicMaterial({color:0xffffff}));\n stripe.rotation.x=-Math.PI\/2; stripe.rotation.z = 0.5;\n stripe.position.set(-1+t*0.95, 0.012, -9.2+t*0.35);\n scene.add(stripe);\n }\n})();\n\n\/* ============================================================\n HESTER'S AUTO REPAIR CENTER \u2014 across Old Norlina Rd\n ============================================================ *\/\n(function(){\n var g = new THREE.Group();\n var body = new THREE.Mesh(new THREE.BoxGeometry(4.4,1.8,3.0),\n new THREE.MeshLambertMaterial({color:0x8f8a7c}));\n body.position.y = 0.9; body.castShadow=true; body.receiveShadow=true; g.add(body);\n var roofline = new THREE.Mesh(new THREE.BoxGeometry(4.6,0.15,3.2),\n new THREE.MeshLambertMaterial({color:0x4a4640}));\n roofline.position.y = 1.85; g.add(roofline);\n g.position.set(10.5,0,-5); g.rotation.y = -0.55;\n scene.add(g);\n addLabel(\"Hester's Auto\",0x555a63,10.5,2.6,-5);\n \/* a couple of parked cars out front *\/\n var carColors=[0x6b7b8a,0x8a7b6b,0x5a6b5a];\n [[9.2,-3.0],[9.9,-2.6]].forEach(function(p,i){\n var c = carBlock(carColors[i%carColors.length]);\n c.position.set(p[0],0,p[1]); c.rotation.y = -0.5; scene.add(c);\n });\n})();\n\n\/* background rooftops north of the lot, for context (per aerial) *\/\n(function(){\n [[-5,15,2.2,1.4,1.8],[3,16.5,2.6,1.2,2.0]].forEach(function(p){\n var b = new THREE.Mesh(new THREE.BoxGeometry(p[2],p[3],p[4]),\n new THREE.MeshLambertMaterial({color:0x6b675c}));\n b.position.set(p[0],p[3]\/2,p[1]); b.castShadow=true; scene.add(b);\n });\n})();\n\n\/* ============================================================\n STAGE (A) \u2014 north end of the lot, faces south toward the entry\n ============================================================ *\/\nvar stageGroup = new THREE.Group();\n(function(){\n var deck = new THREE.Mesh(new THREE.BoxGeometry(3.4,0.45,2.6),\n new THREE.MeshLambertMaterial({color:0x2c2a28}));\n deck.position.y=0.225; deck.castShadow=true; deck.receiveShadow=true; stageGroup.add(deck);\n\n var backWall = new THREE.Mesh(new THREE.BoxGeometry(3.4,2.1,0.12),\n new THREE.MeshLambertMaterial({color:0x1f1d1c}));\n backWall.position.set(0,1.5,1.2); backWall.castShadow=true; stageGroup.add(backWall);\n\n var roof = new THREE.Mesh(new THREE.BoxGeometry(3.7,0.12,3.2),\n new THREE.MeshLambertMaterial({color:0x3a3835}));\n roof.position.set(0,2.55,0.05); roof.rotation.x=0.16; roof.castShadow=true; stageGroup.add(roof);\n\n [[-1.6,-1.2],[1.6,-1.2],[-1.6,1.2],[1.6,1.2]].forEach(function(pp){\n var post = new THREE.Mesh(new THREE.CylinderGeometry(0.06,0.06,2.4,6),\n new THREE.MeshLambertMaterial({color:0x2c2a28}));\n post.position.set(pp[0],1.2,pp[1]); post.castShadow=true; stageGroup.add(post);\n });\n\n [-1.9,1.9].forEach(function(px){\n var pa = new THREE.Mesh(new THREE.BoxGeometry(0.4,1.3,0.4),\n new THREE.MeshLambertMaterial({color:0x141414}));\n pa.position.set(px,0.65,-0.9); pa.castShadow=true; stageGroup.add(pa);\n });\n\n [-1.2,0,1.2].forEach(function(lx){\n var pl = new THREE.PointLight(0xffb066, 0.05, 5);\n pl.position.set(lx,2.3,-0.4); stageGroup.add(pl); stageGlowLights.push(pl);\n });\n\n stageGroup.position.set(0,0,7);\n stageGroup.rotation.y = 0; \/* local -Z front already faces south toward the crowd\/entry *\/\n scene.add(stageGroup);\n addLabel('A',0x2c2a28,0,3.2,7);\n})();\n\n\/* FOH (B) *\/\n(function(){\n var g = new THREE.Group();\n var tower = new THREE.Mesh(new THREE.BoxGeometry(0.9,0.85,0.9),\n new THREE.MeshLambertMaterial({color:0x3a3835})); tower.position.y=0.42; tower.castShadow=true;\n var deck = new THREE.Mesh(new THREE.BoxGeometry(1.05,0.08,1.05),\n new THREE.MeshLambertMaterial({color:0x1f1d1c})); deck.position.y=0.88;\n g.add(tower); g.add(deck); g.position.set(0,0,4.5); scene.add(g);\n addLabel('B',0xc98a3d,0,1.4,4.5);\n})();\n\n\/* Audience area + crowd markers (C) *\/\nvar crowdGroup = new THREE.Group();\n(function(){\n var pClothes=[0x6b5b4a,0x4a5a6b,0x5a4a5b,0x6b6a4a,0x3d4a3a,0x555049];\n var n=42, made=0, tries=0;\n while(made<n && tries<1500){\n tries++;\n var x = -3.6+rng()*7.2;\n var z = -0.5+rng()*6.0;\n if(Math.sqrt(x*x+(z-7)*(z-7))<2.4) continue; \/* keep clear of stage *\/\n var pm = personMarker(pClothes[Math.floor(rng()*pClothes.length)]);\n pm.position.set(x,0,z); pm.rotation.y = rng()*Math.PI*2;\n crowdGroup.add(pm); made++;\n }\n scene.add(crowdGroup);\n addLabel('C',0x8a9a5b,0,0.9,2.5);\n})();\n\n\/* Green room tent (D) *\/\n(function(){\n var tent = tentMesh(1.8,1.8,1.6,0xeee6d4,0xf4eee0);\n tent.position.set(4.2,0,7.8); scene.add(tent);\n addLabel('D',0xd8cdb4,4.2,2.1,7.8);\n})();\n\n\/* Vendor & food row (E) \u2014 along the Garnett St edge *\/\n(function(){\n [[-4.6,-0.5],[-4.9,1.3],[-5.1,3.1]].forEach(function(p){\n var tent = tentMesh(1.1,1.1,1.3,0x8a5a2b,0xc4a06a);\n tent.position.set(p[0],0,p[1]); scene.add(tent);\n });\n addLabel('E',0x8a5a2b,-4.9,2.0,1.3);\n})();\n\n\/* Restroom cluster (F) *\/\n(function(){\n var g = new THREE.Group();\n for(var i=0;i<4;i++){\n var unit = new THREE.Mesh(new THREE.BoxGeometry(0.45,1.0,0.45),\n new THREE.MeshLambertMaterial({color:0xe8e2d0}));\n unit.position.set((i%2)*0.58,0.5,Math.floor(i\/2)*0.58); unit.castShadow=true; g.add(unit);\n }\n g.position.set(-2.6,0,-1.2); scene.add(g);\n addLabel('F',0xe8e2d0,-2.6,1.3,-1.2);\n})();\n\n\/* Entry \/ ticketing (G) + First aid (H) *\/\n(function(){\n var g = new THREE.Group();\n [-0.9,0.9].forEach(function(px){\n var post = new THREE.Mesh(new THREE.CylinderGeometry(0.07,0.07,2.0,8),\n new THREE.MeshLambertMaterial({color:0xa8433a})); post.position.set(px,1.0,0); post.castShadow=true; g.add(post);\n });\n var arch = new THREE.Mesh(new THREE.BoxGeometry(2.0,0.18,0.12),\n new THREE.MeshLambertMaterial({color:0xa8433a})); arch.position.set(0,1.95,0); g.add(arch);\n g.position.set(-0.5,0,-2.4); scene.add(g);\n addLabel('G',0xa8433a,-0.5,2.7,-2.4);\n\n var aidTent = tentMesh(0.9,0.9,1.1,0xa8433a,0xf1e9d8);\n aidTent.position.set(1.6,0,-2.2); scene.add(aidTent);\n addLabel('H',0xa8433a,1.6,1.7,-2.2);\n})();\n\n\/* Off-site \/ shared parking markers (K) *\/\naddLabel('K',0x3a4b6c,9.5,3.4,-4.6); \/* Hester's lot, weekend partnership *\/\naddLabel('K',0x3a4b6c,-1,1.0,-8.4); \/* small ADA allotment in Hattie's lot *\/\n\n\/* Trash \/ recycling (L) *\/\nfunction trashBin(x,z){\n var g = new THREE.Group();\n [0,0.3].forEach(function(off,i){\n var bin = new THREE.Mesh(new THREE.CylinderGeometry(0.15,0.13,0.38,8),\n new THREE.MeshLambertMaterial({color:i===0?0x6b7f3f:0x555a63}));\n bin.position.set(off,0.19,0); bin.castShadow=true; g.add(bin);\n });\n g.position.set(x,0,z); scene.add(g);\n}\ntrashBin(-4.2,6.2); trashBin(4.0,5.6);\naddLabel('L',0x6b7f3f,-4.2,0.9,6.2);\n\n\/* ============================================================\n CAMERA CONTROLS \u2014 custom spherical orbit\n ============================================================ *\/\nvar cam = { target:new THREE.Vector3(0,0.8,2), radius:22, theta:0.6, phi:0.9 };\nvar animTarget=null, animT=0, animDur=1.1, animFrom=null;\nfunction shortestAngle(a,b){ var d=(b-a)%(Math.PI*2); if(d>Math.PI)d-=Math.PI*2; if(d<-Math.PI)d+=Math.PI*2; return a+d; }\nfunction updateCameraFromSpherical(){\n var x = cam.target.x + cam.radius*Math.sin(cam.phi)*Math.sin(cam.theta);\n var y = cam.target.y + cam.radius*Math.cos(cam.phi);\n var z = cam.target.z + cam.radius*Math.sin(cam.phi)*Math.cos(cam.theta);\n camera.position.set(x,y,z); camera.lookAt(cam.target);\n var deg = (cam.theta*180\/Math.PI)%360;\n var cs = document.querySelector('#compass svg');\n if(cs) cs.style.transform = 'rotate(' + (-deg) + 'deg)';\n}\n\nvar PRESETS = {\n aerial: {theta:0.5, phi:0.6, radius:24, target:[0,0.6,2]},\n \/* camera on the stage looking south across the crowd toward the entry\/Hattie's *\/\n stage: {theta:0.05, phi:1.35, radius:6.5, target:[0,1.5,1.5]},\n \/* camera in the crowd looking back north at the stage *\/\n crowd: {theta:3.2, phi:1.40, radius:7.5, target:[0,1.9,6.8]},\n \/* camera down at the Garnett St \/ Old Norlina Rd corner, looking into the site *\/\n corner: {theta:-1.05, phi:1.30, radius:13, target:[-1,1.2,-1]}\n};\nfunction goToPreset(name){\n var pr = PRESETS[name];\n animFrom = {theta:cam.theta, phi:cam.phi, radius:cam.radius, target:cam.target.clone()};\n var toTheta = shortestAngle(cam.theta, pr.theta);\n animTarget = {theta:toTheta, phi:pr.phi, radius:pr.radius,\n target:new THREE.Vector3(pr.target[0],pr.target[1],pr.target[2])};\n animT = 0;\n}\n\nvar dragging=false, lastX=0, lastY=0, pinchDist=null;\nfunction pointerDown(x,y){ dragging=true; lastX=x; lastY=y; canvasEl.classList.add('dragging'); }\nfunction pointerMove(x,y){\n if(!dragging) return;\n var dx=x-lastX, dy=y-lastY;\n cam.theta -= dx*0.0055; cam.phi -= dy*0.0045;\n cam.phi = Math.max(0.18, Math.min(1.55, cam.phi));\n lastX=x; lastY=y;\n}\nfunction pointerUp(){ dragging=false; canvasEl.classList.remove('dragging'); }\ncanvasEl.addEventListener('mousedown', function(e){ pointerDown(e.clientX,e.clientY); });\nwindow.addEventListener('mousemove', function(e){ pointerMove(e.clientX,e.clientY); });\nwindow.addEventListener('mouseup', pointerUp);\ncanvasEl.addEventListener('touchstart', function(e){\n if(e.touches.length===1){ pointerDown(e.touches[0].clientX,e.touches[0].clientY); }\n else if(e.touches.length===2){\n var dx=e.touches[0].clientX-e.touches[1].clientX, dy=e.touches[0].clientY-e.touches[1].clientY;\n pinchDist = Math.sqrt(dx*dx+dy*dy);\n }\n},{passive:true});\ncanvasEl.addEventListener('touchmove', function(e){\n if(e.touches.length===1){ pointerMove(e.touches[0].clientX,e.touches[0].clientY); }\n else if(e.touches.length===2 && pinchDist){\n var dx=e.touches[0].clientX-e.touches[1].clientX, dy=e.touches[0].clientY-e.touches[1].clientY;\n var d=Math.sqrt(dx*dx+dy*dy); var delta=pinchDist-d;\n cam.radius = Math.max(4,Math.min(50,cam.radius+delta*0.05)); pinchDist=d;\n }\n},{passive:true});\ncanvasEl.addEventListener('touchend', function(e){ if(e.touches.length===0){ pointerUp(); pinchDist=null; } });\ncanvasEl.addEventListener('wheel', function(e){\n e.preventDefault(); cam.radius = Math.max(4,Math.min(50,cam.radius+e.deltaY*0.02));\n},{passive:false});\n\nvar hintEl = document.getElementById('hint'); var hintHidden=false;\nfunction hideHint(){ if(!hintHidden){ hintEl.classList.add('fade'); hintHidden=true; } }\ncanvasEl.addEventListener('mousedown', hideHint);\ncanvasEl.addEventListener('touchstart', hideHint);\nsetTimeout(hideHint, 5000);\n\n\/* ============================================================\n UI WIRING\n ============================================================ *\/\ndocument.querySelectorAll('.pill[data-preset]').forEach(function(btn){\n btn.addEventListener('click', function(){\n document.querySelectorAll('.pill[data-preset]').forEach(function(b){b.classList.remove('active');});\n btn.classList.add('active'); goToPreset(btn.getAttribute('data-preset'));\n });\n});\nvar panelToggle = document.getElementById('panel-toggle');\nvar sidePanel = document.getElementById('side-panel');\ndocument.getElementById('close-panel').addEventListener('click', function(){ sidePanel.classList.add('hidden'); panelToggle.style.display='flex'; });\npanelToggle.addEventListener('click', function(){ sidePanel.classList.remove('hidden'); panelToggle.style.display='none'; });\ndocument.querySelectorAll('.tod-btn').forEach(function(btn){\n btn.addEventListener('click', function(){\n document.querySelectorAll('.tod-btn').forEach(function(b){b.classList.remove('active');});\n btn.classList.add('active'); applyTOD(btn.getAttribute('data-tod'));\n });\n});\nfunction wireSwitch(id, onChange){\n var el = document.getElementById(id); var state=true;\n el.addEventListener('click', function(){ state=!state; el.classList.toggle('on',state); onChange(state); });\n}\nwireSwitch('toggle-labels', function(on){\n labelSprites.forEach(function(s){ s.visible = on; });\n roadLabels.forEach(function(s){ s.visible = on; });\n});\nwireSwitch('toggle-crowd', function(on){ crowdGroup.visible = on; });\nwireSwitch('toggle-fence', function(on){ fenceLine.visible = on; });\n\n\/* ============================================================\n ANIMATE\n ============================================================ *\/\napplyTOD('noon');\nupdateCameraFromSpherical();\nvar clock = new THREE.Clock();\nfunction animate(){\n requestAnimationFrame(animate);\n var dt = clock.getDelta();\n if(animTarget){\n animT += dt\/animDur; var tt = Math.min(1,animT);\n var e = tt<0.5 ? 2*tt*tt : 1-Math.pow(-2*tt+2,2)\/2;\n cam.theta = animFrom.theta + (animTarget.theta-animFrom.theta)*e;\n cam.phi = animFrom.phi + (animTarget.phi-animFrom.phi)*e;\n cam.radius = animFrom.radius + (animTarget.radius-animFrom.radius)*e;\n cam.target.lerpVectors(animFrom.target, animTarget.target, e);\n if(tt>=1){ animTarget=null; }\n }\n labelSprites.forEach(function(s){\n var d = s.position.distanceTo(camera.position);\n var sc = Math.max(0.5, Math.min(1.2, d*0.045));\n s.scale.set(sc,sc,sc);\n });\n roadLabels.forEach(function(s){\n var d = s.position.distanceTo(camera.position);\n var sc = Math.max(0.7, Math.min(1.8, d*0.05));\n s.scale.set(s.userData.baseW*sc, s.userData.baseH*sc, 1);\n });\n updateCameraFromSpherical();\n renderer.render(scene, camera);\n}\nanimate();\n\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hattie’s Lot \u2014 3D Site Model Nikki Mitchell Jazz Festival Bollar Lewis’s lot at 778 Old Norlina Rd, between N Garnett St and Old Norlina Rddrag to orbit \u00b7 scroll \/ pinch to zoom N Camera Aerial Stage-eye Crowd-eye Highway Corner \u2630 \u2715 Site Key Time of Day Midday Golden Hr Dusk Display Labels Crowd […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-527","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/Pa6WkL-8v","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/pages\/527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/comments?post=527"}],"version-history":[{"count":4,"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/pages\/527\/revisions"}],"predecessor-version":[{"id":531,"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/pages\/527\/revisions\/531"}],"wp:attachment":[{"href":"https:\/\/itutu.com\/index.php\/wp-json\/wp\/v2\/media?parent=527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}