88. 实战：Three.js Editor（五）

上节实现了添加 Mesh，点击的描边：

2025-04-28 17.07.11.gif

这节我们做下删除。

在 Three.js Editor 里，选中物体后可以按 delete 删除：

2025-04-28 19.12.11.gif

这节我们就来实现这个功能。

选中的效果我们已经实现了，还要在选中的时候把选中的 mesh 记录一下：

改下 store/index.js

selectedObj: null,
setSelectedObj(obj) {
    set({
        selectedObj: obj
    })
},

我们加一个回调函数：

function onSelected(obj) {
    alert(obj.name);
}

点击选中的时候回调：

试下效果：

2025-04-28 19.26.15.gif

然后选中的时候把它记录到 store 里：

function onSelected(obj) {
    setSelectedObj(obj);
}

在 Properties 组件展示下：

<div>selectedObj: {selectedObj?.name}</div>

试下效果：

2025-04-28 19.30.49.gif

现在选中的时候就记录到了 store 里。

但取消选中的时候还是选中的这个，我们也要处理下：

2025-04-28 19.32.07.gif

这样就好了。

然后按下 delete 键的时候，如果有选中的物体，就要把它删除。

useEffect(() => {
    function handleKeydown(e) {
        if(e.key === 'Backspace') {
            sceneRef.current.remove(selectedObj);
        }
    }
    window.addEventListener('keydown', handleKeydown);
    return () => {
        window.removeEventListener('keydown', handleKeydown);
    }
}, [selectedObj]);

试一下：

2025-04-28 19.42.36.gif

可以看到，按 delete 键确实删除了。

但 store 里对应的 mesh 没删除。

我们加一个方法：

removeMesh(name) {
    set(state => {
        return {
            data: {
                ...state.data,
                meshArr: state.data.meshArr.filter(mesh => {
                    return mesh.name !== name
                })
            }
        }
    })
},

根据 name 来删除 meshArr 里的 mesh。

删除的时候调用下：

if(selectedObj) {
    sceneRef.current.remove(selectedObj);
    removeMesh(selectedObj.name);
}

2025-04-28 19.48.03.gif

这样，删除功能就完成了。

案例代码上传了小册仓库

总结

这节实现了删除功能。

在选中物体的时候，把它记录到 store 里。

然后按 delete 键的时候，如果有选中的物体，就删除这个物体，并且从 store 里删除，没有的话不做处理。

这样删除就完成了，下节继续来做编辑。

88. 实战：Three.js Editor（五）

总结

评论