0

I'm working on a project using React and Three.js.I'm encountering an issue where dragging an object for the first time creates a duplicate of that object. I'd like to understand why this happens and how to prevent it.

Issue

When I drag an object for the first time, it creates a duplicate of that object. Subsequent drags work as expected without creating duplicates.

Code

I've provided the code in the following CodeSandbox link: 3D Model with Three.js

What I've Tried

  • Ensured that there is no explicit code to duplicate the object.

  • Checked event listeners to make sure there are no additional listeners being triggered.

  • Searched for any similar issues online but haven't found a solution.

Expected Behavior

When an object is dragged, it should move without creating any duplicates.

Actual Behavior

The first time an object is dragged, a duplicate is created. Subsequent drags do not create duplicates.

If anyone has experienced a similar issue or has any suggestions on how to resolve this, your help would be greatly appreciated. Thank you!

Improve this question
2
  • useEffect is certainly called more than once, creating the objects more than one time. I am not sure but I think you shouldn't be using useEffect to create your objects. You may also look a react-three-fiber. Commented Jan 7 at 10:45
  • If you randomize model positions(eg: posY), the you can see that 4 components are being added to the canvas. So basically, the issue is not that your model is being duplicated on drag. The issue is that the models are being rendered 2 times in the same position. Probably clean your useEffect and move the addComponent function out of the current useEffect Commented Jan 7 at 11:09
Related questions
493
Updating an object with setState in React
7
Three.js polygon triangulation fails in pseudo duplicate points
6
Setting matrixWorld property of a three.js object
Load 3 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.