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

refactor: 完善材质系统相关代码

Browse Source 
- 修复 node-actions.ts 中 forEach 返回值 lint 警告
- 更新材质 schema 定义和渲染器
- wall-cutout.tsx 材质颜色保留修复
This commit is contained in:
Developer
2026-03-30 20:29:29 +08:00
parent d0cdeb2ac4
commit 0be6d84c98
12 changed files with 129 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/schema/material.ts
+80 -10
View File
@@ -38,16 +38,86 @@ export const MaterialSchema = z.object({
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' },
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 {
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/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx
+5 -2
View File
@@ -3,7 +3,7 @@ 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 { createMaterial, DEFAULT_CEILING_MATERIAL } from '../../../lib/materials'
import { DEFAULT_CEILING_MATERIAL } from '../../../lib/materials'
import { NodeRenderer } from '../node-renderer'
const gridScale = 5
@@ -46,7 +46,10 @@ export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
const color = props?.color || '#999999'
return createCeilingMaterials(color)
}
return { topMaterial: createCeilingMaterials().topMaterial, bottomMaterial: DEFAULT_CEILING_MATERIAL }
return {
topMaterial: createCeilingMaterials().topMaterial,
bottomMaterial: DEFAULT_CEILING_MATERIAL,
}
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
return (
packages/viewer/src/components/renderers/roof-segment/roof-segment-renderer.tsx
+1 -1
View File
@@ -35,4 +35,4 @@ export const RoofSegmentRenderer = ({ node }: { node: RoofSegmentNode }) => {
<boxGeometry args={[0, 0, 0]} />
</mesh>
)
}
}
packages/viewer/src/components/renderers/roof/roof-renderer.tsx
+2 -7
View File
@@ -2,7 +2,7 @@ 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 { createMaterial } from '../../../lib/materials'
import useViewer from '../../../store/use-viewer'
import { NodeRenderer } from '../node-renderer'
import { roofDebugMaterials, roofMaterials } from './roof-materials'
@@ -31,12 +31,7 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
visible={node.visible}
{...handlers}
>
<mesh
castShadow
material={material}
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
+8 -1
View File
@@ -18,7 +18,14 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
return (
<mesh castShadow receiveShadow ref={ref} {...handlers} visible={node.visible} material={material}>
<mesh
castShadow
receiveShadow
ref={ref}
{...handlers}
visible={node.visible}
material={material}
>
<boxGeometry args={[0, 0, 0]} />
</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/lib/materials.ts
+4 -1
View File
@@ -34,7 +34,10 @@ export function createMaterial(material?: MaterialSchema): THREE.MeshStandardMat
return threeMaterial
}
export function createDefaultMaterial(color: string = '#ffffff', roughness: number = 0.9): THREE.MeshStandardMaterial {
export function createDefaultMaterial(
color: string = '#ffffff',
roughness: number = 0.9,
): THREE.MeshStandardMaterial {
return new THREE.MeshStandardMaterial({
color,
roughness,
packages/viewer/src/systems/wall/wall-cutout.tsx
+11 -3
View File
@@ -103,7 +103,12 @@ function getMaterialsForWall(wallNode: WallNode): WallMaterials {
return result
}
function getWallHideState(wallNode: WallNode, wallMesh: Mesh, wallMode: string, cameraDir: Vector3): boolean {
function getWallHideState(
wallNode: WallNode,
wallMesh: Mesh,
wallMode: string,
cameraDir: Vector3,
): boolean {
let hideWall = wallNode.frontSide === 'interior' && wallNode.backSide === 'interior'
if (wallMode === 'up') {
@@ -167,7 +172,10 @@ export const WallCutout = () => {
} else {
const currentMaterial = (wallMesh as Mesh).material
const materials = wallMaterialCache.get(wallId)
if (!materials || currentMaterial !== (hideWall ? materials.invisible : materials.visible)) {
if (
!materials ||
currentMaterial !== (hideWall ? materials.invisible : materials.visible)
) {
const newMaterials = getMaterialsForWall(wallNode)
;(wallMesh as Mesh).material = hideWall ? newMaterials.invisible : newMaterials.visible
}
@@ -202,4 +210,4 @@ export const WallCutout = () => {
}
})
return null
}
}