d0cdeb2ac4
问题描述： 选中墙体并切换材质颜色后，在界面上进行缩放、旋转或移动操作时， 墙体实际渲染的颜色会恢复为原来的白色，但颜色选项卡显示仍为选中的颜色。 根本原因： WallCutout 系统在每次相机移动时，直接使用固定的白色材质覆盖墙体材质， 完全忽略了用户在节点上设置的自定义材质。 修复内容： - 为每个墙体创建独立的材质对象，支持用户自定义颜色 - 支持预设颜色（brick, concrete, wood 等）和自定义颜色属性 - 添加材质哈希值跟踪，检测材质变化并重新创建材质 - 提取 getWallHideState() 辅助函数，优化代码结构 - 添加预设颜色映射的类型安全改进，使用 as const 和 keyof 类型操作
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { useRegistry, useScene, type WallNode } from '@pascal-app/core'
|
|
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 }) => {
|
|
const ref = useRef<Mesh>(null!)
|
|
|
|
useRegistry(node.id, 'wall', ref)
|
|
|
|
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} material={material}>
|
|
<boxGeometry args={[0, 0, 0]} />
|
|
<mesh name="collision-mesh" visible={false} {...handlers}>
|
|
<boxGeometry args={[0, 0, 0]} />
|
|
</mesh>
|
|
|
|
{node.children.map((childId) => (
|
|
<NodeRenderer key={childId} nodeId={childId} />
|
|
))}
|
|
</mesh>
|
|
)
|
|
}
|