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

wall cutout

Browse Source
This commit is contained in:
wass08
2026-02-03 14:28:06 +09:00
parent b27f44d685
commit 30653b49c9
4 changed files with 181 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/editor/app/viewer/[id]/viewer-overlay.tsx
+33
View File
@@ -21,6 +21,7 @@ export const ViewerOverlay = () => {
const showGuides = useViewer((s) => s.showGuides)
const cameraMode = useViewer((s) => s.cameraMode)
const levelMode = useViewer((s) => s.levelMode)
const wallMode = useViewer((s) => s.wallMode)
const building = selection.buildingId ? (nodes[selection.buildingId] as BuildingNode | undefined) : null
const level = selection.levelId ? (nodes[selection.levelId] as LevelNode | undefined) : null
@@ -202,6 +203,38 @@ export const ViewerOverlay = () => {
Solo
</button>
</div>
{/* Wall Mode */}
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-sm border border-neutral-200">
<span className="text-xs text-neutral-500 px-2 pb-1">Wall Mode</span>
<button
onClick={() => useViewer.getState().setWallMode('cutaway')}
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
wallMode === 'cutaway' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
}`}
>
<img alt="Cutaway" height={16} src="/icons/wallcut.png" width={16} className="w-4 h-4" />
Cutaway
</button>
<button
onClick={() => useViewer.getState().setWallMode('up')}
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
wallMode === 'up' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
}`}
>
<img alt="Full Height" height={16} src="/icons/room.png" width={16} className="w-4 h-4" />
Full Height
</button>
<button
onClick={() => useViewer.getState().setWallMode('down')}
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
wallMode === 'down' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
}`}
>
<img alt="Low" height={16} src="/icons/walllow.png" width={16} className="w-4 h-4" />
Low
</button>
</div>
</div>
</>
)
apps/editor/components/ui/action-menu/view-toggles.tsx
+60
View File
@@ -18,11 +18,39 @@ const levelModeLabels: Record<'stacked' | 'exploded' | 'solo', string> = {
const levelModeOrder: ('stacked' | 'exploded' | 'solo')[] = ['stacked', 'exploded', 'solo']
type WallMode = 'up' | 'cutaway' | 'down'
const wallModeConfig: Record<
WallMode,
{ icon: React.FC<React.ComponentProps<'img'>>; label: string }
> = {
up: {
icon: (props) => (
<img alt="Full Height" height={20} src="/icons/room.png" width={20} {...props} />
),
label: 'Full Height',
},
cutaway: {
icon: (props) => (
<img alt="Cutaway" height={20} src="/icons/wallcut.png" width={20} {...props} />
),
label: 'Cutaway',
},
down: {
icon: (props) => <img alt="Low" height={20} src="/icons/walllow.png" width={20} {...props} />,
label: 'Low',
},
}
const wallModeOrder: WallMode[] = ['cutaway', 'up', 'down']
export function ViewToggles() {
const cameraMode = useViewer((state) => state.cameraMode)
const setCameraMode = useViewer((state) => state.setCameraMode)
const levelMode = useViewer((state) => state.levelMode)
const setLevelMode = useViewer((state) => state.setLevelMode)
const wallMode = useViewer((state) => state.wallMode)
const setWallMode = useViewer((state) => state.setWallMode)
const showScans = useViewer((state) => state.showScans)
const setShowScans = useViewer((state) => state.setShowScans)
const showGuides = useViewer((state) => state.showGuides)
@@ -43,6 +71,13 @@ export function ViewToggles() {
if (nextMode) setLevelMode(nextMode)
}
const cycleWallMode = () => {
const currentIndex = wallModeOrder.indexOf(wallMode)
const nextIndex = (currentIndex + 1) % wallModeOrder.length
const nextMode = wallModeOrder[nextIndex]
if (nextMode) setWallMode(nextMode)
}
return (
<div className="flex items-center gap-1">
{/* Camera Mode */}
@@ -91,6 +126,31 @@ export function ViewToggles() {
</TooltipContent>
</Tooltip>
{/* Wall Mode */}
<Tooltip>
<TooltipTrigger asChild>
<Button
className={cn(
'h-8 w-8 text-zinc-400 transition-all p-0',
wallMode !== 'cutaway'
? 'bg-emerald-500/20 text-emerald-400'
: 'hover:bg-zinc-800',
)}
onClick={cycleWallMode}
size="icon"
variant="ghost"
>
{(() => {
const Icon = wallModeConfig[wallMode].icon
return <Icon className="h-5 w-5" />
})()}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Walls: {wallModeConfig[wallMode].label}</p>
</TooltipContent>
</Tooltip>
{/* Show Scans */}
<Tooltip>
<TooltipTrigger asChild>
packages/viewer/src/store/use-viewer.ts
+23 -17
View File
@@ -24,32 +24,35 @@ type Outliner = {
};
type ViewerState = {
selection: SelectionPath;
hoveredId: AnyNode["id"] | ZoneNode["id"] | null;
setHoveredId: (id: AnyNode["id"] | ZoneNode["id"] | null) => void;
selection: SelectionPath
hoveredId: AnyNode['id'] | ZoneNode['id'] | null
setHoveredId: (id: AnyNode['id'] | ZoneNode['id'] | null) => void
cameraMode: "perspective" | "orthographic";
setCameraMode: (mode: "perspective" | "orthographic") => void;
cameraMode: 'perspective' | 'orthographic'
setCameraMode: (mode: 'perspective' | 'orthographic') => void
levelMode: "stacked" | "exploded" | "solo" | "manual";
setLevelMode: (mode: "stacked" | "exploded" | "solo" | "manual") => void;
levelMode: 'stacked' | 'exploded' | 'solo' | 'manual'
setLevelMode: (mode: 'stacked' | 'exploded' | 'solo' | 'manual') => void
showScans: boolean;
setShowScans: (show: boolean) => void;
wallMode: 'up' | 'cutaway' | 'down'
setWallMode: (mode: 'up' | 'cutaway' | 'down') => void
showGuides: boolean;
setShowGuides: (show: boolean) => void;
showScans: boolean
setShowScans: (show: boolean) => void
showGuides: boolean
setShowGuides: (show: boolean) => void
// Smart selection update
setSelection: (updates: Partial<SelectionPath>) => void;
resetSelection: () => void;
setSelection: (updates: Partial<SelectionPath>) => void
resetSelection: () => void
outliner: Outliner; // No setter as we will manipulate directly the arrays
outliner: Outliner // No setter as we will manipulate directly the arrays
// Export functionality
exportScene: (() => Promise<void>) | null;
setExportScene: (fn: (() => Promise<void>) | null) => void;
};
exportScene: (() => Promise<void>) | null
setExportScene: (fn: (() => Promise<void>) | null) => void
}
const useViewer = create<ViewerState>()((set, get) => ({
selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
@@ -62,6 +65,9 @@ const useViewer = create<ViewerState>()((set, get) => ({
levelMode: "stacked",
setLevelMode: (mode) => set({ levelMode: mode }),
wallMode: 'cutaway',
setWallMode: (mode) => set({ wallMode: mode }),
showScans: true,
setShowScans: (show) => set({ showScans: show }),
packages/viewer/src/systems/wall/wall-cutout.tsx
+65 -17
View File
@@ -1,18 +1,44 @@
import { sceneRegistry, useScene, type WallNode } from '@pascal-app/core'
import { useFrame } from '@react-three/fiber'
import { useRef } from 'react'
import { float, mix, positionLocal } from 'three/tsl'
import { Fn, float, fract, length, mix, positionLocal, smoothstep, step, vec2 } from 'three/tsl'
import { type Mesh, MeshStandardNodeMaterial, Vector3 } from 'three/webgpu'
import useViewer from '../../store/use-viewer'
const tmpVec = new Vector3()
const u = new Vector3()
const v = new Vector3()
// Dot pattern shader
const dotPattern = Fn(() => {
// Create a repeating grid pattern based on world position
const scale = float(0.1) // Dot grid spacing (10cm)
const dotSize = float(0.3) // Size of dots relative to grid
// Use XY coordinates for pattern on wall face
const uv = vec2(positionLocal.x, positionLocal.y).div(scale)
const gridUV = fract(uv)
// Distance from center of grid cell (creates circular dots)
const dist = length(gridUV.sub(0.5))
// Create dots: 1 where we want dots, 0 elsewhere
const dots = step(dist, dotSize.mul(0.5))
// Vertical fade: fade out as Y increases (from bottom to top)
const fadeHeight = float(2.5) // Fade over 2.5 meters
const yFade = float(1).sub(smoothstep(float(0), fadeHeight, positionLocal.y))
return dots.mul(yFade)
})
const invsibleWallMaterial = new MeshStandardNodeMaterial({
// opacity: 0.1,
transparent: true,
opacityNode: mix(float(1), float(0.1), positionLocal.y.add(0.1)),
opacityNode: mix(float(0.0), float(0.24), dotPattern()),
color: 'white',
depthWrite: false,
emissive: 'white',
})
const wallMaterial = new MeshStandardNodeMaterial({
color: 'white',
@@ -21,44 +47,66 @@ const wallMaterial = new MeshStandardNodeMaterial({
export const WallCutout = () => {
const lastCameraPosition = useRef(new Vector3())
const lastCameraTarget = useRef(new Vector3())
const lastUpdateTime = useRef(0)
const lastWallMode = useRef<string>(useViewer.getState().wallMode)
const lastNumberOfWalls = useRef(0)
useFrame(({ camera }) => {
useFrame(({ camera, clock }) => {
const wallMode = useViewer.getState().wallMode
const currentTime = clock.elapsedTime
const currentCameraPosition = camera.position
camera.getWorldDirection(tmpVec)
tmpVec.add(currentCameraPosition)
// Throttle: only update if camera moved significantly AND enough time passed
const distanceMoved = currentCameraPosition.distanceTo(lastCameraPosition.current)
const directionChanged = tmpVec.distanceTo(lastCameraTarget.current)
const timeSinceUpdate = currentTime - lastUpdateTime.current
// Update if moved > 0.5m OR direction changed > 0.3 AND at least 100ms passed
if (
!currentCameraPosition.equals(lastCameraPosition.current) ||
!tmpVec.equals(lastCameraTarget.current)
((distanceMoved > 0.5 || directionChanged > 0.3) && timeSinceUpdate > 0.1) ||
lastWallMode.current !== wallMode ||
sceneRegistry.byType.wall.size !== lastNumberOfWalls.current
) {
// Camera has moved, update cutout logic here
// Update last known positions
// Update last known positions and time
lastCameraPosition.current.copy(currentCameraPosition)
lastCameraTarget.current.copy(tmpVec)
lastUpdateTime.current = currentTime
camera.getWorldDirection(u)
// TODO: Debounce
const walls = sceneRegistry.byType.wall
walls.forEach((wallId) => {
const wallMesh = sceneRegistry.nodes.get(wallId)
if (!wallMesh) return
const wallNode = useScene.getState().nodes[wallId as WallNode['id']]
if (!wallNode || wallNode.type !== 'wall') return
wallMesh.getWorldDirection(v)
let hideWall = wallNode.frontSide === 'interior' && wallNode.backSide === 'interior'
if (v.dot(u) < 0) {
// Front side
if (wallNode.frontSide === 'exterior') {
hideWall = true
}
if (wallMode === 'up') {
hideWall = false
} else if (wallMode === 'down') {
hideWall = true
} else {
// Back side
if (wallNode.backSide === 'exterior') {
hideWall = true
wallMesh.getWorldDirection(v)
if (v.dot(u) < 0) {
// Front side
if (wallNode.frontSide === 'exterior' && wallNode.backSide !== 'exterior') {
hideWall = true
}
} else {
// Back side
if (wallNode.backSide === 'exterior' && wallNode.frontSide !== 'exterior') {
hideWall = true
}
}
}
;(wallMesh as Mesh).material = hideWall ? invsibleWallMaterial : wallMaterial
})
lastWallMode.current = wallMode
lastNumberOfWalls.current = sceneRegistry.byType.wall.size
}
})
return null