Make TrackballControls Stationary When Object Position is Moved

Hi Everyone,

I hope you guys are having a great day! Excuse my ignorance as I am new to Three JS, however, I need my cube to be positioned to the left and for TrackballControls to work as well as I want the effect of the cube to be able to be rotated x or y directions, but be stationary when interacted with (I know the TrackballControls are actually rotating the camera). To achieve this I used cube.position.x = -2 and I used TrackballControls as well. However, now TrackballControls causes the cube to be moved and zoomed in whenever the cube is interacted with and I assume this happens because the cube is now not at (0,0), which caused the rotations to be stationary when interacted with previously, but now at (2,0) which causes it to “orbit.” To counteract this, I moved my camera position x to -2 as well, however, I still get the same effect. Is there a way to have my cube positioned left, but also have the Trackball controls to work as it did when the cube was positioned at the origin (rotate the cube stationary). This is the CodeSandbox, elastic-neumann-iw4tyl - CodeSandbox, if anyone is interested. Please let me know if there is a way. Because the only other solution I can come up with at the top of my head is interacting with mouseevents. However, I was wondering if there was a simpler solution that did not require this. Please let me know! Thanks!

i would suggest you use react-three-fiber when mixing react + three. you’d just be constantly re-inventing the wheel otherwise. you use react because of component interop, why throw this away.

here’s a more specific example that uses trackballcontrols with a self made drag handler angry-tesla-yuyr6z - CodeSandbox


First of all thanks for recommending me react-three-fiber, I will use this in my project now as having the ability to use components is great! However, in the codesandbox you sent me, this replicates the issue of the codesandbox in my post. When I shift the lines to the left and I rotate drag on the object, even though the top point (the point connecting the two lines) is stationary in theory when trackballcontrolls is in effect, to the user it is not stationary as it moves horizontally to the right of the screen when dragged. In this forked version of your CodeSandbox, ecstatic-butterfly-1gh0ky - CodeSandbox, I want that the top point to not move, stay at (-200, 100, 0) of the screen the whole time while being able to use trackballcontrols to give the look of the object rotating. I am assuming after doing further research yesterday, that the only way to achieve this is by having mousemovements on the object and have it rotate when it dictates a mouse movement and not use trackballcontrols. Is there perhaps an easier way? Thanks!