Model Position Changes but Rotation Center Doesn’t Follow After Dragging

Questions
1

Current Setup

  • Three.js version: Using three.min.js (local)
  • Controls: OrbitControls
  • Camera: PerspectiveCamera with FOV-based zoom (custom implementation)
  • Rotation Constraints:
    • minPolarAngle = maxPolarAngle = Math.PI / 2 (horizontal rotation only)
    • minAzimuthAngle = -Math.PI / 2, maxAzimuthAngle = Math.PI / 2
  • Zoom: Custom FOV zoom (disabled enableZoom, using wheel event to adjust FOV instead of camera distance)

Problem Description

I need to implement a drag-to-move feature for a 3D model (OBJ file). The desired behavior is:

  1. Right-click drag: Move the model in screen space (translate model position)
  2. Left-click drag: Rotate camera around the model (OrbitControls rotation)
  3. After dragging the model: When rotating, the camera should orbit around the model’s NEW position, not the original center

Current Issue: After dragging the model to a new position, when I rotate the camera:

  • The rotation center stays at the original point (0,0,0), causing a “spinning around a pole” effect
  • The model appears to orbit around the wrong point, not its current center
  • The model also seems to get larger when closer and smaller when farther (perspective distortion)

What I’ve Tried

  1. Dynamic controls.target updates: Updated controls.target to the model’s current center after dragging, but the camera position gets reset or the model snaps back
  2. change event listener: Tried listening to OrbitControls change event to sync rotation center, but it caused issues when mouse is released
  3. Freeze frames approach: Added delays/freeze frames after drag ends, but didn’t solve the root issue
  4. Group container approach: Wrapped model in a THREE.Group, moving model inside group while keeping group at origin - didn’t work
  5. Camera-controls library: Attempted to switch to camera-controls library but ran into event handling conflicts

Code Structure

  • Model is loaded using OBJLoader
  • Model position is updated directly: currentModel.position.add(moveVector)
  • After dragging, I calculate model center: box.getCenter(new THREE.Vector3())
  • I try to update controls.target to the new center, but rotation still happens around old center

Question

How can I make OrbitControls’ rotation center dynamically follow the model’s position after dragging, without the model snapping back or the camera position being reset? Is there a better approach or library that handles this use case?

Any suggestions or working examples would be greatly appreciated!

2

Item 3 in the desired list of features is something that confuses me. Orbiting with orbit controls always places the target point in the center of the canvas; and the camera always faces the target. If you move an object and orbit around it, the camera will again face the object (and this would put it visually back in the center). Most likely my interpretation is not the same as your expectation.

In any case, would this be close to what you want to achieve:

https://codepen.io/boytchev/pen/KwdoVrR

More details here:

1 Like
3

Thank you so much, @PavelBoytchev! Your CodePen demo (https://codepen.io/boytchev/pen/KwdoVrR) was exactly what I needed.

The key insight I learned from your solution is:

  • Move the camera (relative to cameraHost) instead of moving the model
  • Rotate the cameraHost, which keeps the rotation center fixed at the origin
  • This prevents the “orbiting around old center” problem completely

I’ve successfully implemented this approach in my project and it works perfectly! The model can be dragged to any position, and rotation always happens around the origin without any circling issues.

Thank you for sharing your knowledge and the excellent demo! :folded_hands:

1 Like