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

feat: add material system for all node types

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
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
+70
View File
@@ -0,0 +1,70 @@
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(),