feat: add material system for all node types

- 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
This commit is contained in:
Developer
2026-03-30 12:15:16 +08:00
parent 99bb5f3645
commit 12b6292623
29 changed files with 613 additions and 86 deletions
@@ -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,13 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
const handlers = useNodeEvents(node, 'slab')
const material = useMemo(() => {
return node.material ? createMaterial(node.material) : DEFAULT_SLAB_MATERIAL
}, [node.material])
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>
)
}