morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(paint-slots): per-part paint for windows + doors, chrome/brass, world-scale UVs

Browse Source 
Builds on the explicit per-mesh slot tagging (currentDoorSlot/currentWindowSlot):

- Per-part painting: door = panel/frame/glass/hardware, window = frame/glass,
  each independently paintable. The recessed door/window body sits behind the
  wall, so the proud invisible cutout wins the scene raycast over the wall and
  the shared resolveSlotByReRaycast() re-raycasts the kind's own subtree to pick
  the exact part under the cursor (panel↔frame↔glass↔hardware). Hover tracks the
  cursor via a  re-eval (idempotent, no flicker).
- Door frame is its own slot (separate frameMaterial); hardware = new flat
  'metal-chrome'.
- Library defaults (generic): panel/frame -> library:preset-softwhite, glass ->
  library:preset-glass (flipped preset-glass to FrontSide — DoubleSide poisons
  the WebGPU MRT pass; it's the only glass we use).
- Catalog: add flat (non-PBR) 'metal-chrome' + 'metal-brass'; drop metal
  metalness 1 -> 0.6 so metals are lit by existing lights (no env needed).
- World-scale UVs (1 unit = 1m) on door/window box meshes via shared box-uv.ts,
  so finishes tile at real-world scale instead of stretching.
- PaintResolveArgs gains an optional  for subtree re-raycasting.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Wassim SAMAD
2026-06-17 14:01:37 -04:00
co-authored by Claude Opus 4.8
parent c3bd065f2f
commit 8aa179e9cb
11 changed files with 544 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/viewer/src/lib/box-uv.ts
+40
View File
@@ -0,0 +1,40 @@
import type { BoxGeometry } from 'three'
/**
* Rewrite a default `BoxGeometry`'s UVs to world scale — 1 UV unit = 1 metre —
* so tiled finishes (with `repeat` in tiles-per-metre) render at a consistent
* real-world scale instead of stretching to fit each face. Matches the
* world-scale UV convention used by the procedural slab/wall geometry.
*
* three.js builds box faces in the fixed order [+X, -X, +Y, -Y, +Z, -Z], four
* verts each, with UVs spanning 0→1 across the face. Each face's two in-plane
* dimensions differ, so we scale U/V per face by that face's size in metres.
*/
export function applyWorldScaleBoxUVs(
geometry: BoxGeometry,
w: number,
h: number,
d: number,
): void {
const uv = geometry.getAttribute('uv')
if (!uv || uv.count < 24) return // non-default segmentation — leave as-is
// [uScaleMetres, vScaleMetres] per face, in three's face order.
const faceScale: Array<[number, number]> = [
[d, h], // +X
[d, h], // -X
[w, d], // +Y
[w, d], // -Y
[w, h], // +Z
[w, h], // -Z
]
for (let face = 0; face < 6; face += 1) {
const [us, vs] = faceScale[face]!
for (let v = 0; v < 4; v += 1) {
const i = face * 4 + v
uv.setXY(i, uv.getX(i) * us, uv.getY(i) * vs)
}
}
uv.needsUpdate = true
}
packages/viewer/src/systems/door/door-system.tsx
+221 -72
View File
@@ -15,8 +15,10 @@ import {
import { useFrame } from '@react-three/fiber'
import { useEffect, useRef } from 'react'
import * as THREE from 'three'
import { applyWorldScaleBoxUVs } from '../../lib/box-uv'
import {
type ColorPreset,
createDefaultMaterial,
createSurfaceRoleMaterial,
glassMaterial as defaultGlassMaterial,
baseMaterial as getBaseMaterial,
@@ -27,12 +29,24 @@ import useViewer from '../../store/use-viewer'
// Invisible material for root mesh — used as selection hitbox only
const hitboxMaterial = new THREE.MeshBasicMaterial({ visible: false })
// Disables a mesh's own raycast so its children become the hit targets.
const noopHitboxRaycast: THREE.Mesh['raycast'] = () => {}
const defaultRevealMaterial = new THREE.MeshBasicMaterial({ color: '#7f766c' })
// Door hardware (handle / hinges / closer / panic bar) renders a catalog metal
// finish by default (chrome), separate from the door body. The flat material is
// only a fallback if the catalog ref ever fails to resolve.
const HARDWARE_DEFAULT_REF = 'library:metal-chrome'
// Door body defaults to a catalog colour (generic approach). Glass keeps the
// built-in FrontSide glass material — the catalog `preset-glass` is DoubleSide,
// which poisons the WebGPU MRT scene pass.
const PANEL_DEFAULT_REF = 'library:preset-softwhite'
const FRAME_DEFAULT_REF = 'library:preset-softwhite'
const GLASS_DEFAULT_REF = 'library:preset-glass'
const defaultHardwareMaterial = createDefaultMaterial('#3a3a3a', 0.4)
let baseMaterial = getBaseMaterial()
let frameMaterial: THREE.Material = getBaseMaterial()
let revealMaterial: THREE.Material = defaultRevealMaterial
let glassMaterial: THREE.Material = defaultGlassMaterial
let hardwareMaterial: THREE.Material = defaultHardwareMaterial
let currentDoorSlot: string | undefined
// Per-frame viewer state, captured so the per-node mesh builder (which runs
// outside React) can resolve each door's slot materials.
let currentShading: RenderShading = 'rendered'
@@ -73,8 +87,10 @@ export const DoorSystem = () => {
const joineryMaterial = createSurfaceRoleMaterial('joinery', colorPreset)
baseMaterial = textures ? getBaseMaterial(shading) : joineryMaterial
frameMaterial = textures ? getBaseMaterial(shading) : joineryMaterial
revealMaterial = textures ? defaultRevealMaterial : joineryMaterial
glassMaterial = textures ? defaultGlassMaterial : joineryMaterial
hardwareMaterial = textures ? defaultHardwareMaterial : joineryMaterial
useEffect(() => {
const materialRevision = `${shading}:${textures ? 'textures' : 'solid'}:${colorPreset}`
@@ -104,8 +120,10 @@ export const DoorSystem = () => {
if (dirtyNodes.size === 0) return
const frameJoineryMaterial = createSurfaceRoleMaterial('joinery', colorPreset)
baseMaterial = textures ? getBaseMaterial(shading) : frameJoineryMaterial
frameMaterial = textures ? getBaseMaterial(shading) : frameJoineryMaterial
revealMaterial = textures ? defaultRevealMaterial : frameJoineryMaterial
glassMaterial = textures ? defaultGlassMaterial : frameJoineryMaterial
hardwareMaterial = textures ? defaultHardwareMaterial : frameJoineryMaterial
currentShading = shading
currentTextures = textures
currentColorPreset = colorPreset
@@ -163,12 +181,8 @@ export const DoorSystem = () => {
return null
}
// A door exposes two slots: `panel` (the door body — frame casing + leaf, all
// built with `baseMaterial`) and `glass`. The reveal (opening depth) is left on
// its own material and isn't painted. Tag each mesh by which material it got.
function tagDoorSlot(mesh: THREE.Mesh): THREE.Mesh {
if (mesh.material === glassMaterial) mesh.userData.slotId = 'glass'
else if (mesh.material === baseMaterial) mesh.userData.slotId = 'panel'
mesh.userData.slotId = currentDoorSlot
return mesh
}
@@ -181,15 +195,38 @@ function nodeReferencesSceneMaterial(node: { slots?: Record<string, string> }):
return false
}
function doorSlotDefault(slotId: 'panel' | 'glass'): THREE.Material {
type DoorMaterialSlotId = 'panel' | 'frame' | 'glass' | 'hardware'
function doorSlotDefault(slotId: DoorMaterialSlotId): THREE.Material {
if (!currentTextures) return createSurfaceRoleMaterial('joinery', currentColorPreset)
return slotId === 'glass' ? defaultGlassMaterial : getBaseMaterial(currentShading)
if (slotId === 'glass') {
return (
resolveMaterialRef(GLASS_DEFAULT_REF, currentSceneMaterials, currentShading) ??
defaultGlassMaterial
)
}
if (slotId === 'hardware') {
return (
resolveMaterialRef(HARDWARE_DEFAULT_REF, currentSceneMaterials, currentShading) ??
defaultHardwareMaterial
)
}
if (slotId === 'frame') {
return (
resolveMaterialRef(FRAME_DEFAULT_REF, currentSceneMaterials, currentShading) ??
getBaseMaterial(currentShading)
)
}
return (
resolveMaterialRef(PANEL_DEFAULT_REF, currentSceneMaterials, currentShading) ??
getBaseMaterial(currentShading)
)
}
// Resolve a door's slot to a material: the `node.slots` override (colored mode
// only) → the body/glass default. Textures-off ignores overrides — the
// only) → the body/glass/hardware default. Textures-off ignores overrides — the
// monochrome escape hatch.
function resolveDoorSlotMaterial(node: DoorNode, slotId: 'panel' | 'glass'): THREE.Material {
function resolveDoorSlotMaterial(node: DoorNode, slotId: DoorMaterialSlotId): THREE.Material {
const fallback = doorSlotDefault(slotId)
if (!currentTextures) return fallback
const ref = node.slots?.[slotId]
@@ -207,7 +244,9 @@ function addBox(
y: number,
z: number,
) {
const m = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), material)
const geometry = new THREE.BoxGeometry(w, h, d)
applyWorldScaleBoxUVs(geometry, w, h, d)
const m = new THREE.Mesh(geometry, material)
m.position.set(x, y, z)
tagDoorSlot(m)
parent.add(m)
@@ -224,7 +263,9 @@ function addRotatedBox(
z: number,
rotationY: number,
) {
const m = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), material)
const geometry = new THREE.BoxGeometry(w, h, d)
applyWorldScaleBoxUVs(geometry, w, h, d)
const m = new THREE.Mesh(geometry, material)
m.position.set(x, y, z)
m.rotation.y = rotationY
tagDoorSlot(m)
@@ -242,7 +283,9 @@ function addBoxWithRotation(
z: number,
rotation: [number, number, number],
) {
const m = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), material)
const geometry = new THREE.BoxGeometry(w, h, d)
applyWorldScaleBoxUVs(geometry, w, h, d)
const m = new THREE.Mesh(geometry, material)
m.position.set(x, y, z)
m.rotation.set(rotation[0], rotation[1], rotation[2])
tagDoorSlot(m)
@@ -825,6 +868,7 @@ function addLeafSegmentContent({
const cpX = contentPadding[0]
const cpY = contentPadding[1]
if (renderPerimeterFrame && shouldRenderFrame && cpY > 0) {
currentDoorSlot = 'panel'
addLeafBox(
baseMaterial,
leafWidth,
@@ -846,6 +890,7 @@ function addLeafSegmentContent({
}
if (renderPerimeterFrame && shouldRenderFrame && cpX > 0) {
const innerH = leafHeight - 2 * cpY
currentDoorSlot = 'panel'
addLeafBox(
baseMaterial,
cpX,
@@ -925,6 +970,7 @@ function addLeafSegmentContent({
if (seg.type !== 'empty') {
cx = leafCenterX - contentW / 2
currentDoorSlot = 'panel'
for (let c = 0; c < numCols - 1; c++) {
cx += colWidths[c]!
const dividerLeft = cx
@@ -962,6 +1008,7 @@ function addLeafSegmentContent({
const colX = colXCenters[c]!
if (seg.type === 'glass') {
currentDoorSlot = 'glass'
const glassDepth = Math.max(0.004, leafDepth * 0.15)
const segmentLeft = colX - colW / 2
const segmentRight = colX + colW / 2
@@ -982,6 +1029,7 @@ function addLeafSegmentContent({
addLeafBox(glassMaterial, colW, segH, glassDepth, colX, segCenterY, 0)
}
} else if (seg.type === 'panel') {
currentDoorSlot = 'panel'
const segmentLeft = colX - colW / 2
const segmentRight = colX + colW / 2
const outerPanelShape =
@@ -1119,6 +1167,7 @@ function addDoorLeaf(
const usesShapedLeafFrame = openingShape === 'rounded' || openingShape === 'arch'
if (usesShapedLeafFrame && hasLeafContent) {
currentDoorSlot = 'panel'
if (openingShape === 'rounded') {
const roundedLeafShape = roundedBoundary
? createRoundedClippedLeafFrameShape(
@@ -1209,6 +1258,7 @@ function addDoorLeaf(
})
if (hasLeafContent && handle) {
currentDoorSlot = 'hardware'
const handleY = handleHeight - doorHeight / 2
const faceZ = leafDepth / 2
const handleX =
@@ -1216,20 +1266,21 @@ function addDoorLeaf(
? leafCenterX + leafWidth / 2 - 0.045
: leafCenterX - leafWidth / 2 + 0.045
addLeafBox(baseMaterial, 0.028, 0.14, 0.01, handleX, handleY, faceZ + 0.005)
addLeafBox(baseMaterial, 0.022, 0.1, 0.035, handleX, handleY, faceZ + 0.025)
addLeafBox(hardwareMaterial, 0.028, 0.14, 0.01, handleX, handleY, faceZ + 0.005)
addLeafBox(hardwareMaterial, 0.022, 0.1, 0.035, handleX, handleY, faceZ + 0.025)
if (handleBothSides) {
addLeafBox(baseMaterial, 0.028, 0.14, 0.01, handleX, handleY, -faceZ - 0.005)
addLeafBox(baseMaterial, 0.022, 0.1, 0.035, handleX, handleY, -faceZ - 0.025)
addLeafBox(hardwareMaterial, 0.028, 0.14, 0.01, handleX, handleY, -faceZ - 0.005)
addLeafBox(hardwareMaterial, 0.022, 0.1, 0.035, handleX, handleY, -faceZ - 0.025)
}
}
if (hasLeafContent && doorCloser) {
currentDoorSlot = 'hardware'
const closerY = leafCenterY + leafHeight / 2 - 0.04
addLeafBox(baseMaterial, 0.28, 0.055, 0.055, leafCenterX, closerY, leafDepth / 2 + 0.03)
addLeafBox(hardwareMaterial, 0.28, 0.055, 0.055, leafCenterX, closerY, leafDepth / 2 + 0.03)
addLeafBox(
baseMaterial,
hardwareMaterial,
0.14,
0.015,
0.015,
@@ -1240,18 +1291,37 @@ function addDoorLeaf(
}
if (hasLeafContent && panicBar) {
currentDoorSlot = 'hardware'
const barY = panicBarHeight - doorHeight / 2
addLeafBox(baseMaterial, leafWidth * 0.72, 0.04, 0.055, leafCenterX, barY, leafDepth / 2 + 0.03)
addLeafBox(
hardwareMaterial,
leafWidth * 0.72,
0.04,
0.055,
leafCenterX,
barY,
leafDepth / 2 + 0.03,
)
}
if (hasLeafContent) {
currentDoorSlot = 'hardware'
const hingeMarkerX = hingeSide === 'right' ? hingeX - 0.012 : hingeX + 0.012
const hingeH = 0.1
const hingeW = 0.024
const hingeD = leafDepth + 0.016
addBox(mesh, baseMaterial, hingeW, hingeH, hingeD, hingeMarkerX, leafBottom + 0.25, 0)
addBox(mesh, baseMaterial, hingeW, hingeH, hingeD, hingeMarkerX, (leafBottom + leafTop) / 2, 0)
addBox(mesh, baseMaterial, hingeW, hingeH, hingeD, hingeMarkerX, leafTop - 0.25, 0)
addBox(mesh, hardwareMaterial, hingeW, hingeH, hingeD, hingeMarkerX, leafBottom + 0.25, 0)
addBox(
mesh,
hardwareMaterial,
hingeW,
hingeH,
hingeD,
hingeMarkerX,
(leafBottom + leafTop) / 2,
0,
)
addBox(mesh, hardwareMaterial, hingeW, hingeH, hingeD, hingeMarkerX, leafTop - 0.25, 0)
}
}
@@ -1290,9 +1360,10 @@ function addFoldingDoor(
const panelLength = insideWidth / panelCount
const foldAngle = Math.PI * 0.44 * foldAmount
currentDoorSlot = 'hardware'
addBox(
mesh,
baseMaterial,
hardwareMaterial,
insideWidth,
Math.min(frameThickness * 0.5, 0.025),
Math.max(frameDepth * 0.45, 0.035),
@@ -1312,6 +1383,7 @@ function addFoldingDoor(
})
}
currentDoorSlot = undefined
for (let index = 0; index < panelCount; index++) {
const start = vertices[index]!
const end = vertices[index + 1]!
@@ -1359,6 +1431,7 @@ function addFoldingDoor(
keepFrameWhenEmpty: true,
})
currentDoorSlot = undefined
for (const point of [start, end]) {
addBox(
mesh,
@@ -1375,9 +1448,10 @@ function addFoldingDoor(
const handlePoint = vertices[vertices.length - 1]!
const handleY = handleHeight - doorHeight / 2
currentDoorSlot = 'hardware'
addBox(
mesh,
baseMaterial,
hardwareMaterial,
0.035,
0.16,
leafDepth + 0.035,
@@ -1387,7 +1461,7 @@ function addFoldingDoor(
)
addBox(
mesh,
baseMaterial,
hardwareMaterial,
0.035,
0.16,
leafDepth + 0.035,
@@ -1436,9 +1510,10 @@ function addPocketDoor(
const handleY = handleHeight - doorHeight / 2
const handleX = leafCenterX - slideSign * (leafWidth / 2 - 0.055)
currentDoorSlot = 'hardware'
addBox(
mesh,
baseMaterial,
hardwareMaterial,
insideWidth * 2,
Math.min(frameThickness * 0.45, 0.024),
Math.max(frameDepth * 0.38, 0.03),
@@ -1446,6 +1521,7 @@ function addPocketDoor(
topY - 0.018,
0,
)
currentDoorSlot = undefined
addBox(
mesh,
revealMaterial,
@@ -1487,8 +1563,27 @@ function addPocketDoor(
segments,
contentPadding,
})
addBox(mesh, baseMaterial, 0.03, 0.18, leafDepth + 0.03, handleX, handleY, leafDepth / 2 + 0.02)
addBox(mesh, baseMaterial, 0.03, 0.18, leafDepth + 0.03, handleX, handleY, -leafDepth / 2 - 0.02)
currentDoorSlot = 'hardware'
addBox(
mesh,
hardwareMaterial,
0.03,
0.18,
leafDepth + 0.03,
handleX,
handleY,
leafDepth / 2 + 0.02,
)
addBox(
mesh,
hardwareMaterial,
0.03,
0.18,
leafDepth + 0.03,
handleX,
handleY,
-leafDepth / 2 - 0.02,
)
}
function addBarnDoor(
@@ -1533,9 +1628,10 @@ function addBarnDoor(
const handleX = leafCenterX - slideSign * (leafWidth / 2 - 0.075)
const wheelY = trackY - 0.075
addBox(mesh, revealMaterial, railLength, 0.035, 0.035, railCenterX, trackY, faceZ + 0.01)
addBox(mesh, revealMaterial, 0.05, 0.13, 0.035, -insideWidth / 2, trackY - 0.02, faceZ + 0.01)
addBox(mesh, revealMaterial, 0.05, 0.13, 0.035, insideWidth / 2, trackY - 0.02, faceZ + 0.01)
currentDoorSlot = 'hardware'
addBox(mesh, hardwareMaterial, railLength, 0.035, 0.035, railCenterX, trackY, faceZ + 0.01)
addBox(mesh, hardwareMaterial, 0.05, 0.13, 0.035, -insideWidth / 2, trackY - 0.02, faceZ + 0.01)
addBox(mesh, hardwareMaterial, 0.05, 0.13, 0.035, insideWidth / 2, trackY - 0.02, faceZ + 0.01)
const addBarnLeafBox = (
material: THREE.Material,
@@ -1559,6 +1655,7 @@ function addBarnDoor(
keepFrameWhenEmpty: true,
})
currentDoorSlot = undefined
addRotatedBox(
mesh,
revealMaterial,
@@ -1582,11 +1679,12 @@ function addBarnDoor(
0.52,
)
currentDoorSlot = 'hardware'
for (const offset of [-leafWidth * 0.28, leafWidth * 0.28]) {
addBox(mesh, revealMaterial, 0.085, 0.085, 0.035, leafCenterX + offset, wheelY, faceZ + 0.022)
addBox(mesh, hardwareMaterial, 0.085, 0.085, 0.035, leafCenterX + offset, wheelY, faceZ + 0.022)
addBox(
mesh,
revealMaterial,
hardwareMaterial,
0.026,
0.16,
0.026,
@@ -1596,9 +1694,10 @@ function addBarnDoor(
)
}
currentDoorSlot = 'hardware'
addBox(
mesh,
baseMaterial,
hardwareMaterial,
0.032,
0.22,
leafDepth + 0.034,
@@ -1608,7 +1707,7 @@ function addBarnDoor(
)
addBox(
mesh,
baseMaterial,
hardwareMaterial,
0.032,
0.22,
leafDepth + 0.034,
@@ -1663,10 +1762,20 @@ function addSlidingDoor(
const handleY = handleHeight - doorHeight / 2
const handleX = activeX + activeSign * (panelWidth / 2 - 0.06)
addBox(mesh, revealMaterial, insideWidth, 0.024, Math.max(frameDepth * 0.32, 0.026), 0, railY, 0)
currentDoorSlot = 'hardware'
addBox(
mesh,
revealMaterial,
hardwareMaterial,
insideWidth,
0.024,
Math.max(frameDepth * 0.32, 0.026),
0,
railY,
0,
)
addBox(
mesh,
hardwareMaterial,
insideWidth,
0.018,
Math.max(frameDepth * 0.28, 0.022),
@@ -1717,8 +1826,27 @@ function addSlidingDoor(
contentPadding,
keepFrameWhenEmpty: true,
})
addBox(mesh, baseMaterial, 0.032, 0.24, 0.016, handleX, handleY, frontZ + leafDepth / 2 + 0.01)
addBox(mesh, baseMaterial, 0.032, 0.24, 0.016, handleX, handleY, frontZ - leafDepth / 2 - 0.01)
currentDoorSlot = 'hardware'
addBox(
mesh,
hardwareMaterial,
0.032,
0.24,
0.016,
handleX,
handleY,
frontZ + leafDepth / 2 + 0.01,
)
addBox(
mesh,
hardwareMaterial,
0.032,
0.24,
0.016,
handleX,
handleY,
frontZ - leafDepth / 2 - 0.01,
)
}
function addGarageSectionalDoor(
@@ -1755,9 +1883,10 @@ function addGarageSectionalDoor(
const railY = leafCenterY + leafHeight / 2 - 0.04
const railZ = -travelDepth / 2
currentDoorSlot = 'hardware'
addBox(
mesh,
revealMaterial,
hardwareMaterial,
0.035,
Math.max(0.04, frameThickness * 0.75),
travelDepth,
@@ -1767,7 +1896,7 @@ function addGarageSectionalDoor(
)
addBox(
mesh,
revealMaterial,
hardwareMaterial,
0.035,
Math.max(0.04, frameThickness * 0.75),
travelDepth,
@@ -1798,6 +1927,7 @@ function addGarageSectionalDoor(
const trimDepth = 0.01
const trimFaceOffset = leafDepth / 2 + trimDepth + 0.006
const addSectionalTrim = (localY: number) => {
currentDoorSlot = undefined
addBoxWithRotation(
mesh,
revealMaterial,
@@ -1811,6 +1941,7 @@ function addGarageSectionalDoor(
)
}
currentDoorSlot = 'panel'
addBoxWithRotation(
mesh,
baseMaterial,
@@ -1826,7 +1957,8 @@ function addGarageSectionalDoor(
addSectionalTrim(-revealOffset)
}
addBox(mesh, revealMaterial, insideWidth, 0.032, Math.max(frameDepth * 0.36, 0.03), 0, railY, 0)
currentDoorSlot = 'hardware'
addBox(mesh, hardwareMaterial, insideWidth, 0.032, Math.max(frameDepth * 0.36, 0.03), 0, railY, 0)
}
function addGarageRollupDoor(
@@ -1859,9 +1991,10 @@ function addGarageRollupDoor(
const drumY = topY + drumMaxRadius * 0.12
const drumZ = -frameDepth / 2 - drumMaxRadius * 0.72
currentDoorSlot = 'hardware'
addBox(
mesh,
revealMaterial,
hardwareMaterial,
0.032,
leafHeight,
Math.max(frameDepth * 0.48, 0.035),
@@ -1871,7 +2004,7 @@ function addGarageRollupDoor(
)
addBox(
mesh,
revealMaterial,
hardwareMaterial,
0.032,
leafHeight,
Math.max(frameDepth * 0.48, 0.035),
@@ -1881,8 +2014,10 @@ function addGarageRollupDoor(
)
if (visibleHeight > 0.01) {
currentDoorSlot = 'panel'
addBox(mesh, baseMaterial, insideWidth, visibleHeight, leafDepth, 0, curtainCenterY, 0)
currentDoorSlot = undefined
for (let index = 0; index < visibleSlatCount; index++) {
const y = topY - Math.min(visibleHeight, index * slatHeight)
addBox(mesh, revealMaterial, insideWidth - 0.08, 0.01, 0.012, 0, y, leafDepth / 2 + 0.012)
@@ -1900,17 +2035,20 @@ function addGarageRollupDoor(
)
}
currentDoorSlot = 'panel'
const drum = new THREE.Mesh(
new THREE.CylinderGeometry(drumMaxRadius, drumMaxRadius, insideWidth + frameThickness, 36),
baseMaterial,
)
drum.position.set(0, drumY, drumZ)
drum.rotation.z = Math.PI / 2
tagDoorSlot(drum)
mesh.add(drum)
currentDoorSlot = 'hardware'
addBox(
mesh,
revealMaterial,
hardwareMaterial,
insideWidth + frameThickness,
0.026,
Math.max(frameDepth * 0.52, 0.04),
@@ -1949,9 +2087,10 @@ function addGarageTiltupDoor(
const railY = hingeY - frameThickness * 0.35
const railZ = -railLength / 2
currentDoorSlot = 'hardware'
addBox(
mesh,
revealMaterial,
hardwareMaterial,
0.03,
Math.max(frameThickness * 0.7, 0.035),
railLength,
@@ -1961,7 +2100,7 @@ function addGarageTiltupDoor(
)
addBox(
mesh,
revealMaterial,
hardwareMaterial,
0.03,
Math.max(frameThickness * 0.7, 0.035),
railLength,
@@ -1970,6 +2109,7 @@ function addGarageTiltupDoor(
railZ,
)
currentDoorSlot = 'panel'
addBoxWithRotation(
mesh,
baseMaterial,
@@ -1987,6 +2127,7 @@ function addGarageTiltupDoor(
const trimDepth = 0.012
const trimFaceOffset = leafDepth / 2 + trimDepth + 0.006
const addTiltupTrim = (localX: number, localY: number, trimWidth: number, trimHeight: number) => {
currentDoorSlot = undefined
addBoxWithRotation(
mesh,
revealMaterial,
@@ -2005,7 +2146,17 @@ function addGarageTiltupDoor(
addTiltupTrim(-insetWidth / 2, 0, 0.018, insetHeight)
addTiltupTrim(insetWidth / 2, 0, 0.018, insetHeight)
addBox(mesh, revealMaterial, insideWidth, 0.026, Math.max(frameDepth * 0.4, 0.035), 0, hingeY, 0)
currentDoorSlot = 'hardware'
addBox(
mesh,
hardwareMaterial,
insideWidth,
0.026,
Math.max(frameDepth * 0.4, 0.035),
0,
hingeY,
0,
)
}
function getEffectiveOpeningShape(node: DoorNode): DoorNode['openingShape'] {
@@ -2019,15 +2170,12 @@ function getEffectiveOpeningShape(node: DoorNode): DoorNode['openingShape'] {
function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
const node = normalizeDoorNodeForRender(rawNode)
currentDoorSlot = undefined
// Root mesh is an invisible hitbox; all visuals live in child meshes
mesh.geometry.dispose()
mesh.geometry = new THREE.BoxGeometry(node.width, node.height, node.frameDepth)
mesh.material = hitboxMaterial
// Default (selectable) hitbox raycast — restored each build; the visual path
// below disables it so the tagged panel/glass children are the hit targets
// (otherwise the full-depth invisible box intercepts every paint/hover ray).
mesh.raycast = THREE.Mesh.prototype.raycast
// Sync transform from node (React may lag behind the system by a frame during drag)
mesh.position.set(node.position[0], node.position[1], node.position[2])
@@ -2040,11 +2188,13 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
mesh.remove(child)
}
// Point the builder-facing body/glass materials at this door's slot overrides
// for the duration of its build (recomputed per node, so the next door resets
// cleanly without a restore). Reveal keeps its own material.
// Point the builder-facing materials at this door's slot overrides for the
// duration of its build (recomputed per node, so the next door resets cleanly
// without a restore). Reveal keeps its own material.
baseMaterial = resolveDoorSlotMaterial(node, 'panel')
frameMaterial = resolveDoorSlotMaterial(node, 'frame')
glassMaterial = resolveDoorSlotMaterial(node, 'glass')
hardwareMaterial = resolveDoorSlotMaterial(node, 'hardware')
const {
width,
@@ -2083,9 +2233,6 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
return
}
// Visuals exist: let the tagged children receive paint/hover/selection rays.
mesh.raycast = noopHitboxRaycast
const insideWidth = width - 2 * frameThickness
const leafH = height - frameThickness // only top frame
const leafDepth = 0.04
@@ -2093,6 +2240,7 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
const swingDirectionSign = swingDirection === 'inward' ? 1 : -1
// ── Frame members ──
currentDoorSlot = 'frame'
if (openingShape === 'arch') {
const frameBottom = -height / 2
const frameTop = height / 2
@@ -2106,7 +2254,7 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
addBox(
mesh,
baseMaterial,
frameMaterial,
frameThickness,
postHeight,
frameDepth,
@@ -2116,7 +2264,7 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
)
addBox(
mesh,
baseMaterial,
frameMaterial,
frameThickness,
postHeight,
frameDepth,
@@ -2126,7 +2274,7 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
)
addShape(
mesh,
baseMaterial,
frameMaterial,
useShallowHeadBar
? createArchHeadBarShape(width, frameHeadBottomY, frameSpringY, frameTop)
: createArchBandShape(
@@ -2142,7 +2290,7 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
} else if (openingShape === 'rounded') {
addShape(
mesh,
baseMaterial,
frameMaterial,
createRoundedDoorFrameShape(
width,
height,
@@ -2155,7 +2303,7 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
// Left post — full height
addBox(
mesh,
baseMaterial,
frameMaterial,
frameThickness,
height,
frameDepth,
@@ -2166,7 +2314,7 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
// Right post — full height
addBox(
mesh,
baseMaterial,
frameMaterial,
frameThickness,
height,
frameDepth,
@@ -2177,7 +2325,7 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
// Head (top bar) — full width
addBox(
mesh,
baseMaterial,
frameMaterial,
width,
frameThickness,
frameDepth,
@@ -2189,9 +2337,10 @@ function updateDoorMesh(rawNode: DoorNode, mesh: THREE.Mesh) {
// ── Threshold (inside the frame) ──
if (threshold) {
currentDoorSlot = 'frame'
addBox(
mesh,
baseMaterial,
frameMaterial,
insideWidth,
thresholdHeight,
frameDepth,
@@ -2412,10 +2561,10 @@ function syncDoorCutout(node: DoorNode, mesh: THREE.Mesh) {
if (!cutout) {
cutout = new THREE.Mesh()
cutout.name = 'cutout'
// The cutout is a 1m-deep CSG helper for the wall hole — never interactive.
// three.js raycasts invisible meshes, so without this its front face (0.5m
// proud of the door) intercepts every paint/hover ray.
cutout.raycast = noopHitboxRaycast
// The cutout (a 1m-deep CSG helper, invisible) is proud of the wall, so it
// wins the scene raycast over the wall in front of the recessed door body —
// making it the selection AND paint hit target for the whole opening. The
// paint capability then re-raycasts the door's parts to find the slot.
mesh.add(cutout)
}
cutout.geometry.dispose()
packages/viewer/src/systems/window/window-system.tsx
+129 -27
View File
@@ -12,6 +12,7 @@ import {
import { useFrame } from '@react-three/fiber'
import { useEffect, useRef } from 'react'
import * as THREE from 'three'
import { applyWorldScaleBoxUVs } from '../../lib/box-uv'
import {
type ColorPreset,
createSurfaceRoleMaterial,
@@ -24,10 +25,9 @@ import useViewer from '../../store/use-viewer'
// Invisible material for root mesh — used as selection hitbox only
const hitboxMaterial = new THREE.MeshBasicMaterial({ visible: false })
// Disables a mesh's own raycast so its children become the hit targets.
const noopHitboxRaycast: THREE.Mesh['raycast'] = () => {}
let baseMaterial = getBaseMaterial()
let glassMaterial: THREE.Material = defaultGlassMaterial
let currentWindowSlot: string | undefined
// Per-frame viewer state, captured so the per-node mesh builder (which runs
// outside React) can resolve each window's slot materials.
let currentShading: RenderShading = 'rendered'
@@ -158,12 +158,8 @@ export const WindowSystem = () => {
return null
}
// A window exposes two slots: `frame` (every joinery member) and `glass`. The
// builders pass `baseMaterial` / `glassMaterial`, so tag each mesh by which one
// it got — that's what `(nodeId, slotId)` paint resolves against.
function tagWindowSlot(mesh: THREE.Mesh): THREE.Mesh {
if (mesh.material === glassMaterial) mesh.userData.slotId = 'glass'
else if (mesh.material === baseMaterial) mesh.userData.slotId = 'frame'
mesh.userData.slotId = currentWindowSlot
return mesh
}
@@ -176,15 +172,25 @@ function nodeReferencesSceneMaterial(node: { slots?: Record<string, string> }):
return false
}
// Window frame/glass default to catalog finishes (generic approach). `preset-glass`
// is now FrontSide (it was the only glass we use), so it's safe for the WebGPU
// MRT scene pass.
const FRAME_DEFAULT_REF = 'library:preset-softwhite'
const GLASS_DEFAULT_REF = 'library:preset-glass'
function windowSlotDefault(slotId: 'frame' | 'glass'): THREE.Material {
if (slotId === 'glass') {
return currentTextures
? defaultGlassMaterial
: createSurfaceRoleMaterial('glazing', currentColorPreset)
if (!currentTextures) return createSurfaceRoleMaterial('glazing', currentColorPreset)
return (
resolveMaterialRef(GLASS_DEFAULT_REF, currentSceneMaterials, currentShading) ??
defaultGlassMaterial
)
}
return currentTextures
? getBaseMaterial(currentShading)
: createSurfaceRoleMaterial('joinery', currentColorPreset)
if (!currentTextures) return createSurfaceRoleMaterial('joinery', currentColorPreset)
return (
resolveMaterialRef(FRAME_DEFAULT_REF, currentSceneMaterials, currentShading) ??
getBaseMaterial(currentShading)
)
}
// Resolve a window's slot to a material: the `node.slots` override (colored mode
@@ -208,7 +214,9 @@ function addBox(
y: number,
z: number,
) {
const m = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), material)
const geometry = new THREE.BoxGeometry(w, h, d)
applyWorldScaleBoxUVs(geometry, w, h, d)
const m = new THREE.Mesh(geometry, material)
m.position.set(x, y, z)
tagWindowSlot(m)
parent.add(m)
@@ -565,6 +573,7 @@ function addRoundedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = innerTop - innerBottom
const innerRadii = insetCornerRadii(outerRadii, inset, innerW, innerH)
currentWindowSlot = 'frame'
addShape(
mesh,
baseMaterial,
@@ -574,6 +583,7 @@ function addRoundedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (innerW > 0.01 && innerH > 0.01) {
const glassDepth = Math.max(0.004, frameDepth * 0.08)
currentWindowSlot = 'glass'
addShape(
mesh,
glassMaterial,
@@ -591,6 +601,7 @@ function addRoundedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const rowHeights = rowRatios.map((r) => (r / rowSum) * usableH)
let x = innerLeft
currentWindowSlot = 'frame'
for (let c = 0; c < numCols - 1; c++) {
x += colWidths[c]!
const x1 = x
@@ -611,6 +622,7 @@ function addRoundedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
}
let y = innerTop
currentWindowSlot = 'frame'
for (let r = 0; r < numRows - 1; r++) {
y -= rowHeights[r]!
const yTop = y
@@ -637,6 +649,7 @@ function addRoundedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -678,10 +691,12 @@ function addArchedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerArchHeight = getClampedArchHeight(innerW, innerH, archHeight - inset)
const innerSpringY = innerTop - innerArchHeight
currentWindowSlot = 'frame'
addShape(mesh, baseMaterial, createArchedFrameShape(width, height, archHeight, inset), frameDepth)
if (innerW > 0.01 && innerH > 0.01) {
const glassDepth = Math.max(0.004, frameDepth * 0.08)
currentWindowSlot = 'glass'
addShape(
mesh,
glassMaterial,
@@ -700,6 +715,7 @@ function addArchedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerHalfWidth = innerW / 2
let x = innerLeft
currentWindowSlot = 'frame'
for (let c = 0; c < numCols - 1; c++) {
x += colWidths[c]!
const x1 = x
@@ -720,6 +736,7 @@ function addArchedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
}
let y = innerTop
currentWindowSlot = 'frame'
for (let r = 0; r < numRows - 1; r++) {
y -= rowHeights[r]!
const yTop = y
@@ -747,6 +764,7 @@ function addArchedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -786,6 +804,7 @@ function addSlidingWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = height - 2 * frameThickness
// Outer frame.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -848,6 +867,7 @@ function addSlidingWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
mesh.add(activePanel)
// Twin tracks signal the sliding operation without adding editor-only state.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -869,10 +889,12 @@ function addSlidingWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
0,
)
currentWindowSlot = 'glass'
addBox(activePanel, glassMaterial, panelWidth, panelH, glassDepth, 0, 0, 0)
addBox(mesh, glassMaterial, panelWidth, panelH, glassDepth, rightPanelX, 0, rightZ)
// The right sash stays fixed. The left sash is the active panel that slides across it.
currentWindowSlot = 'frame'
addBox(
activePanel,
baseMaterial,
@@ -918,6 +940,7 @@ function addSlidingWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -954,6 +977,7 @@ function addRectCasementSash(
sash.rotation.y = rotationY
parent.add(sash)
currentWindowSlot = 'frame'
addBox(
sash,
baseMaterial,
@@ -994,6 +1018,7 @@ function addRectCasementSash(
0,
0,
)
currentWindowSlot = 'glass'
addBox(sash, glassMaterial, glassW, glassH, glassDepth, sashCenterX, 0, sashDepth * 0.08)
}
@@ -1006,6 +1031,7 @@ function addFrenchCasementHingeMarkers(
) {
const markerW = Math.max(frameThickness * 0.38, 0.018)
const markerH = innerH * 0.24
currentWindowSlot = 'frame'
for (const pivotX of [-innerW / 2, innerW / 2]) {
addBox(
mesh,
@@ -1184,6 +1210,7 @@ function addShapedFrenchCasementSash(
const outerArchHeight = getClampedArchHeight(node.width, node.height, node.archHeight)
const sashArchHeight = getClampedArchHeight(fullW, leafH, outerArchHeight - frameThickness)
const sashSpringY = node.height / 2 - outerArchHeight
currentWindowSlot = 'frame'
addShape(
sashVisual,
baseMaterial,
@@ -1200,6 +1227,7 @@ function addShapedFrenchCasementSash(
)
const glassInset = Math.min(sashFrameThickness, leafW / 2 - 0.005, leafH / 2 - 0.005)
if (glassInset > 0.001) {
currentWindowSlot = 'glass'
addShape(
sashVisual,
glassMaterial,
@@ -1225,6 +1253,7 @@ function addShapedFrenchCasementSash(
fullW,
leafH,
)
currentWindowSlot = 'frame'
addShape(
sashVisual,
baseMaterial,
@@ -1233,6 +1262,7 @@ function addShapedFrenchCasementSash(
)
const glassInset = Math.min(sashFrameThickness, leafW / 2 - 0.005, leafH / 2 - 0.005)
if (glassInset > 0.001) {
currentWindowSlot = 'glass'
addShape(
sashVisual,
glassMaterial,
@@ -1249,6 +1279,7 @@ function addFrenchCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = height - 2 * frameThickness
// Fixed outer frame.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1321,6 +1352,7 @@ function addFrenchCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1340,6 +1372,7 @@ function addShapedCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = height - 2 * frameThickness
if (node.openingShape === 'arch') {
currentWindowSlot = 'frame'
addShape(
mesh,
baseMaterial,
@@ -1352,6 +1385,7 @@ function addShapedCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
frameDepth,
)
} else {
currentWindowSlot = 'frame'
addShape(
mesh,
baseMaterial,
@@ -1403,6 +1437,7 @@ function addShapedCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1443,6 +1478,7 @@ function addShapedCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
innerH,
(node.archHeight ?? innerW / 2) - frameThickness,
)
currentWindowSlot = 'frame'
addShape(
sashVisual,
baseMaterial,
@@ -1453,6 +1489,7 @@ function addShapedCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (glassInset > 0.001) {
const glassW = innerW - 2 * glassInset
const glassH = innerH - 2 * glassInset
currentWindowSlot = 'glass'
addShape(
sashVisual,
glassMaterial,
@@ -1469,6 +1506,7 @@ function addShapedCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
}
} else {
const outerRadii = getWindowRoundedRadii(node, innerW, innerH)
currentWindowSlot = 'frame'
addShape(
sashVisual,
baseMaterial,
@@ -1479,6 +1517,7 @@ function addShapedCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (glassInset > 0.001) {
const glassW = innerW - 2 * glassInset
const glassH = innerH - 2 * glassInset
currentWindowSlot = 'glass'
addShape(
sashVisual,
glassMaterial,
@@ -1495,6 +1534,7 @@ function addShapedCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
}
}
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1520,6 +1560,7 @@ function addShapedCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1550,6 +1591,7 @@ function addCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = height - 2 * frameThickness
// Fixed outer frame.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1610,6 +1652,7 @@ function addCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
sash.rotation.y = hingeSign * openAngle
mesh.add(sash)
currentWindowSlot = 'frame'
addBox(
sash,
baseMaterial,
@@ -1650,9 +1693,11 @@ function addCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
0,
0,
)
currentWindowSlot = 'glass'
addBox(sash, glassMaterial, glassW, glassH, glassDepth, sashCenterX, 0, sashDepth * 0.08)
// Small hinge markers make the pivot side legible when the sash is closed.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1678,6 +1723,7 @@ function addCasementWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1703,6 +1749,7 @@ function addAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = height - 2 * frameThickness
// Fixed outer frame.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1762,6 +1809,7 @@ function addAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
sash.rotation.x = -openAngle
mesh.add(sash)
currentWindowSlot = 'frame'
addBox(
sash,
baseMaterial,
@@ -1802,9 +1850,11 @@ function addAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
sashCenterY,
0,
)
currentWindowSlot = 'glass'
addBox(sash, glassMaterial, glassW, glassH, glassDepth, 0, sashCenterY, sashDepth * 0.08)
// Compact hinge rail, visible even when the sash is closed.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1820,6 +1870,7 @@ function addAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1839,6 +1890,7 @@ function addShapedAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = height - 2 * frameThickness
if (node.openingShape === 'arch') {
currentWindowSlot = 'frame'
addShape(
mesh,
baseMaterial,
@@ -1851,6 +1903,7 @@ function addShapedAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
frameDepth,
)
} else {
currentWindowSlot = 'frame'
addShape(
mesh,
baseMaterial,
@@ -1888,6 +1941,7 @@ function addShapedAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
innerH,
(node.archHeight ?? innerW / 2) - frameThickness,
)
currentWindowSlot = 'frame'
addShape(
sashVisual,
baseMaterial,
@@ -1898,6 +1952,7 @@ function addShapedAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (glassInset > 0.001) {
const glassW = innerW - 2 * glassInset
const glassH = innerH - 2 * glassInset
currentWindowSlot = 'glass'
addShape(
sashVisual,
glassMaterial,
@@ -1914,6 +1969,7 @@ function addShapedAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
}
} else {
const outerRadii = getWindowRoundedRadii(node, innerW, innerH)
currentWindowSlot = 'frame'
addShape(
sashVisual,
baseMaterial,
@@ -1924,6 +1980,7 @@ function addShapedAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (glassInset > 0.001) {
const glassW = innerW - 2 * glassInset
const glassH = innerH - 2 * glassInset
currentWindowSlot = 'glass'
addShape(
sashVisual,
glassMaterial,
@@ -1940,6 +1997,7 @@ function addShapedAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
}
}
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1955,6 +2013,7 @@ function addShapedAwningWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -1980,6 +2039,7 @@ function addHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = height - 2 * frameThickness
// Fixed outer frame.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2037,6 +2097,7 @@ function addHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
sash.rotation.x = -openAngle
mesh.add(sash)
currentWindowSlot = 'frame'
addBox(
sash,
baseMaterial,
@@ -2068,9 +2129,11 @@ function addHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
innerH / 2,
0,
)
currentWindowSlot = 'glass'
addBox(sash, glassMaterial, glassW, glassH, glassDepth, 0, innerH / 2, sashDepth * 0.08)
// Compact bottom hinge rail, visible even when the sash is closed.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2086,6 +2149,7 @@ function addHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2105,6 +2169,7 @@ function addShapedHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = height - 2 * frameThickness
if (node.openingShape === 'arch') {
currentWindowSlot = 'frame'
addShape(
mesh,
baseMaterial,
@@ -2117,6 +2182,7 @@ function addShapedHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
frameDepth,
)
} else {
currentWindowSlot = 'frame'
addShape(
mesh,
baseMaterial,
@@ -2153,6 +2219,7 @@ function addShapedHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
innerH,
(node.archHeight ?? innerW / 2) - frameThickness,
)
currentWindowSlot = 'frame'
addShape(
sashVisual,
baseMaterial,
@@ -2163,6 +2230,7 @@ function addShapedHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (glassInset > 0.001) {
const glassW = innerW - 2 * glassInset
const glassH = innerH - 2 * glassInset
currentWindowSlot = 'glass'
addShape(
sashVisual,
glassMaterial,
@@ -2179,6 +2247,7 @@ function addShapedHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
}
} else {
const outerRadii = getWindowRoundedRadii(node, innerW, innerH)
currentWindowSlot = 'frame'
addShape(
sashVisual,
baseMaterial,
@@ -2189,6 +2258,7 @@ function addShapedHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (glassInset > 0.001) {
const glassW = innerW - 2 * glassInset
const glassH = innerH - 2 * glassInset
currentWindowSlot = 'glass'
addShape(
sashVisual,
glassMaterial,
@@ -2205,6 +2275,7 @@ function addShapedHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
}
}
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2220,6 +2291,7 @@ function addShapedHopperWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2243,6 +2315,7 @@ function addHungSash(
glassW: number,
glassH: number,
) {
currentWindowSlot = 'frame'
addBox(
parent,
baseMaterial,
@@ -2283,6 +2356,7 @@ function addHungSash(
0,
0,
)
currentWindowSlot = 'glass'
addBox(parent, glassMaterial, glassW, glassH, glassDepth, 0, 0, 0)
}
@@ -2293,6 +2367,7 @@ function addSingleHungWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = height - 2 * frameThickness
// Fixed outer frame.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2357,6 +2432,7 @@ function addSingleHungWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
mesh.add(activeSash)
// Side tracks show the lower sash is the moving element.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2403,6 +2479,7 @@ function addSingleHungWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
)
// Meeting rails: top sash fixed, bottom sash moves upward over it.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2428,6 +2505,7 @@ function addSingleHungWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2448,6 +2526,7 @@ function addDoubleHungWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = height - 2 * frameThickness
// Fixed outer frame.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2516,6 +2595,7 @@ function addDoubleHungWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
mesh.add(bottomSash)
// Side tracks show both sashes move vertically.
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2559,6 +2639,7 @@ function addDoubleHungWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
)
// Opposing meeting rails: top sash descends while bottom sash rises.
currentWindowSlot = 'frame'
addBox(
topSash,
baseMaterial,
@@ -2584,6 +2665,7 @@ function addDoubleHungWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2602,6 +2684,7 @@ function addBayWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerW = width - 2 * frameThickness
const innerH = height - 2 * frameThickness
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2662,6 +2745,7 @@ function addBayWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const addBayPanel = (parent: THREE.Object3D, panelW: number) => {
const glassW = Math.max(panelW - 2 * sashFrameThickness, 0.01)
const glassH = Math.max(innerH - 2 * sashFrameThickness, 0.01)
currentWindowSlot = 'frame'
addBox(
parent,
baseMaterial,
@@ -2702,10 +2786,12 @@ function addBayWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
0,
0,
)
currentWindowSlot = 'glass'
addBox(parent, glassMaterial, glassW, glassH, glassDepth, 0, 0, panelDepth * 0.08)
}
const addBayCap = (centerY: number) => {
currentWindowSlot = 'frame'
const halfThickness = frameThickness / 2
const vertices: number[] = []
const indices: number[] = []
@@ -2760,7 +2846,7 @@ function addBayWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))
geometry.setIndex(indices)
geometry.computeVertexNormals()
mesh.add(new THREE.Mesh(geometry, baseMaterial))
mesh.add(tagWindowSlot(new THREE.Mesh(geometry, baseMaterial)))
}
const center = new THREE.Group()
@@ -2787,6 +2873,7 @@ function addBayWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2805,6 +2892,7 @@ function addBowWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerW = width - 2 * frameThickness
const innerH = height - 2 * frameThickness
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2931,15 +3019,19 @@ function addBowWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
}
const addCurvedMesh = (material: THREE.Material, geometry: THREE.BufferGeometry) => {
mesh.add(new THREE.Mesh(geometry, material))
mesh.add(tagWindowSlot(new THREE.Mesh(geometry, material)))
}
currentWindowSlot = 'frame'
addCurvedMesh(baseMaterial, createCurvedVerticalBand(glassTop, innerH / 2))
addCurvedMesh(baseMaterial, createCurvedVerticalBand(-innerH / 2, glassBottom))
currentWindowSlot = 'glass'
addCurvedMesh(glassMaterial, createCurvedVerticalBand(glassBottom, glassTop, frameDepth * 0.04))
currentWindowSlot = 'frame'
addCurvedMesh(baseMaterial, createCurvedCap(slabYTop, frameThickness))
addCurvedMesh(baseMaterial, createCurvedCap(slabYBottom, frameThickness))
currentWindowSlot = 'frame'
for (let index = 0; index <= mullionCount; index += 1) {
const x = -halfSpan + (innerW * index) / mullionCount
addBox(mesh, baseMaterial, sashFrameThickness, innerH, frameDepth * 0.72, x, 0, arcZAt(x))
@@ -2949,6 +3041,7 @@ function addBowWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -2973,6 +3066,7 @@ function addLouveredWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerW = width - 2 * frameThickness
const innerH = height - 2 * frameThickness
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -3027,6 +3121,7 @@ function addLouveredWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
slats.name = LOUVERED_WINDOW_SLATS_NAME
mesh.add(slats)
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -3048,6 +3143,7 @@ function addLouveredWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
0,
)
currentWindowSlot = 'glass'
for (let index = 0; index < slatCount; index += 1) {
const y = innerH / 2 - slatGap * (index + 0.5)
const slat = new THREE.Group()
@@ -3070,6 +3166,7 @@ function addLouveredWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -3097,6 +3194,7 @@ function addShapedLouveredWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
const innerH = innerTop - innerBottom
if (node.openingShape === 'arch') {
currentWindowSlot = 'frame'
addShape(
mesh,
baseMaterial,
@@ -3109,6 +3207,7 @@ function addShapedLouveredWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
frameDepth,
)
} else {
currentWindowSlot = 'frame'
addShape(
mesh,
baseMaterial,
@@ -3159,6 +3258,7 @@ function addShapedLouveredWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
})()
const addVerticalRail = (x: number) => {
currentWindowSlot = 'frame'
const railX1 = x
const railX2 = x + (x < 0 ? railThickness : -railThickness)
const sampleX = x < 0 ? Math.max(railX1, railX2) : Math.min(railX1, railX2)
@@ -3192,6 +3292,7 @@ function addShapedLouveredWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
addVerticalRail(innerLeft)
addVerticalRail(innerRight)
currentWindowSlot = 'glass'
for (let index = 0; index < slatCount; index += 1) {
const y = innerTop - slatGap * (index + 0.5)
const topBounds = getBoundsAtY(Math.min(y + slatHeight / 2, innerTop))
@@ -3212,6 +3313,7 @@ function addShapedLouveredWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
if (sill) {
const sillW = width + sillDepth * 0.4
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -3226,14 +3328,12 @@ function addShapedLouveredWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
}
function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
currentWindowSlot = undefined
// Root mesh is an invisible hitbox; all visuals live in child meshes
mesh.geometry.dispose()
mesh.geometry = new THREE.BoxGeometry(node.width, node.height, node.frameDepth)
mesh.material = hitboxMaterial
// Default (selectable) hitbox raycast — restored each build; the visual path
// below disables it so the tagged frame/glass children are the hit targets
// (otherwise the full-depth invisible box intercepts every paint/hover ray).
mesh.raycast = THREE.Mesh.prototype.raycast
// Sync transform from node (React may lag behind the system by a frame during drag)
mesh.position.set(node.position[0], node.position[1], node.position[2])
@@ -3274,9 +3374,6 @@ function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
return
}
// Visuals exist: let the tagged children receive paint/hover/selection rays.
mesh.raycast = noopHitboxRaycast
if (windowType === 'sliding') {
addSlidingWindowVisuals(node, mesh)
syncWindowCutout(node, mesh)
@@ -3348,6 +3445,7 @@ function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
// ── Frame members ──
// Top / bottom — full width
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -3422,6 +3520,7 @@ function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
// Column dividers — full inner height
cx = -innerW / 2
currentWindowSlot = 'frame'
for (let c = 0; c < numCols - 1; c++) {
cx += colWidths[c]!
addBox(
@@ -3439,6 +3538,7 @@ function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
// Row dividers — per column width, so they don't overlap column dividers (top to bottom)
cy = innerH / 2
currentWindowSlot = 'frame'
for (let r = 0; r < numRows - 1; r++) {
cy -= rowHeights[r]!
const divY = cy - rowDividerThickness / 2
@@ -3459,6 +3559,7 @@ function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
// Glass panes
const glassDepth = Math.max(0.004, frameDepth * 0.08)
currentWindowSlot = 'glass'
for (let c = 0; c < numCols; c++) {
for (let r = 0; r < numRows; r++) {
addBox(
@@ -3479,6 +3580,7 @@ function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
const sillW = width + sillDepth * 0.4 // slightly wider than frame
// Protrudes from the front face of the frame (+Z)
const sillZ = frameDepth / 2 + sillDepth / 2
currentWindowSlot = 'frame'
addBox(
mesh,
baseMaterial,
@@ -3500,10 +3602,10 @@ function syncWindowCutout(node: WindowNode, mesh: THREE.Mesh) {
if (!cutout) {
cutout = new THREE.Mesh()
cutout.name = 'cutout'
// The cutout is a 1m-deep CSG helper for the wall hole — never interactive.
// three.js raycasts invisible meshes, so without this its front face (0.5m
// proud of the glass) intercepts every paint/hover ray.
cutout.raycast = noopHitboxRaycast
// The cutout (a 1m-deep CSG helper, invisible) is proud of the wall, so it
// wins the scene raycast over the wall in front of the recessed window —
// making it the selection AND paint hit target for the whole opening. The
// paint capability then re-raycasts the window's parts to find the slot.
mesh.add(cutout)
}
cutout.geometry.dispose()