127. 实战：酷家乐装修编辑器（三十一）

上节实现了删除：

2025-07-30 20.29.38.gif

但还有一些问题：

2025-07-31 09.47.56.gif

我在 3D 场景中把床删了，但其余场景的还在，需要刷新才可以。

我们先来加一下 2D 场景的删除：

const scene2D = scene2DRef.current!;

const furniture2D = scene2D.getObjectByName(curSelectedFurniture.id);
if(furniture2D) {
    furniture2D.parent?.remove(furniture2D);
}

同样的方式在 2D 场景中查找并删除这个家具。

2025-07-31 10.00.18.gif

这样 3D 场景里删了 2D 场景就没有了。

但同样需要处理 TransformControls 的问题：

2025-07-31 10.02.03.gif

导出下 detach 方法：

function detachTransformControls() {
    transformControls.detach();
}

组件里接收下：

const detachTransformControls2DRef = useRef<() => void>(null);

detachTransformControls2DRef.current = detachTransformControls;

删除的时候调用下：

detachTransformControls2DRef.current?.();

试试效果：

2025-07-31 10.08.07.gif

搞定。

然后是预览场景：

2025-07-31 10.09.11.gif

监听 data.furnitures 数组的长度变化就可以了：

useEffect(() => {
    const scene = scene3DRef.current!;

    const furnitureGroup = scene.getObjectByName('furnitures');

    furnitureGroup?.children.forEach(item => {
        if(!data.furnitures.find(f => f.id === item.name)) {
            item.parent?.remove(item);
        }
    })
}, [data.furnitures.length])

如果场景中的家具没有对应的数据，那就删除。

试下效果：

2025-07-31 10.16.16.gif

这样就好了。

案例代码上传了小册仓库

总结

这节我们修复了下删除时另外两个场景没有同步的问题。

首先用同样的方式在删除的时候把 2D 场景中的家具也删除，并且把 TransformControls 给 detach。

然后预览场景中监听 data 中家具数组的长度变化，长度变了就遍历所有家具，没有在 data 中的就删除。

这样，删除家具功能的三个场景同步删除就完成了。

127. 实战：酷家乐装修编辑器（三十一）

总结

评论