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

Merge pull request #201 from PMAT77/feature/material

Browse Source 
Feature/material
This commit is contained in:
Pascal
2026-03-30 17:07:01 -04:00
committed by GitHub
parent 4a83bed6dd f7a024d5f0
commit 08a9d66520
36 changed files with 791 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/package.json
+1 -1
View File
@@ -25,7 +25,7 @@
"@react-three/drei": "^10",
"@react-three/fiber": "^9",
"react": "^18 || ^19",
"three": "^0.183"
"three": "^0.182"
},
"dependencies": {
"dedent": "^1.7.1",
packages/core/src/schema/index.ts
+9 -1
View File
@@ -1,9 +1,17 @@
// Base
export { BaseNode, generateId, Material, nodeType, objectId } from './base'
export { BaseNode, generateId, nodeType, objectId } from './base'
// Camera
export { CameraSchema } from './camera'
// Collections
export { type Collection, type CollectionId, generateCollectionId } from './collections'
// Material
export {
DEFAULT_MATERIALS,
MaterialPreset,
MaterialProperties,
MaterialSchema,
resolveMaterial,
} from './material'
export { BuildingNode } from './nodes/building'
export { CeilingNode } from './nodes/ceiling'
export { DoorNode, DoorSegment } from './nodes/door'
packages/core/src/schema/material.ts
+140
View File
@@ -0,0 +1,140 @@
import { z } from 'zod'
export const MaterialPreset = z.enum([
'white',
'brick',
'concrete',
'wood',
'glass',
'metal',
'plaster',
'tile',
'marble',
'custom',
])
export type MaterialPreset = z.infer<typeof MaterialPreset>
export const MaterialProperties = z.object({
color: z.string().default('#ffffff'),
roughness: z.number().min(0).max(1).default(0.5),
metalness: z.number().min(0).max(1).default(0),
opacity: z.number().min(0).max(1).default(1),
transparent: z.boolean().default(false),
side: z.enum(['front', 'back', 'double']).default('front'),
})
export type MaterialProperties = z.infer<typeof MaterialProperties>
export const MaterialSchema = z.object({
preset: MaterialPreset.optional(),
properties: MaterialProperties.optional(),
texture: z
.object({
url: z.string(),
repeat: z.tuple([z.number(), z.number()]).optional(),
scale: z.number().optional(),
})
.optional(),
})
export type MaterialSchema = z.infer<typeof MaterialSchema>
export const DEFAULT_MATERIALS: Record<MaterialPreset, MaterialProperties> = {
white: {
color: '#ffffff',
roughness: 0.9,
metalness: 0,
opacity: 1,
transparent: false,
side: 'front',
},
brick: {
color: '#8b4513',
roughness: 0.85,
metalness: 0,
opacity: 1,
transparent: false,
side: 'front',
},
concrete: {
color: '#808080',
roughness: 0.8,
metalness: 0,
opacity: 1,
transparent: false,
side: 'front',
},
wood: {
color: '#deb887',
roughness: 0.7,
metalness: 0,
opacity: 1,
transparent: false,
side: 'front',
},
glass: {
color: '#87ceeb',
roughness: 0.1,
metalness: 0.1,
opacity: 0.3,
transparent: true,
side: 'double',
},
metal: {
color: '#c0c0c0',
roughness: 0.3,
metalness: 0.9,
opacity: 1,
transparent: false,
side: 'front',
},
plaster: {
color: '#f5f5dc',
roughness: 0.95,
metalness: 0,
opacity: 1,
transparent: false,
side: 'front',
},
tile: {
color: '#d3d3d3',
roughness: 0.4,
metalness: 0.1,
opacity: 1,
transparent: false,
side: 'front',
},
marble: {
color: '#fafafa',
roughness: 0.2,
metalness: 0.1,
opacity: 1,
transparent: false,
side: 'front',
},
custom: {
color: '#ffffff',
roughness: 0.5,
metalness: 0,
opacity: 1,
transparent: false,
side: 'front',
},
}
export function resolveMaterial(material?: MaterialSchema): MaterialProperties {
if (!material) {
return DEFAULT_MATERIALS.white
}
if (material.preset && material.preset !== 'custom') {
const presetProps = DEFAULT_MATERIALS[material.preset]
return {
...presetProps,
...material.properties,
}
}
return {
...DEFAULT_MATERIALS.custom,
...material.properties,
}
}
packages/core/src/schema/nodes/ceiling.ts
+2 -2
View File
@@ -1,14 +1,14 @@
import dedent from 'dedent'
import { z } from 'zod'
import { BaseNode, nodeType, objectId } from '../base'
import { MaterialSchema } from '../material'
import { ItemNode } from './item'
export const CeilingNode = BaseNode.extend({
id: objectId('ceiling'),
type: nodeType('ceiling'),
children: z.array(ItemNode.shape.id).default([]),
// Specific props
// Polygon boundary - array of [x, z] coordinates defining the ceiling
material: MaterialSchema.optional(),
polygon: z.array(z.tuple([z.number(), z.number()])),
holes: z.array(z.array(z.tuple([z.number(), z.number()]))).default([]),
height: z.number().default(2.5), // Height in meters
packages/core/src/schema/nodes/door.ts
+2
View File
@@ -1,6 +1,7 @@
import dedent from 'dedent'
import { z } from 'zod'
import { BaseNode, nodeType, objectId } from '../base'
import { MaterialSchema } from '../material'
export const DoorSegment = z.object({
type: z.enum(['panel', 'glass', 'empty']),
@@ -20,6 +21,7 @@ export type DoorSegment = z.infer<typeof DoorSegment>
export const DoorNode = BaseNode.extend({
id: objectId('door'),
type: nodeType('door'),
material: MaterialSchema.optional(),
position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
rotation: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
packages/core/src/schema/nodes/roof-segment.ts
+2 -1
View File
@@ -1,6 +1,7 @@
import dedent from 'dedent'
import { z } from 'zod'
import { BaseNode, nodeType, objectId } from '../base'
import { MaterialSchema } from '../material'
export const RoofType = z.enum(['hip', 'gable', 'shed', 'gambrel', 'dutch', 'mansard', 'flat'])
@@ -9,7 +10,7 @@ export type RoofType = z.infer<typeof RoofType>
export const RoofSegmentNode = BaseNode.extend({
id: objectId('rseg'),
type: nodeType('roof-segment'),
// Position relative to parent roof group
material: MaterialSchema.optional(),
position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
// Rotation around Y axis in radians
rotation: z.number().default(0),
packages/core/src/schema/nodes/roof.ts
+2 -1
View File
@@ -1,12 +1,13 @@
import dedent from 'dedent'
import { z } from 'zod'
import { BaseNode, nodeType, objectId } from '../base'
import { MaterialSchema } from '../material'
import { RoofSegmentNode } from './roof-segment'
export const RoofNode = BaseNode.extend({
id: objectId('roof'),
type: nodeType('roof'),
// Position of the roof group center
material: MaterialSchema.optional(),
position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
// Rotation around Y axis in radians
rotation: z.number().default(0),
packages/core/src/schema/nodes/slab.ts
+2 -2
View File
@@ -1,12 +1,12 @@
import dedent from 'dedent'
import { z } from 'zod'
import { BaseNode, nodeType, objectId } from '../base'
import { MaterialSchema } from '../material'
export const SlabNode = BaseNode.extend({
id: objectId('slab'),
type: nodeType('slab'),
// Specific props
// Polygon boundary - array of [x, z] coordinates defining the slab
material: MaterialSchema.optional(),
polygon: z.array(z.tuple([z.number(), z.number()])),
holes: z.array(z.array(z.tuple([z.number(), z.number()]))).default([]),
elevation: z.number().default(0.05), // Elevation in meters
packages/core/src/schema/nodes/wall.ts
+2 -1
View File
@@ -1,6 +1,7 @@
import dedent from 'dedent'
import { z } from 'zod'
import { BaseNode, nodeType, objectId } from '../base'
import { MaterialSchema } from '../material'
import { ItemNode } from './item'
// import { DoorNode } from "./door";
// import { ItemNode } from "./item";
@@ -10,7 +11,7 @@ export const WallNode = BaseNode.extend({
id: objectId('wall'),
type: nodeType('wall'),
children: z.array(ItemNode.shape.id).default([]),
// Specific props
material: MaterialSchema.optional(),
thickness: z.number().optional(),
height: z.number().optional(),
// e.g., start/end points for path
packages/core/src/schema/nodes/window.ts
+2 -1
View File
@@ -1,12 +1,13 @@
import dedent from 'dedent'
import { z } from 'zod'
import { BaseNode, nodeType, objectId } from '../base'
import { MaterialSchema } from '../material'
export const WindowNode = BaseNode.extend({
id: objectId('window'),
type: nodeType('window'),
material: MaterialSchema.optional(),
// Position in wall-local coordinate system (center of window)
position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
rotation: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
side: z.enum(['front', 'back']).optional(),
packages/core/src/store/actions/node-actions.ts
+9 -3
View File
@@ -104,11 +104,17 @@ export const updateNodesAction = (
})
// Collect all IDs that need to be marked dirty
updates.forEach((u) => idsToMarkDirty.add(u.id))
parentsToUpdate.forEach((pId) => idsToMarkDirty.add(pId))
for (const u of updates) {
idsToMarkDirty.add(u.id)
}
for (const pId of parentsToUpdate) {
idsToMarkDirty.add(pId)
}
// Add to pending updates set
idsToMarkDirty.forEach((id) => pendingUpdates.add(id))
for (const id of idsToMarkDirty) {
pendingUpdates.add(id)
}
// Cancel any pending RAF and schedule a new one
if (pendingRafId !== null) {
packages/core/src/utils/clone-scene-graph.ts
+1 -3
View File
@@ -52,9 +52,7 @@ export function cloneSceneGraph(sceneGraph: SceneGraph): SceneGraph {
// Remap children array (walls, levels, buildings, sites, items can have children)
if ('children' in clonedNode && Array.isArray(clonedNode.children)) {
;(clonedNode as Record<string, unknown>).children = (
clonedNode.children as string[]
)
;(clonedNode as Record<string, unknown>).children = (clonedNode.children as string[])
.map((childId) => idMap.get(childId))
.filter((id): id is string => id !== undefined)
}
packages/editor/src/components/editor/export-manager.tsx
+1 -1
View File
@@ -4,8 +4,8 @@ import { useViewer } from '@pascal-app/viewer'
import { useThree } from '@react-three/fiber'
import { useEffect } from 'react'
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js'
import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
export function ExportManager() {
const scene = useThree((state) => state.scene)
packages/editor/src/components/tools/wall/wall-tool.tsx
+6 -1
View File
@@ -6,7 +6,12 @@ import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
import { EDITOR_LAYER } from '../../../lib/constants'
import { sfxEmitter } from '../../../lib/sfx-bus'
import { CursorSphere } from '../shared/cursor-sphere'
import { createWallOnCurrentLevel, snapWallDraftPoint, WALL_MIN_LENGTH, type WallPlanPoint } from './wall-drafting'
import {
createWallOnCurrentLevel,
snapWallDraftPoint,
WALL_MIN_LENGTH,
type WallPlanPoint,
} from './wall-drafting'
const WALL_HEIGHT = 2.5
packages/editor/src/components/ui/controls/material-picker.tsx
+178
View File
@@ -0,0 +1,178 @@
'use client'
import { DEFAULT_MATERIALS, type MaterialPreset, type MaterialSchema } from '@pascal-app/core'
import { useState } from 'react'
const PRESET_COLORS: Record<MaterialPreset, string> = {
white: '#ffffff',
brick: '#8b4513',
concrete: '#808080',
wood: '#deb887',
glass: '#87ceeb',
metal: '#c0c0c0',
plaster: '#f5f5dc',
tile: '#d3d3d3',
marble: '#fafafa',
custom: '#ffffff',
}
const PRESET_LABELS: Record<MaterialPreset, string> = {
white: 'White',
brick: 'Brick',
concrete: 'Concrete',
wood: 'Wood',
glass: 'Glass',
metal: 'Metal',
plaster: 'Plaster',
tile: 'Tile',
marble: 'Marble',
custom: 'Custom',
}
type MaterialPickerProps = {
value?: MaterialSchema
onChange: (material: MaterialSchema) => void
}
export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
const [showCustom, setShowCustom] = useState<boolean>(value?.preset === 'custom' || !!value?.properties)
const currentPreset = value?.preset || 'white'
const currentProps = value?.properties || DEFAULT_MATERIALS[currentPreset]
const handlePresetChange = (preset: MaterialPreset) => {
if (preset === 'custom') {
setShowCustom(true)
onChange({
preset: 'custom',
properties: {
color: value?.properties?.color || '#ffffff',
roughness: value?.properties?.roughness ?? 0.5,
metalness: value?.properties?.metalness ?? 0,
opacity: value?.properties?.opacity ?? 1,
transparent: value?.properties?.transparent ?? false,
side: value?.properties?.side ?? 'front',
},
})
} else {
setShowCustom(false)
onChange({ preset })
}
}
const handlePropertyChange = (prop: keyof typeof currentProps, val: typeof currentProps[keyof typeof currentProps]) => {
onChange({
preset: showCustom ? 'custom' : currentPreset,
properties: {
...currentProps,
[prop]: val,
},
})
}
return (
<div className="space-y-3">
<div className="grid grid-cols-5 gap-1.5">
{(Object.keys(PRESET_COLORS) as MaterialPreset[]).map((preset) => (
<button
className={`h-8 w-8 rounded border-2 transition-all ${
currentPreset === preset
? 'border-blue-500 ring-2 ring-blue-500/30'
: 'border-gray-300 hover:border-gray-400'
}`}
key={preset}
onClick={() => handlePresetChange(preset)}
style={{
backgroundColor: PRESET_COLORS[preset],
backgroundImage: preset === 'glass' ? 'linear-gradient(135deg, rgba(255,255,255,0.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent)' : undefined,
backgroundSize: preset === 'glass' ? '8px 8px' : undefined,
}}
title={PRESET_LABELS[preset]}
type="button"
/>
))}
</div>
{showCustom && (
<div className="space-y-2 pt-2">
<div className="flex items-center gap-2">
<label className="text-xs text-gray-500 w-16">Color</label>
<input
className="h-7 w-12 rounded border border-gray-300 cursor-pointer"
onChange={(e) => handlePropertyChange('color', e.target.value)}
type="color"
value={currentProps.color}
/>
<input
className="flex-1 h-7 px-2 text-xs border border-gray-300 rounded"
onChange={(e) => handlePropertyChange('color', e.target.value)}
type="text"
value={currentProps.color}
/>
</div>
<div className="flex items-center gap-2">
<label className="text-xs text-gray-500 w-16">Roughness</label>
<input
className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer"
max={1}
min={0}
onChange={(e) => handlePropertyChange('roughness', parseFloat(e.target.value))}
step={0.01}
type="range"
value={currentProps.roughness}
/>
<span className="text-xs text-gray-400 w-8 text-right">{currentProps.roughness.toFixed(2)}</span>
</div>
<div className="flex items-center gap-2">
<label className="text-xs text-gray-500 w-16">Metalness</label>
<input
className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer"
max={1}
min={0}
onChange={(e) => handlePropertyChange('metalness', parseFloat(e.target.value))}
step={0.01}
type="range"
value={currentProps.metalness}
/>
<span className="text-xs text-gray-400 w-8 text-right">{currentProps.metalness.toFixed(2)}</span>
</div>
<div className="flex items-center gap-2">
<label className="text-xs text-gray-500 w-16">Opacity</label>
<input
className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer"
max={1}
min={0}
onChange={(e) => {
const opacity = parseFloat(e.target.value)
handlePropertyChange('opacity', opacity)
if (opacity < 1 && !currentProps.transparent) {
handlePropertyChange('transparent', true)
}
}}
step={0.01}
type="range"
value={currentProps.opacity}
/>
<span className="text-xs text-gray-400 w-8 text-right">{currentProps.opacity.toFixed(2)}</span>
</div>
<div className="flex items-center gap-2">
<label className="text-xs text-gray-500 w-16">Side</label>
<select
className="flex-1 h-7 px-2 text-xs border border-gray-300 rounded"
onChange={(e) => handlePropertyChange('side', e.target.value as 'front' | 'back' | 'double')}
value={currentProps.side}
>
<option value="front">Front</option>
<option value="back">Back</option>
<option value="double">Double</option>
</select>
</div>
</div>
)}
</div>
)
}
packages/editor/src/components/ui/panels/ceiling-panel.tsx
+13 -1
View File
@@ -1,11 +1,12 @@
'use client'
import { type AnyNode, type CeilingNode, useScene } from '@pascal-app/core'
import { type AnyNode, type CeilingNode, type MaterialSchema, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { Edit, Plus, Trash2 } from 'lucide-react'
import { useCallback, useEffect } from 'react'
import useEditor from '../../../store/use-editor'
import { ActionButton } from '../controls/action-button'
import { MaterialPicker } from '../controls/material-picker'
import { PanelSection } from '../controls/panel-section'
import { SliderControl } from '../controls/slider-control'
import { PanelWrapper } from './panel-wrapper'
@@ -94,6 +95,10 @@ export function CeilingPanel() {
[selectedId, node?.holes, handleUpdate, editingHole, setEditingHole],
)
const handleMaterialChange = useCallback((material: MaterialSchema) => {
handleUpdate({ material })
}, [handleUpdate])
if (!node || node.type !== 'ceiling' || selectedIds.length !== 1) return null
const calculateArea = (polygon: Array<[number, number]>): number => {
@@ -217,6 +222,13 @@ export function CeilingPanel() {
/>
</div>
</PanelSection>
<PanelSection title="Material">
<MaterialPicker
onChange={handleMaterialChange}
value={node.material}
/>
</PanelSection>
</PanelWrapper>
)
}
packages/editor/src/components/ui/panels/door-panel.tsx
+9 -1
View File
@@ -1,6 +1,6 @@
'use client'
import { type AnyNode, type AnyNodeId, DoorNode, emitter, useScene } from '@pascal-app/core'
import { type AnyNode, type AnyNodeId, type MaterialSchema, DoorNode, emitter, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { BookMarked, Copy, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
import { useCallback } from 'react'
@@ -8,6 +8,7 @@ import { usePresetsAdapter } from '../../../contexts/presets-context'
import { sfxEmitter } from '../../../lib/sfx-bus'
import useEditor from '../../../store/use-editor'
import { ActionButton, ActionGroup } from '../controls/action-button'
import { MaterialPicker } from '../controls/material-picker'
import { MetricControl } from '../controls/metric-control'
import { PanelSection } from '../controls/panel-section'
import { SegmentedControl } from '../controls/segmented-control'
@@ -562,6 +563,13 @@ export function DoorPanel() {
</div>
</PanelSection>
<PanelSection title="Material">
<MaterialPicker
onChange={(material) => handleUpdate({ material })}
value={node.material}
/>
</PanelSection>
<PanelSection title="Actions">
<ActionGroup>
<ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
packages/editor/src/components/ui/panels/roof-panel.tsx
+13
View File
@@ -3,6 +3,7 @@
import {
type AnyNode,
type AnyNodeId,
type MaterialSchema,
type RoofNode,
RoofNode as RoofNodeSchema,
type RoofSegmentNode,
@@ -15,6 +16,7 @@ import { useCallback } from 'react'
import { sfxEmitter } from '../../../lib/sfx-bus'
import useEditor from '../../../store/use-editor'
import { ActionButton, ActionGroup } from '../controls/action-button'
import { MaterialPicker } from '../controls/material-picker'
import { MetricControl } from '../controls/metric-control'
import { PanelSection } from '../controls/panel-section'
import { SliderControl } from '../controls/slider-control'
@@ -122,6 +124,10 @@ export function RoofPanel() {
setSelection({ selectedIds: [] })
}, [selectedId, node, setSelection])
const handleMaterialChange = useCallback((material: MaterialSchema) => {
handleUpdate({ material })
}, [handleUpdate])
if (!node || node.type !== 'roof' || selectedIds.length !== 1) return null
const segments = (node.children ?? [])
@@ -229,6 +235,13 @@ export function RoofPanel() {
</div>
</PanelSection>
<PanelSection title="Material">
<MaterialPicker
onChange={handleMaterialChange}
value={node.material}
/>
</PanelSection>
<PanelSection title="Actions">
<ActionGroup>
<ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
packages/editor/src/components/ui/panels/roof-segment-panel.tsx
+13
View File
@@ -3,6 +3,7 @@
import {
type AnyNode,
type AnyNodeId,
type MaterialSchema,
type RoofSegmentNode,
RoofSegmentNode as RoofSegmentNodeSchema,
type RoofType,
@@ -14,6 +15,7 @@ import { useCallback } from 'react'
import { sfxEmitter } from '../../../lib/sfx-bus'
import useEditor from '../../../store/use-editor'
import { ActionButton, ActionGroup } from '../controls/action-button'
import { MaterialPicker } from '../controls/material-picker'
import { MetricControl } from '../controls/metric-control'
import { PanelSection } from '../controls/panel-section'
import { SegmentedControl } from '../controls/segmented-control'
@@ -108,6 +110,10 @@ export function RoofSegmentPanel() {
}
}, [selectedId, node, setSelection])
const handleMaterialChange = useCallback((material: MaterialSchema) => {
handleUpdate({ material })
}, [handleUpdate])
if (!node || node.type !== 'roof-segment' || selectedIds.length !== 1) return null
return (
@@ -293,6 +299,13 @@ export function RoofSegmentPanel() {
</div>
</PanelSection>
<PanelSection title="Material">
<MaterialPicker
onChange={handleMaterialChange}
value={node.material}
/>
</PanelSection>
<PanelSection title="Actions">
<ActionGroup>
<ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
packages/editor/src/components/ui/panels/slab-panel.tsx
+13 -1
View File
@@ -1,11 +1,12 @@
'use client'
import { type AnyNode, type SlabNode, useScene } from '@pascal-app/core'
import { type AnyNode, type MaterialSchema, type SlabNode, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { Edit, Plus, Trash2 } from 'lucide-react'
import { useCallback, useEffect } from 'react'
import useEditor from '../../../store/use-editor'
import { ActionButton, ActionGroup } from '../controls/action-button'
import { MaterialPicker } from '../controls/material-picker'
import { PanelSection } from '../controls/panel-section'
import { SliderControl } from '../controls/slider-control'
import { PanelWrapper } from './panel-wrapper'
@@ -29,6 +30,10 @@ export function SlabPanel() {
[selectedId, updateNode],
)
const handleMaterialChange = useCallback((material: MaterialSchema) => {
handleUpdate({ material })
}, [handleUpdate])
const handleClose = useCallback(() => {
setSelection({ selectedIds: [] })
setEditingHole(null)
@@ -216,6 +221,13 @@ export function SlabPanel() {
/>
</div>
</PanelSection>
<PanelSection title="Material">
<MaterialPicker
onChange={handleMaterialChange}
value={node.material}
/>
</PanelSection>
</PanelWrapper>
)
}
packages/editor/src/components/ui/panels/wall-panel.tsx
+13 -5
View File
@@ -1,8 +1,9 @@
'use client'
import { type AnyNode, type AnyNodeId, useScene, type WallNode } from '@pascal-app/core'
import { type AnyNode, type AnyNodeId, type MaterialSchema, useScene, type WallNode } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { useCallback } from 'react'
import { MaterialPicker } from '../controls/material-picker'
import { PanelSection } from '../controls/panel-section'
import { SliderControl } from '../controls/slider-control'
import { PanelWrapper } from './panel-wrapper'
@@ -25,7 +26,6 @@ export function WallPanel() {
[selectedId, updateNode],
)
// Função mágica para a Issue #191: Atualiza o comprimento via cálculo vetorial
const handleUpdateLength = useCallback((newLength: number) => {
if (!node || newLength <= 0) return
@@ -35,11 +35,9 @@ export function WallPanel() {
if (currentLength === 0) return
// Calcula a direção (vetor unitário)
const dirX = dx / currentLength
const dirZ = dz / currentLength
// Define o novo ponto final baseado no novo comprimento
const newEnd: [number, number] = [
node.start[0] + dirX * newLength,
node.start[1] + dirZ * newLength
@@ -48,6 +46,10 @@ export function WallPanel() {
handleUpdate({ end: newEnd })
}, [node, handleUpdate])
const handleMaterialChange = useCallback((material: MaterialSchema) => {
handleUpdate({ material })
}, [handleUpdate])
const handleClose = useCallback(() => {
setSelection({ selectedIds: [] })
}, [setSelection])
@@ -69,7 +71,6 @@ export function WallPanel() {
width={280}
>
<PanelSection title="Dimensions">
{/* Adicionando o controle de Length solicitado na Issue #191 */}
<SliderControl
label="Length"
max={20}
@@ -101,6 +102,13 @@ export function WallPanel() {
value={Math.round(thickness * 1000) / 1000}
/>
</PanelSection>
<PanelSection title="Material">
<MaterialPicker
onChange={handleMaterialChange}
value={node.material}
/>
</PanelSection>
</PanelWrapper>
)
}
packages/editor/src/components/ui/panels/window-panel.tsx
+13 -1
View File
@@ -1,6 +1,6 @@
'use client'
import { type AnyNode, type AnyNodeId, emitter, useScene, WindowNode } from '@pascal-app/core'
import { type AnyNode, type AnyNodeId, emitter, type MaterialSchema, useScene, WindowNode } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { BookMarked, Copy, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
import { useCallback } from 'react'
@@ -8,6 +8,7 @@ import { usePresetsAdapter } from '../../../contexts/presets-context'
import { sfxEmitter } from '../../../lib/sfx-bus'
import useEditor from '../../../store/use-editor'
import { ActionButton, ActionGroup } from '../controls/action-button'
import { MaterialPicker } from '../controls/material-picker'
import { MetricControl } from '../controls/metric-control'
import { PanelSection } from '../controls/panel-section'
import { SliderControl } from '../controls/slider-control'
@@ -138,6 +139,10 @@ export function WindowPanel() {
[handleUpdate],
)
const handleMaterialChange = useCallback((material: MaterialSchema) => {
handleUpdate({ material })
}, [handleUpdate])
if (!node || node.type !== 'window' || selectedIds.length !== 1) return null
const numCols = node.columnRatios.length
@@ -402,6 +407,13 @@ export function WindowPanel() {
)}
</PanelSection>
<PanelSection title="Material">
<MaterialPicker
onChange={handleMaterialChange}
value={node.material}
/>
</PanelSection>
<PanelSection title="Actions">
<ActionGroup>
<ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
packages/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx
+36 -36
View File
@@ -1,49 +1,37 @@
import { type CeilingNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import { float, mix, positionWorld, smoothstep } from 'three/tsl'
import { BackSide, FrontSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { DEFAULT_CEILING_MATERIAL } from '../../../lib/materials'
import { NodeRenderer } from '../node-renderer'
// TSL material that renders differently based on face direction:
// - Back face (looking up at ceiling from below): solid
// - Front face (looking down at ceiling from above): 30% opacity
const ceilingTopMaterial = new MeshBasicNodeMaterial({
color: 0xb5_a7_8d,
transparent: true,
depthWrite: false,
side: FrontSide,
// Disabled as we only show ceiling grid when needed
// alphaTestNode: float(0.4), // Discard pixels with alpha below 0.4 to create grid lines and not affect depth buffer
})
const ceilingBottomMaterial = new MeshBasicNodeMaterial({
color: 0x99_99_99,
transparent: true,
side: BackSide,
})
// Create grid pattern based on local position
const gridScale = 5 // Grid cells per meter (1 = 1m grid)
const gridScale = 5
const gridX = positionWorld.x.mul(gridScale).fract()
const gridY = positionWorld.z.mul(gridScale).fract()
// Create grid lines - they are at 0 and 1
const lineWidth = 0.05 // Width of grid lines (0-1 range within cell)
// Create visible lines at edges (near 0 and near 1)
const lineWidth = 0.05
const lineX = smoothstep(lineWidth, 0, gridX).add(smoothstep(1.0 - lineWidth, 1.0, gridX))
const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.0, gridY))
// Combine: if either X or Y is a line, show the line
const gridPattern = lineX.max(lineY)
// Grid lines at 0.6 opacity, spaces at 0.2 opacity
const gridOpacity = mix(float(0.2), float(0.6), gridPattern)
// faceDirection is 1.0 for front face, -1.0 for back face
// Front face (top, looking down): grid pattern, Back face (bottom, looking up): solid
ceilingTopMaterial.opacityNode = gridOpacity
function createCeilingMaterials(color: string = '#999999') {
const topMaterial = new MeshBasicNodeMaterial({
color,
transparent: true,
depthWrite: false,
side: FrontSide,
})
topMaterial.opacityNode = gridOpacity
const bottomMaterial = new MeshBasicNodeMaterial({
color,
transparent: true,
side: BackSide,
})
return { topMaterial, bottomMaterial }
}
export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
const ref = useRef<Mesh>(null!)
@@ -51,12 +39,24 @@ export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
useRegistry(node.id, 'ceiling', ref)
const handlers = useNodeEvents(node, 'ceiling')
const materials = useMemo(() => {
const mat = node.material
if (mat) {
const props = mat.properties
const color = props?.color || '#999999'
return createCeilingMaterials(color)
}
return {
topMaterial: createCeilingMaterials().topMaterial,
bottomMaterial: DEFAULT_CEILING_MATERIAL,
}
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
return (
<mesh material={ceilingBottomMaterial} ref={ref}>
{/* CeilingSystem will replace this geometry in the next frame */}
<mesh material={materials.bottomMaterial} ref={ref}>
<boxGeometry args={[0, 0, 0]} />
<mesh
material={ceilingTopMaterial}
material={materials.topMaterial}
name="ceiling-grid"
{...handlers}
scale={0}
packages/viewer/src/components/renderers/door/door-renderer.tsx
+9 -3
View File
@@ -1,7 +1,8 @@
import { type DoorNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import type { Mesh } from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial, DEFAULT_DOOR_MATERIAL } from '../../../lib/materials'
export const DoorRenderer = ({ node }: { node: DoorNode }) => {
const ref = useRef<Mesh>(null!)
@@ -10,9 +11,16 @@ export const DoorRenderer = ({ node }: { node: DoorNode }) => {
const handlers = useNodeEvents(node, 'door')
const isTransient = !!(node.metadata as Record<string, unknown> | null)?.isTransient
const material = useMemo(() => {
const mat = node.material
if (!mat) return DEFAULT_DOOR_MATERIAL
return createMaterial(mat)
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
return (
<mesh
castShadow
material={material}
position={node.position}
receiveShadow
ref={ref}
@@ -20,9 +28,7 @@ export const DoorRenderer = ({ node }: { node: DoorNode }) => {
visible={node.visible}
{...(isTransient ? {} : handlers)}
>
{/* DoorSystem replaces this geometry each time the node is dirty */}
<boxGeometry args={[0, 0, 0]} />
<meshStandardMaterial color="#d1d5db" />
</mesh>
)
}
packages/viewer/src/components/renderers/roof-segment/roof-segment-renderer.tsx
+11 -2
View File
@@ -1,7 +1,8 @@
import { type RoofSegmentNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import type * as THREE from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial } from '../../../lib/materials'
import useViewer from '../../../store/use-viewer'
import { roofDebugMaterials, roofMaterials } from '../roof/roof-materials'
@@ -13,9 +14,17 @@ export const RoofSegmentRenderer = ({ node }: { node: RoofSegmentNode }) => {
const handlers = useNodeEvents(node, 'roof-segment')
const debugColors = useViewer((s) => s.debugColors)
const customMaterial = useMemo(() => {
const mat = node.material
if (!mat) return null
return createMaterial(mat)
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
return (
<mesh
material={debugColors ? roofDebugMaterials : roofMaterials}
material={material}
position={node.position}
ref={ref}
rotation-y={node.rotation}
packages/viewer/src/components/renderers/roof/roof-renderer.tsx
+11 -7
View File
@@ -1,7 +1,8 @@
import { type RoofNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import type * as THREE from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial } from '../../../lib/materials'
import useViewer from '../../../store/use-viewer'
import { NodeRenderer } from '../node-renderer'
import { roofDebugMaterials, roofMaterials } from './roof-materials'
@@ -14,6 +15,14 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
const handlers = useNodeEvents(node, 'roof')
const debugColors = useViewer((s) => s.debugColors)
const customMaterial = useMemo(() => {
const mat = node.material
if (!mat) return null
return createMaterial(mat)
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
return (
<group
position={node.position}
@@ -22,12 +31,7 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
visible={node.visible}
{...handlers}
>
<mesh
castShadow
material={debugColors ? roofDebugMaterials : roofMaterials}
name="merged-roof"
receiveShadow
>
<mesh castShadow material={material} name="merged-roof" receiveShadow>
<boxGeometry args={[0, 0, 0]} />
</mesh>
<group name="segments-wrapper" visible={false}>
packages/viewer/src/components/renderers/slab/slab-renderer.tsx
+16 -4
View File
@@ -1,7 +1,8 @@
import { type SlabNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import type { Mesh } from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial, DEFAULT_SLAB_MATERIAL } from '../../../lib/materials'
export const SlabRenderer = ({ node }: { node: SlabNode }) => {
const ref = useRef<Mesh>(null!)
@@ -10,11 +11,22 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
const handlers = useNodeEvents(node, 'slab')
const material = useMemo(() => {
const mat = node.material
if (!mat) return DEFAULT_SLAB_MATERIAL
return createMaterial(mat)
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
return (
<mesh castShadow receiveShadow ref={ref} {...handlers} visible={node.visible}>
{/* SlabSystem will replace this geometry in the next frame */}
<mesh
castShadow
receiveShadow
ref={ref}
{...handlers}
visible={node.visible}
material={material}
>
<boxGeometry args={[0, 0, 0]} />
<meshStandardMaterial color="#e5e5e5" />
</mesh>
)
}
packages/viewer/src/components/renderers/wall/wall-renderer.tsx
+9 -5
View File
@@ -1,7 +1,8 @@
import { useRegistry, useScene, type WallNode } from '@pascal-app/core'
import { useLayoutEffect, useRef } from 'react'
import { useLayoutEffect, useMemo, useRef } from 'react'
import type { Mesh } from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial, DEFAULT_WALL_MATERIAL } from '../../../lib/materials'
import { NodeRenderer } from '../node-renderer'
export const WallRenderer = ({ node }: { node: WallNode }) => {
@@ -9,18 +10,21 @@ export const WallRenderer = ({ node }: { node: WallNode }) => {
useRegistry(node.id, 'wall', ref)
// Mark dirty on mount so WallSystem rebuilds geometry when wall (re)appears
useLayoutEffect(() => {
useScene.getState().markDirty(node.id)
}, [node.id])
const handlers = useNodeEvents(node, 'wall')
const material = useMemo(() => {
const mat = node.material
if (!mat) return DEFAULT_WALL_MATERIAL
return createMaterial(mat)
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
return (
<mesh castShadow receiveShadow ref={ref} visible={node.visible}>
{/* WallSystem will replace this geometry in the next frame */}
<mesh castShadow receiveShadow ref={ref} visible={node.visible} material={material}>
<boxGeometry args={[0, 0, 0]} />
{/* Collision mesh: full-wall geometry (no cutouts) for pointer events */}
<mesh name="collision-mesh" visible={false} {...handlers}>
<boxGeometry args={[0, 0, 0]} />
</mesh>
packages/viewer/src/components/renderers/window/window-renderer.tsx
+9 -3
View File
@@ -1,7 +1,8 @@
import { useRegistry, type WindowNode } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import type { Mesh } from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial, DEFAULT_WINDOW_MATERIAL } from '../../../lib/materials'
export const WindowRenderer = ({ node }: { node: WindowNode }) => {
const ref = useRef<Mesh>(null!)
@@ -10,9 +11,16 @@ export const WindowRenderer = ({ node }: { node: WindowNode }) => {
const handlers = useNodeEvents(node, 'window')
const isTransient = !!(node.metadata as Record<string, unknown> | null)?.isTransient
const material = useMemo(() => {
const mat = node.material
if (!mat) return DEFAULT_WINDOW_MATERIAL
return createMaterial(mat)
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
return (
<mesh
castShadow
material={material}
position={node.position}
receiveShadow
ref={ref}
@@ -20,9 +28,7 @@ export const WindowRenderer = ({ node }: { node: WindowNode }) => {
visible={node.visible}
{...(isTransient ? {} : handlers)}
>
{/* WindowSystem replaces this geometry each time the node is dirty */}
<boxGeometry args={[0, 0, 0]} />
<meshStandardMaterial color="#d1d5db" />
</mesh>
)
}
packages/viewer/src/hooks/use-gltf-ktx2.tsx
+1
View File
@@ -36,4 +36,5 @@ const useGLTFKTX2 = (path: string): ReturnType<typeof useGLTF> => {
loader.setMeshoptDecoder(MeshoptDecoder)
})
}
export { useGLTFKTX2 }
packages/viewer/src/index.ts
+12
View File
@@ -1,6 +1,18 @@
export { default as Viewer } from './components/viewer'
export { ASSETS_CDN_URL, resolveAssetUrl, resolveCdnUrl } from './lib/asset-url'
export { SCENE_LAYER, ZONE_LAYER } from './lib/layers'
export {
clearMaterialCache,
createDefaultMaterial,
createMaterial,
DEFAULT_CEILING_MATERIAL,
DEFAULT_DOOR_MATERIAL,
DEFAULT_ROOF_MATERIAL,
DEFAULT_SLAB_MATERIAL,
DEFAULT_WALL_MATERIAL,
DEFAULT_WINDOW_MATERIAL,
disposeMaterial,
} from './lib/materials'
export { default as useViewer } from './store/use-viewer'
export { InteractiveSystem } from './systems/interactive/interactive-system'
export { snapLevelsToTruePositions } from './systems/level/level-utils'
packages/viewer/src/lib/materials.ts
+72
View File
@@ -0,0 +1,72 @@
import { type MaterialProperties, type MaterialSchema, resolveMaterial } from '@pascal-app/core'
import * as THREE from 'three'
const sideMap: Record<MaterialProperties['side'], THREE.Side> = {
front: THREE.FrontSide,
back: THREE.BackSide,
double: THREE.DoubleSide,
}
const materialCache = new Map<string, THREE.MeshStandardMaterial>()
function getCacheKey(props: MaterialProperties): string {
return `${props.color}-${props.roughness}-${props.metalness}-${props.opacity}-${props.transparent}-${props.side}`
}
export function createMaterial(material?: MaterialSchema): THREE.MeshStandardMaterial {
const props = resolveMaterial(material)
const cacheKey = getCacheKey(props)
if (materialCache.has(cacheKey)) {
return materialCache.get(cacheKey)!
}
const threeMaterial = new THREE.MeshStandardMaterial({
color: props.color,
roughness: props.roughness,
metalness: props.metalness,
opacity: props.opacity,
transparent: props.transparent,
side: sideMap[props.side],
})
materialCache.set(cacheKey, threeMaterial)
return threeMaterial
}
export function createDefaultMaterial(
color: string = '#ffffff',
roughness: number = 0.9,
): THREE.MeshStandardMaterial {
return new THREE.MeshStandardMaterial({
color,
roughness,
metalness: 0,
side: THREE.FrontSide,
})
}
export const DEFAULT_WALL_MATERIAL = createDefaultMaterial('#ffffff', 0.9)
export const DEFAULT_SLAB_MATERIAL = createDefaultMaterial('#e5e5e5', 0.8)
export const DEFAULT_DOOR_MATERIAL = createDefaultMaterial('#8b4513', 0.7)
export const DEFAULT_WINDOW_MATERIAL = new THREE.MeshStandardMaterial({
color: '#87ceeb',
roughness: 0.1,
metalness: 0.1,
opacity: 0.3,
transparent: true,
side: THREE.DoubleSide,
})
export const DEFAULT_CEILING_MATERIAL = createDefaultMaterial('#f5f5dc', 0.95)
export const DEFAULT_ROOF_MATERIAL = createDefaultMaterial('#808080', 0.85)
export function disposeMaterial(material: THREE.Material): void {
material.dispose()
}
export function clearMaterialCache(): void {
for (const material of materialCache.values()) {
material.dispose()
}
materialCache.clear()
}
packages/viewer/src/systems/wall/wall-cutout.tsx
+151 -51
View File
@@ -10,41 +10,124 @@ 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
const scale = float(0.1)
const dotSize = float(0.3)
// 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 fadeHeight = float(2.5)
const yFade = float(1).sub(smoothstep(float(0), fadeHeight, positionLocal.y))
return dots.mul(yFade)
})
const invsibleWallMaterial = new MeshStandardNodeMaterial({
transparent: true,
opacityNode: mix(float(0.0), float(0.24), dotPattern()),
color: 'white',
depthWrite: false,
emissive: 'white',
})
const wallMaterial = new MeshStandardNodeMaterial({
color: 'white',
roughness: 1,
metalness: 0,
})
interface WallMaterials {
visible: MeshStandardNodeMaterial
invisible: MeshStandardNodeMaterial
materialHash: string
}
const wallMaterialCache = new Map<string, WallMaterials>()
function getMaterialHash(wallNode: WallNode): string {
if (!wallNode.material) return 'none'
const mat = wallNode.material
if (mat.preset && mat.preset !== 'custom') {
return `preset-${mat.preset}`
}
if (mat.properties) {
return `props-${mat.properties.color}-${mat.properties.roughness}-${mat.properties.metalness}`
}
return 'default'
}
const presetColors = {
white: '#ffffff',
brick: '#8b4513',
concrete: '#808080',
wood: '#deb887',
glass: '#87ceeb',
metal: '#c0c0c0',
plaster: '#f5f5dc',
tile: '#dcdcdc',
marble: '#f5f5f5',
} as const
function getPresetColor(preset: string): string {
return presetColors[preset as keyof typeof presetColors] ?? '#ffffff'
}
function getMaterialsForWall(wallNode: WallNode): WallMaterials {
const cacheKey = wallNode.id
const materialHash = getMaterialHash(wallNode)
const existing = wallMaterialCache.get(cacheKey)
if (existing && existing.materialHash === materialHash) {
return existing
}
if (existing) {
existing.visible.dispose()
existing.invisible.dispose()
}
let userColor = '#ffffff'
if (wallNode.material?.properties?.color) {
userColor = wallNode.material.properties.color
} else if (wallNode.material?.preset && wallNode.material.preset !== 'custom') {
userColor = getPresetColor(wallNode.material.preset)
}
const visibleMat = new MeshStandardNodeMaterial({
color: userColor,
roughness: 1,
metalness: 0,
})
const invisibleMat = new MeshStandardNodeMaterial({
transparent: true,
opacityNode: mix(float(0.0), float(0.24), dotPattern()),
color: userColor,
depthWrite: false,
emissive: userColor,
})
const result: WallMaterials = { visible: visibleMat, invisible: invisibleMat, materialHash }
wallMaterialCache.set(cacheKey, result)
return result
}
function getWallHideState(
wallNode: WallNode,
wallMesh: Mesh,
wallMode: string,
cameraDir: Vector3,
): boolean {
let hideWall = wallNode.frontSide === 'interior' && wallNode.backSide === 'interior'
if (wallMode === 'up') {
hideWall = false
} else if (wallMode === 'down') {
hideWall = true
} else {
wallMesh.getWorldDirection(v)
if (v.dot(cameraDir) < 0) {
if (wallNode.frontSide === 'exterior' && wallNode.backSide !== 'exterior') {
hideWall = true
}
} else if (wallNode.backSide === 'exterior' && wallNode.frontSide !== 'exterior') {
hideWall = true
}
}
return hideWall
}
export const WallCutout = () => {
const lastCameraPosition = useRef(new Vector3())
@@ -52,6 +135,7 @@ export const WallCutout = () => {
const lastUpdateTime = useRef(0)
const lastWallMode = useRef<string>(useViewer.getState().wallMode)
const lastNumberOfWalls = useRef(0)
const lastWallMaterials = useRef<Map<string, WallMaterials>>(new Map())
useFrame(({ camera, clock }) => {
const wallMode = useViewer.getState().wallMode
@@ -60,51 +144,67 @@ export const WallCutout = () => {
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 (
const shouldUpdate =
((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 and time
const walls = sceneRegistry.byType.wall
const currentWallIds = new Set<string>()
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
currentWallIds.add(wallId)
const hideWall = getWallHideState(wallNode, wallMesh as Mesh, wallMode, u)
if (shouldUpdate) {
const materials = getMaterialsForWall(wallNode)
;(wallMesh as Mesh).material = hideWall ? materials.invisible : materials.visible
} else {
const currentMaterial = (wallMesh as Mesh).material
const materials = wallMaterialCache.get(wallId)
if (
!materials ||
currentMaterial !== (hideWall ? materials.invisible : materials.visible)
) {
const newMaterials = getMaterialsForWall(wallNode)
;(wallMesh as Mesh).material = hideWall ? newMaterials.invisible : newMaterials.visible
}
}
})
if (shouldUpdate) {
lastCameraPosition.current.copy(currentCameraPosition)
lastCameraTarget.current.copy(tmpVec)
lastUpdateTime.current = currentTime
camera.getWorldDirection(u)
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
let hideWall = wallNode.frontSide === 'interior' && wallNode.backSide === 'interior'
if (lastWallMode.current !== wallMode) {
wallMaterialCache.clear()
}
if (wallMode === 'up') {
hideWall = false
} else if (wallMode === 'down') {
hideWall = true
} else {
wallMesh.getWorldDirection(v)
if (v.dot(u) < 0) {
// Front side
if (wallNode.frontSide === 'exterior' && wallNode.backSide !== 'exterior') {
hideWall = true
}
} else if (wallNode.backSide === 'exterior' && wallNode.frontSide !== 'exterior') {
// Back side
hideWall = true
}
for (const [wallId, mats] of lastWallMaterials.current) {
if (!currentWallIds.has(wallId)) {
mats.visible.dispose()
mats.invisible.dispose()
wallMaterialCache.delete(wallId)
}
;(wallMesh as Mesh).material = hideWall ? invsibleWallMaterial : wallMaterial
})
}
lastWallMaterials.current.clear()
for (const [wallId, mats] of wallMaterialCache) {
lastWallMaterials.current.set(wallId, mats)
}
lastWallMode.current = wallMode
lastNumberOfWalls.current = sceneRegistry.byType.wall.size
}