If the object is deleted, pasted, and dragged, it disappears

녹화_2023_06_02_10_51_00_5
I have attached an example image.

record

 let canvasGroupChild: Mesh[] = [];
        for (let i = 0; i < plane.children.length; i++) {
            canvasGroupChild.push((plane.children[i] as Mesh).clone());
        }
        if (canvasReady)
                setCanvasObject({
                    object: canvasGroupChild,
                    selectedMaterial: tmpPlane.current as Material[],
                    selectedObject:
                        tmpSelected.current as selectedMaterialsProps[],
                }),

undo code

for (let i = plane.children.length - 1; i >= 0; i--) {
            plane.remove(plane.children[i]);
        }
        if (items.object) {
            for (let i = items.object.length - 1; i >= 0; i--) {
                const target = items.object[i]
                if (target.name === "dragGroup" && target.children.length > 0 && target instanceof Three.Group) {
                    dragGroup.current = target;
                } else {
                    plane.add(target)
                }
            }
        }
        if (items.selectedMaterial) {
            tmpPlane.current = [...items.selectedMaterial]
        }
        if (items.selectedObject) {
            tmpSelected.current = [...items.selectedObject]
        }

I don’t know if my code is the problem or if it’s the problem of three.js I don’t know. If you have any guesses, please feel free to write your opinion.

Unless I’m super mistaken, neither three or react-three-fiber offer copy-paste functionality - so it’s most likely issue with custom code added by your app (it’s not possible to tell what’s happening from the code samples shared though.)

1 Like

one thing for sure this code is anti react, no matter what you do it will always and for ever cause you issues because you are mixing declarative react with imperative code and that won’t work in scale. this is the same as using declarative react in one part of the app, and in another you querySelect nodes and add div’s via appendChild—these are two different paradigms, react was built to move on from imperative oop.

if this is using three-fiber then that code shouldn’t contain “add” or “remove”. in react the view is the outcome of state, you render elements, or not, and that’s how they get mounted or unmounted.

return selectedElements.map(el => <mesh {...props}>...

if this isn’t using fiber, then there’s your solution. drei has a shift/box select component as well GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

<Select box multiple onChange={console.log}>
  <Foo />
  <Bar />
</Select>

function Foo(props) {
  const selected = useSelect()
  ...
  return (
    <mesh {...props}>
     <boxGeometry />