- Add MaterialSchema with 10 presets (white, brick, concrete, wood, glass, metal, plaster, tile, marble, custom) - Add material field to Wall, Slab, Door, Window, Ceiling, Roof, RoofSegment nodes - Create MaterialPicker UI component with preset selection and custom properties - Update all renderers to support material rendering with caching - Add Material section to all node panels (WallPanel, SlabPanel, DoorPanel, WindowPanel, CeilingPanel, RoofPanel, RoofSegmentPanel) - Update AGENTS.md with Material System documentation
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { type RoofNode, useRegistry } from '@pascal-app/core'
|
|
import { useMemo, useRef } from 'react'
|
|
import type * as THREE from 'three'
|
|
import { useNodeEvents } from '../../../hooks/use-node-events'
|
|
import { createMaterial, DEFAULT_ROOF_MATERIAL } from '../../../lib/materials'
|
|
import useViewer from '../../../store/use-viewer'
|
|
import { NodeRenderer } from '../node-renderer'
|
|
import { roofDebugMaterials, roofMaterials } from './roof-materials'
|
|
|
|
export const RoofRenderer = ({ node }: { node: RoofNode }) => {
|
|
const ref = useRef<THREE.Group>(null!)
|
|
|
|
useRegistry(node.id, 'roof', ref)
|
|
|
|
const handlers = useNodeEvents(node, 'roof')
|
|
const debugColors = useViewer((s) => s.debugColors)
|
|
|
|
const customMaterial = useMemo(() => {
|
|
return node.material ? createMaterial(node.material) : null
|
|
}, [node.material])
|
|
|
|
const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
|
|
|
|
return (
|
|
<group
|
|
position={node.position}
|
|
ref={ref}
|
|
rotation-y={node.rotation}
|
|
visible={node.visible}
|
|
{...handlers}
|
|
>
|
|
<mesh
|
|
castShadow
|
|
material={material}
|
|
name="merged-roof"
|
|
receiveShadow
|
|
>
|
|
<boxGeometry args={[0, 0, 0]} />
|
|
</mesh>
|
|
<group name="segments-wrapper" visible={false}>
|
|
{(node.children ?? []).map((childId) => (
|
|
<NodeRenderer key={childId} nodeId={childId} />
|
|
))}
|
|
</group>
|
|
</group>
|
|
)
|
|
}
|